04-CSS 选择器(基础选择器、高级选择器) CSS 的继承性和层叠性
2016-11-26 00:32
507 查看
一、CSS 基础
HTML 超文本标记语言 从语义的角度描述页面的结构
CSS 层叠样式表 从审美的角度负责页面的样式
JS JavaScript 从交互的角度描述页面的行为
css 对换行不敏感,对空格也不敏感,但是一定要有标准的语法。冒号: 分号;都不能省略
常见属性
字符颜色: (快捷键:c)
字号大小:(单位是px 必须加 ,快捷键:fos)
背景颜色:(快捷键:bgc)
加粗/不加粗:(快捷键:fwd / fwn)
斜体/不斜体:(快捷键是:fsi / fsn)
下划线/无下划线:(快捷键:tdu / tdn)
二、基础选择器
2.1 标签选择器
CSS 中重要的两部分:
选择器:决定着怎么选
属性:决定着是什么
2、无论标签藏的多深都可以被选择上。
3、标签选择器选择的是页面上所有这种类型的标签,所以经常描述”共性“,无法描述某一个元素的”个性“。
2.2 id 选择器
id 选择器的选择符号是:#
任何的HTML 标签都可以有 id 属性,表示这个标签的名字(大小写严格区分)。
1、标签的名字只能有数字、下划线、字母。
2、必须以字母开头。
3、不能和标签同名。
一个HTML 页面,不能出现相同的 id,哪怕他们不是一个类型。
一个标签可以被多个选择器选择共同作用。这就是简单的层叠式。
2.3 类选择器
class 选择器的符号是 .
class 和 id 非常相似,任何的标签都可以携带 class 属性。calss 属性可以重复,页面上可以出现相同的class 类。
同一个标签,可能同时属于多个类,用空格隔开。
注:
1、class 可以重复,也就是说,同一个页面上可以有多个标签同时属于某一个类。
2、同一个标签可以同时携带多个类。
关于 id 和 class 的取舍问题,尽量是用class,除非极特殊的情况下可以用 id, 因为 id 一般是在 js 中用,所以尽量在CSS 中不用 id
三 、高级选择器
3.1 后代迭代器
3.2 交集选择器
3.3 交集选择器(分组选择器)
3.4 通配符
3.5 不常见的选择器
四、CSS 的继承性 和 层叠性
4.1 继承性
有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。
color、text-开头的、line-开头的、font-开头的
这些关于文字样式的,都是能够继承的,所有关于盒子的,定位的,布局的属性都不能继承。继承是从自己开始,直到最小的元素。
4.2 层叠性
层叠性:就是 CSS 处理冲突的能力,所有的权重计算,没有任何兼容问题。
当选择器选择上了某个元素的时候,权重的计算方式是:
id 的数量,类的数量,标签的数量
分别数一下 id 选择器的数量、类选择器的数量、标签选择器的数量,然后从前往后进行比较。
如果权重一样,那么以最后出现的为准。
如果不能直接选中某个元素,通过继承性影响的话,那么权重是0。
如果大家都是0,那么有一个就近原则,谁描述的近听谁的。
总结:
1、先看有没有选中,如果选中了,那么以(id数,class 数,标签数)来计算权重,谁大听谁的。如果都一样,听后写的为准。
2、如果没有选中,那么权重是0,如果大家都是0,就近原则。
HTML 超文本标记语言 从语义的角度描述页面的结构
CSS 层叠样式表 从审美的角度负责页面的样式
JS JavaScript 从交互的角度描述页面的行为
<style type="text/css"> </style>
css 对换行不敏感,对空格也不敏感,但是一定要有标准的语法。冒号: 分号;都不能省略
常见属性
字符颜色: (快捷键:c)
color: red;
字号大小:(单位是px 必须加 ,快捷键:fos)
font-size: 20px;
背景颜色:(快捷键:bgc)
background-color: blue;
加粗/不加粗:(快捷键:fwd / fwn)
font-weight: bold; font-weight: normal;
斜体/不斜体:(快捷键是:fsi / fsn)
font-style: italic; font-style: normal;
下划线/无下划线:(快捷键:tdu / tdn)
text-decoration: underline; text-decoration: none;
二、基础选择器
2.1 标签选择器
CSS 中重要的两部分:
选择器:决定着怎么选
属性:决定着是什么
<style type="text/css"> li{ color: red; font-size: 20px; } </style> </head> <body> <ul> <li class="aa">哈哈</li> </ul> </body>1、所有的标签都可以是选择器。比如:ul,li,label,dt,dl等。
2、无论标签藏的多深都可以被选择上。
3、标签选择器选择的是页面上所有这种类型的标签,所以经常描述”共性“,无法描述某一个元素的”个性“。
2.2 id 选择器
<style type="text/css"> #aa{ color: red; font-size: 20px; } </style> </head> <body> <ul> <li id="aa">哈哈</li> </ul> </body>
id 选择器的选择符号是:#
任何的HTML 标签都可以有 id 属性,表示这个标签的名字(大小写严格区分)。
1、标签的名字只能有数字、下划线、字母。
2、必须以字母开头。
3、不能和标签同名。
一个HTML 页面,不能出现相同的 id,哪怕他们不是一个类型。
一个标签可以被多个选择器选择共同作用。这就是简单的层叠式。
2.3 类选择器
class 选择器的符号是 .
class 和 id 非常相似,任何的标签都可以携带 class 属性。calss 属性可以重复,页面上可以出现相同的class 类。
<style> .cs{ background-color: red; } </style> </head> <body> <h class="cs">测试一下</h> <h>测试两下</h> <p class="cs">关心一下</p> <h>哈哈哈哈</h> </body>
同一个标签,可能同时属于多个类,用空格隔开。
<style> .cs{ background-color: red; } </style> </head> <body> <!--h3 标签 就同时属于两个类,一个是类 cs 一个是类dd--> <h3 class="cs dd">测试一下</h3> <h5 class="bb">测试两下</h5> <p class="cs aa">关心一下</p> <h4>哈哈哈哈</h4> </body>
注:
1、class 可以重复,也就是说,同一个页面上可以有多个标签同时属于某一个类。
2、同一个标签可以同时携带多个类。
关于 id 和 class 的取舍问题,尽量是用class,除非极特殊的情况下可以用 id, 因为 id 一般是在 js 中用,所以尽量在CSS 中不用 id
三 、高级选择器
3.1 后代迭代器
3.2 交集选择器
3.3 交集选择器(分组选择器)
3.4 通配符
3.5 不常见的选择器
四、CSS 的继承性 和 层叠性
4.1 继承性
有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。
color、text-开头的、line-开头的、font-开头的
这些关于文字样式的,都是能够继承的,所有关于盒子的,定位的,布局的属性都不能继承。继承是从自己开始,直到最小的元素。
4.2 层叠性
层叠性:就是 CSS 处理冲突的能力,所有的权重计算,没有任何兼容问题。
当选择器选择上了某个元素的时候,权重的计算方式是:
id 的数量,类的数量,标签的数量
分别数一下 id 选择器的数量、类选择器的数量、标签选择器的数量,然后从前往后进行比较。
如果权重一样,那么以最后出现的为准。
如果不能直接选中某个元素,通过继承性影响的话,那么权重是0。
如果大家都是0,那么有一个就近原则,谁描述的近听谁的。
总结:
1、先看有没有选中,如果选中了,那么以(id数,class 数,标签数)来计算权重,谁大听谁的。如果都一样,听后写的为准。
2、如果没有选中,那么权重是0,如果大家都是0,就近原则。
相关文章推荐
- css基础1-下划线、文本阴影、选择器、继承性、层叠性(数权重)
- 【转载】CSS高级选择器,指定选择对象,非常有意义,转载一下
- Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)
- CSS选择器详解(二)通用选择器和高级选择器
- css入门知识:div和span,常用选择器,高级选择器
- CSS基础-23选择器-选择器详解(2)
- 读书笔记--精通CSS高级Web标准解决方案(二)---CSS基础之CSS选择器
- Java基础04:选择排序;冒泡排序;折半查找;二位数组
- 我的CSS备忘录---高级选择器、框模型、定位
- css入门之html选择器,ID选择器,类选择器,属性选择器
- XHTML与CSS基础:(二)选择合适的标签
- XHTML与CSS基础:(一)选择合适的doctype
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画
- 07-DIV+CSS-选择器深入-通配符选择器-父子选择器-选择器分组
- CSS高级选择器
- 十、选择器的学习 - 基础选择器、层级选择器
- CSS相邻选择器(>)选择子元素而不包含该子元素的子元素,及如何让DIV中的内容垂直居中
- 读书笔记--精通CSS高级Web标准解决方案(一)---CSS基础
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画
- CSS高级选择器