基本选择器
标签选择器
标签选择器又叫元素选择器,换句话说,文档的元素就是最基本的选择器,使用元素名称直接选择元素即可(如body,p,ul,ol,dl)。
类选择器
类选择以点"."开头,后面紧跟一个类名。类名不允许有空格,与元素中class属性的值保持一致。一个元素可以有多个class的值,每个值通过空格分割开。类名相同的元素属于一类元素。
<style>
.first{font-size:14px;}
.done{font-weight:bold;text-decoration:line-through;}
</style>
<ul>
<li class="first done">Creat an HTML document</li>
<li class="second done">Creat a CSS style sheet</li>
<li class="third done">Link them all together</li>
</ul>
ID选择器
ID选择器以"#"开头,后面紧跟一个ID名,在一个文档中,ID值不能重复,因此在选择文档中唯一元素的时候该选择器比较有用。
<style>
#polite {font-family: cursive;}
#rude {
font-family: monospace;
text-transform: uppercase;
}
</style>
<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>
普遍选择器
使用"*"来表示普遍选择器,表示选择所有元素,通常用在组合选择器中。
<style>
.left-nav > * {
width:200px;
background-color:#fafafa
}
</style>
<article class="left-nav">
<dl>
<dt>推荐</dt>
<dd class="current"><i class="icon-music"></i>发现音乐</dd>
</dl>
<dl>
<dt>我的音乐</dt>
<dd><i class="icon-cloud-download"></i>下载的音</dd>
</dl>
</article>
多选择器
多个选择器并列使用,使用“,”分割
例如:"div,.one,#tt" 表示选择div元素,class为one的元素以及id为tt的元素。
层次选择器
后代选择器
使用 “ ” 隔开两个选择器。例如 "ul li"表示选择ul的后代元素li,li可以为ul的直接子元素,也可以为ul的孙子元素。
子代选择器
使用 “>” 隔开两个选择器。例如 "ul>li"表示选择ul的直接子代元素li,ul的孙子元素li无法被选择到
相邻同胞元素
使用 “+” 隔开两个选择器。例如 ".one+*"表示选择class为"one"元素的下一个兄弟元素。
一般同胞选择器
使用 “~” 隔开两个选择器。例如 ".one~*"表示选择class为"one"元素的所有兄弟元素。
属性选择器(配合基本选择器进行筛选)
- [attr] 选择具有attr属性的元素、无论该属性的值为什么
- [attr=val] 选择具有attr属性的、并且attr的值为val元素
- [attr~=val] 选择具有attr属性的、并且attr的值之一为val的元素
- [attr^=val] 选择具有attr属性的、并且attr的值以val开头的元素
- [attr$=val] 选择具有attr属性的、并且attr的值以val结尾的元素
- [attr*=val] 选择具有attr属性的、并且attr的值包含val的元素
伪类选择器
伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中(配合基本选择器进行筛选)
子元素:
:only-child
:first-child
:last-child
:nth-child(n) 、: nth-last-child(n)
:first-of-type、:last-of-type
:nth-of-type(n)、:nth-last-of-type(n)
......
n可以为元素的序号,也可以为特殊的字符,比如“odd”,“even
元素状态相关
:hover
:active
:focus
......
伪元素选择器
伪元素以"::"开头,用在选择器后,用于选择指定的元素。
::after
::before
::first-letter
::first-line
::selection
......
选择器优先级
在所有的选择器中某个选择器定义的规则是否能够胜出(即优先级)取决于三个元素:Importance,特性值,代码顺序。
!important声明(Importance)
在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议不使用"!important",因为它会改变级联的工作方式,使得调试变得困难。
特性值
通过4个特性值来量化一个选择器
- 声明在元素的style属性中。特性值记为1000
- 包含在一个选择器中的所有ID选择器。特性值记为100
- 包含在一个选择器中的所有类选择器,属性选择器,伪类选择器。属性值记为10
- 包含在一个选择器中的所有元素选择器,伪元素选择器.属性值记为1
代码顺序
如果多个竞争选择器具有相同的重要性和特性值,代码顺序就发挥作用了,后来规则优先前面规则。