CSS Selector

一.基本选择器

序号选择器含义举例
1 * 通用元素选择器,匹配任何元素 {margin:0;padding:0;}
P{font-size:2em;}
.info{background:red;}
p.info{background:yellow;}
p.info.error{background:green;}
#info{background:blue;}
P#info{background:black;}
2 E 标签选择器,匹配所有使用E标签的元素
3 .info Class选择器,匹配所有class属性中包含info元素
4 #footer Id选择器,匹配所有id属性等于footer的元素

二.多元素的组合选择器

序号选择器含义举例
5 E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 div p{color:red;}
#nav li{display:inline;}
#nav a{font-weight:bold;}
div>strong{color:green;}
p+p{color:yellow;}
6 E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
7 E>F 子元素选择器,匹配所有E元素的子元素F
8 E+F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

三.CSS2.1属性选择器

序号选择器含义举例
9 E[att] 匹配所有具有att属性的E元素,不考虑其它的值(注意:E在此处可以省略,比如”[cheacked]”。) 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;}
10 E[att=val] 匹配所有att属性等于”val”的E元素
11 E[att~=val] 匹配所有att属性具有多个空格分隔的值,其中一个值等于”val”的E元素
12 E[att|=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值,其中一个值以”val”开头的E元素,主要用于lang属性,比如:”en”,”en-us”,”en-gb”等等

四.CSS2.1中的伪类

序号选择器含义举例
13 E:first-child 匹配父元素的第一个子元素 P:first-child{font-style:italic;}
Input[type=text]:foucs{color:#f00;background:#ffe;}
Input[type=text]:foucs:hover{background:#fff;}
q:lang(sv){quotes:”\201D””\201D””\2019””\2019”;}
14 E:link 匹配所有未被点击的链接
15 E:visited 匹配所有已被点击的链接
16 E:active 匹配鼠标已经其上按下,还没有释放的E元素
17 E:hover 匹配鼠标悬停其上的E元素
18 E:focus 匹配获得当前焦点的E元素
19 E:lang(c) 匹配lang属性等于C的E元素

五. CSS2.1中的伪元素

序号选择器含义举例
20 E:first-line 匹配E元素的第一行 P:first-line{font-weight:bold;color:#600;}
.preamble:first-letter{font-size:1.5em;font-weight:bold;}
.cbb:before{content:"";display:block;height:17px;width:18px;background:url(top,png) no-repeat 0 0;margin:0 0 0 -18px;}
A:link:after{content:"("att(href)")";}
21 E:first-letter 匹配E元素的第一个字母
22 E:before 在E元素之前插入生成的内容
23 E:after 在E元素之后插入生成的内容

六.CSS3的同级元素通用选择器

序号选择器含义举例
24 E~F 匹配任何在E元素之后的同级F元素 P~ul{background:#ff0;}

七.CSS3属性选择器

序号选择器含义举例
25 E[att^=”val”] 属性att的值以”val”开头的元素 Div[id^=”nav”]{background:#ff0;}
26 E[att$=”val”] 属性att的值以”val”结尾的元素
27 E[att*=”val”] 属性att的值包含”val”字符串的元素

八.CSS3中与用户界面有关的伪类

序号选择器含义举例
28 E:enabled 匹配表单中激活的元素 Input[type=”text”]:disabled{background:#ddd;}
29 E:disabled 匹配表单中禁用的元素
30 E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
31 E::selection 匹配用户当前选中的元素

九.CSS3中结构性伪类

序号选择器含义举例
32 E:root 匹配文档的根元素,对于HTML文档,就是HTML元素 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){color:#f00;}
tr:nth-last-child(2){color:#f00;}
p:last-child{ color:#f00;}
p:only-child{ color:#f00;}
p:empty{ color:#f00;}
33 E:nth-child(n) 匹配其父元素的第n个子元素。第一个编号是1
34 E:nth-last-child(n) 匹配其父元素的倒数第n额子元素,第一个编号是1
35 E:nth-of-type(n) 与nth-child()作用类似,但是仅匹配使用同种标签的元素
36 E:nth-last-of-type(n) 与nth-last- child()作用类似,但是仅匹配使用同种标签的元素
37 E:last-child 匹配父元素的最后一个子元素,等同于:nth-last- child(1)
38 E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth- of-type(1
39 E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
40 E:only-child 匹配父元素下仅有一个子元素,等同于:first-child:last- child e或:nth- child(1):nth-last- child(1)
41 E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
42 E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看做子元素

十.CSS3的反选伪类

序号选择器含义举例
43 E:not(s) 匹配不符合当前选择器的任何元素 :not(p){border:1px soild red;}

十一.CSS3中的:target伪类

序号选择器含义举例
44 E:target 匹配文档中特定“id”点击后的效果

十二. CSS4中的父元素

序号选择器含义举例
45 $E > F 该选择器将会把样式显示在包含有 F 的 $E 上 /* 样式显示在 li 上 */
$li > p { border: 1px solid #ccc; }
/* 样式显示在 ol 上 */
#wrapper > $ol > li { background:#f8f8f8; }

十三. CSS4中的ID匹配

序号选择器含义举例
46 E /foo/ F 用双斜杆(//)包含 HTML 属性名。 E /foo/ F 表示选中的所有页面中所有 F 里 ID 值与 E 元素的 foo 属性值相等的。
    <!-- 我们写一个 tab 的时候通常使用这样的情况 -->
    <ul>
        <li targetID="tab1">trigger1</li>
        <li targetID="tab2">trigger2</li>
    </ul>
    <div>
        <p id="tab1">tab1 content</p>
        <p id="tab2">tab2 content</p>
    </div>
    /* 样式应用与当前 :hover 所在的 li 的 target ID 属性值相等的 p 上 */
    li:hover /targetID/ p { border:2px solid #609060; }
            

十四. CSS4中的匹配伪类

序号选择器含义举例
47 E:matches() 匹配伪类语法为:div:matches(s1,s2),表示当div匹配s1或s2时应用样式 Label:matches(:hover,:focus) input {border:1px solid #333;}

十五. CSS4中的本地链接伪类

序号选择器含义举例
48 E:local-link 该伪类多用于a标签,并且可以增加一个数字参数a:local-link(n),n表示匹配目录的级数(path/),序数从0开始的 Link1 没有目录级数,匹配a:local-link(0)
{Color:blue;}
Link2 一级目录,匹配a:local-link(0), a:local-link(1),这样的话样式会被a:local-link(1)覆盖

十六. CSS4中的方向伪类

序号选择器含义举例
49 E:dir() 根据 HTML 属性选中
    选中 <p dir="rtl"></p>, 代码:
    p:dir(rtl){color: #888;}
            

十七. CSS4中的默认选项伪类

序号选择器含义举例
49 E:default 选中多个子元素中的默认元素,比如select中的默认option Option:default{background:red;}

十八. CSS4中的表单限制伪类

序号选择器含义举例
50 E:require
E:optional
匹配表单项中必选项和可选项 Input:require { color:red;}

十九. CSS4中可读可写伪类

序号选择器含义举例
51 E:read-write
E:read-only
匹配元素是否可读可写 E:read-write{font-family:Georgia;}

二十. CSS4中状态伪类

序号选择器含义举例
52 :current
:pass
:future
:pass表示时间线上的前一个元素,如果不在时间线内,则指其前一个元素; :future表示时间线上的后一个元素,如果不在时间线内,则指其后一个元素;

二十一. CSS4中尚不明确的选择器

序号选择器含义举例
52 :vaild
:invaild
:in-range
:out-of-range