CSS笔记之选择器

发表于 | 分类于 | 本文总阅读量 次 | 字数统计: 2k 字 | 阅读时长 ≈ 8 分钟
选择器是CSS的核心，从最初的元素、class/id选择器，演进到伪元素、伪类，以及CSS3中提供的更丰富的选择器，定位页面上的任意元素开始变得愈发的简单。

css优先级的计算

优先级的计算首先是 选择器权重 的优先级计算，然后是 声明先后顺序 的优先级计算。

选择器的权重分为了三个级别，权重由大到小一次为id选择器、class选择器、元素选择器， 也就是优先计算id选择器的权重，如果相等再计算class选择器的权重，以此类推。当三个级别的权重都相等时，后面的样式声明覆盖前面的，将是最终结果。

1
2
3
4
5
6
7
8
9
*               /* a=0 b=0 c=0 */
LI              /* a=0 b=0 c=1 */
UL LI           /* a=0 b=0 c=2 */
UL OL+LI        /* a=0 b=0 c=3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 */
UL OL LI.red    /* a=0 b=1 c=3 */
LI.red.level    /* a=0 b=2 c=1 */
#x34y           /* a=1 b=0 c=0 */
#s12:not(FOO)   /* a=1 b=0 c=1 */

下面举个栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="lizi" id="lizi">
    <div class="child_lizi">栗子</div>
</div>
<style>
div{
  height:30px; /*id = 0 , class = 0 , label = 1*/
}
.lizi{
  height:120px; /*id=0, class=1 , label=0 */
}
.lizi .child_lizi{
  height:80px;  /* id = 0 , class = 2 , label = 0 */
}
div .child_lizi{
  height:135px; /* id = 0 , class = 1 , label = 1*/
}

</style>

由上可知，id选择器权重相等，class选择器第三条权重最大，最终结果.lizi .child_lizi的声明是最终值。

简洁高效的css

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找。

  • 不要在ID选择器前使用标签名，因为ID选择器是唯一的，加上div反而增加不必要的匹配

    1
    2
    3
    #DIV#divBox 
    /*更好写法：*/
    #divBox

  • 不要再class选择器前使用标签名

  • 尽量少使用层级关系 

    1
    2
    3
    divBox p .red{color:red;} 
    /*更好写法：*/
    .red{..}

  • 使用class代替层级关系 

    1
    2
    3
    #divBox ul li a{display:block;} 
    /*更好写法：*/
    .block{display:block;}

基本选择器

选择器 含义
* 通用元素选择器，匹配任何元素
E 标签选择器，匹配所有使用E标签的元素
.info class选择器，匹配所有class属性中包含info的元素
#footer id选择器，匹配所有id属性等于footer的元素

示例：

1
2
3
4
5
6
* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
#info { background:#ff0; }
p#info { background:#ff0; }

选择器

关系选择器

选择器 含义
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
E F 后代选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E > F 子选择器，匹配所有E元素的直接子元素F
E + F 相邻兄弟选择器，匹配所有紧随E元素之后的同级元素F
E ~ F 一般兄弟选择器, 匹配任何在E元素之后的同级F元素 
1
2
3
4
5
div p { color:#f00; }
#nav li { display:inline; }
div > strong { color:#f00; }
p + p { color:#f00; }
p ~ ul { background:#ff0; }

属性选择器

选择器 含义
E[attr] 匹配所有具有attr属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如”[cheacked]”。以下同。）
E[attr=val] 匹配所有attr属性等于”val”的E元素
E[attr~=val] 匹配所有attr属性具有多个空格分隔的值，其中一个值等于”val”的E元素
E[attr | =val] 具有属性attr且属性值为val或以val-开始的任何元素E
E[attr^=”val”] css3属性attr的值以”val”开头的元素
E[attr$=”val”] css3属性attr的值以”val”结尾的元素
E[attr*=”val”] css3属性attr的值包含”val”字符串的元素 
1
2
3
4
5
6
p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }
div[id^="nav"] { background:#ff0; }

伪元素

伪元素表示DOM外部的某种文档结构。在CSS2之前规范不明确的时候，伪元素和伪类都使用单冒号(:)来表示。而CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类。

为了兼容过去的写法，CSS3之前的伪元素仍然可以使用单冒号(:)来表示，浏览器是可以解析的。比如 :before 和 ::before 都可以被浏览器解析。
但是CSS3之后出现的伪元素必须用双冒号表示，不再支持单冒号的形式。

选择器 含义
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
E::first-line 匹配E元素的第一行
E::first-letter 匹配E元素的第一个字母
::selection 匹配突出显示的文本
::placeholder 占位 
1
2
3
4
5
6
7
8
9
.cbb:before { 
	content:""; 
	display:block; 
  	height:17px;  
}
a:after { content: " (" attr(href) ") "; }
p:first-line { font-weight:bold; color;#600; }

.preamble:first-letter { font-size:1.5em; font-weight:bold; }

结构伪类

选择器 含义
:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素E，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素E，第一个编号为1
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:only-child 匹配父元素下唯一的子元素E，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:nth-of-type(n) 匹配其父元素的第n个E的同类型元素
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:nth-last-of-type(n) 匹配其父元素的倒数第n个E的同类型元素
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-of-type 匹配父元素下同E相同标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
E:not(exception) 匹配不符合not条件的E元素 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
p:nth-child(3) { color:#f00; }

p:nth-child(odd) { color:#f00; }

p:nth-child(even) { color:#f00; }

p:nth-child(3n+0) { color:#f00; }

p:nth-child(3n) { color:#f00; }

tr:nth-child(2n+11) { background:#ff0; }

tr:nth-last-child(2) { background:#ff0; }

p:last-child { background:#ff0; }

p:only-child { background:#ff0; }

p:empty { background:#ff0; }
p:not(.fancy) {
  color: green;
}

状态伪类

选择器 含义
:link 未访问链接
:visited 已访问链接，一般不使用
:hover 鼠标悬停的状态，可用于任意元素，不限于链接
:active 被激活时的状态，不仅限于链接，可用于任何具有tabindex属性的元素
:focus 获得焦点时状态，不仅限于链接，可用于任何具有tabindex属性的无线
:enabled 已启用的界面元素
:disabled 已禁用的界面元素
:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
:required 应用于具有必填属性required的表单控件
:target 该选择器定位当前活动页面内定位点的目标元素
:valid： 应用于有效元素
:invalid 应用于空的必填元素，以及未能与type或pattern属性所定义的需求相匹配的元素
:read-only 应用于其内容无法供用户修改的元素
:read-write 应用于其内容可供用户修改的元素，比如输入框
:in-range 应用于具有范围限制的元素，其中该值位于限制内；比如具有min和max属性的number和range输入框；
:out-of-range 与:in-range选择相反，其中该值在限制范围外 
1
input[type="text"]:disabled { background:#ddd; }

参考

真正理解”CSS选择器的优先级”