参考
css权威指南【基本语法】，结合高级web解决方案【思想】，两本书的角度不同
类选择器，ID选择器
.warning.urgent
#firstp-para
属性选择器
简单的属性选择器
- 包含class属性的h1标签
h1[class]{color:red;}
<h1 class="hoopla">
hello
</h1> √
<h1>
Sernity
</h1>
<h1 class="fancy">
Fooling
</h1> √
根据精准的属性值
a[href="http://www.css-discuss.org/about.html"]{ font-weight:bold;}
根据部分属性值选择
| 形式 | 说明 |
|---|---|
[foo|="bar"] |
以bar-开头，或者foo="bar" |
[foo~="bar"] |
匹配以空格分隔的词组，如warn bar success |
[foo*="bar"] |
%bar%,如aabarcc |
[foo^="bar"] |
以bar开头 |
[foo$="bar"] |
以bar结尾 |
[foo|="bar"],前三个被选中
<h1 class="en"></h1> √
<h1 class="en-us"></h1> √
<h1 class="en-au"></h1> √
<h1 class="cy-en"></h1> ×
使用场景：插图文件名为:
figure-1.gif,figure-2.gif等
img[src|="figure"]{}
不区分大小写的标识符
a[href$='.PDF' i]{}
plant[type*='rock' i]{}
根据文档结构选择
后代选择器
h1 em{}
递归查询
直接子元素
h1>strong{color:red;}
string为h1的直接子元素
选择紧邻同胞元素
h1+p{}
p紧跟在h1后面
<div>
<h1></h1>
<p></p>
</div>
选择后续同胞
h2~ol{}
h2后面的同胞ol
<div>
<h2></h2>
<p></p>
<ol></ol> √
<ol></ol> √
</div>
伪类选择器
拼接伪类选择器
a:link:hover{color:red;}
a:visited:hover{color: maroon;}
拼接的顺序没什么关系，也可以写成
a:hover:link
- 区分语言
a:link:hover:lang(de){color: gray;}
结构伪类
- 选择根元素
:root{} <==> html{}
- 选择空元素
p:empty{}
<p></p> √
<p> </p>
<p>
</p>
<p><!-- 注释 --></p> √
有文本字符不算是空元素，只有注释算是空元素
截止到2017年，
empty是唯一一个在匹配时考虑文本节点的css选择符，其他选择符只考虑元素
选择唯一的子代
- only-child
选择的元素没有兄弟节点，文本节点不考虑
a[href] img:only-child{border: 1px solid black;}
<a href="http://w3.org"><img src="w3.png" alt="w3C" /></a> √
<a href="http://w3.org"><img src="w3.png" alt="w3C" /> The W3C </a> √
<a href="http://w3.org"><img src="w3.png" alt="w3C" /><em>The W3C</em></a> ×
- only-of-type
在同胞兄弟中，该元素类型仅仅存在一个，即自己
a img:only-of-type{}
<a href="">
<b>·</b><img /> √
</a>
<a href="">
<b>·</b><img /><img /> ×
</a>
对于p.unique:only-of-type来说，伪类特指元素p；
对于p:first-of-type:last-of-type<==> p:only-of-type，伪类没有顺序的原因是伪类是相对于元素本身，而不是被伪类修饰后的节点。换句话说，就是多个伪类在同时对前面的元素起作用。
选择第一个和最后一个子代
- first-child
p:first-child{}
<div>
<p>These are the necessary steps:</p> √
<ul>
<li>Insert key</li>
</ul>
<p>
Do <em>not</em>
</p>
</div>
- last-child
同理
选择第一个和最后一个某种元素
表格中每行的第一个单元格
td:first-of-type
<table>
<tr>
<th>Count</th><td>7</td>√<td></td>
</tr>
<tr>
<td>Count</td><td>7</td>√<td></td>
</tr>
</table>
选择第n个元素
p:nth-child(1) <==> p:first-child
- 隔行变色
ul>li:nth-child(2n+1){background-color: red;} 偶数行
ul>li:nth-child(3n+1){background-color: red;} 隔三行
n=0,1,2,3,4...
- 第九行后的所有
tr:nth-child(n+9){}
tr:nth-child(8)~tr{}
- 从后向前
tr:nth-last-child()
好处：当DOM发生增删改查时，借助伪类可以实现效果。
借助css来确定列表中有多少个列表
li:only-child{100%;}
li:nth-child(1):nth-last-child(2), // 正数第一、倒数第二 -> 一共有2个子元素
li:nth-child(2):nth-last-child(1){50%;} // 正数第二个
选择同类型中的第n个元素
- nth-of-type
- nth-last-of-type
:nth-of-type(1):nth-last-of-type(1) <==>
:only-on-type
动态伪类
在页面渲染后，根据页面的变化而变化，例如超链接访问之前、访问时、访问之后的状态
:link{} // 包括已访问和问访问
:visted{} // 已访问
a.external:link{}
a.external:visited{}
- 用户操作伪类
| 伪类 | 说明 |
|---|---|
:focus |
获取输入焦点的元素，即可以接受用户键盘输入或某种方式激活 |
:hover |
|
:active |
指代由用户输入激活的元素，例如超链接被点击的事件 |
可以处于:active状态的元素有超链接、菜单项目，以及可以设定tabindex属性的元素。
顺序
举个例子：a:link,a:visited,a:hover,a:focus,a:active的顺序，假如用这个顺序，下面进行解释：
- 在超链接未访问时，
:hover触发，此时a拥有的可被选择的选择器有a:link和a:hover，优先级一样，后面的覆盖前面的。 - 在超链接被访问后，
:hover触发，此时a拥有的可被选择的选择器有a:visited和a:hover，优先级一样，后面的覆盖前面的。
...... 其他的同理
UI状态伪类
根据用户界面元素（如复选框）的当前状态应用样式
| 伪类 | 说明 |
|---|---|
:enabled |
值启用的用户界面元素（如表单元素），即接受用户输入的元素 |
:disabled |
|
:checked |
|
:target伪类
:lang伪类
否定伪类
伪元素选择器
正在更新