css选择器

参考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的顺序，假如用这个顺序，下面进行解释：

1. 在超链接未访问时，:hover触发，此时a拥有的可被选择的选择器有a:link和a:hover，优先级一样，后面的覆盖前面的。
2. 在超链接被访问后，:hover触发，此时a拥有的可被选择的选择器有a:visited和a:hover，优先级一样，后面的覆盖前面的。

...... 其他的同理

UI状态伪类

根据用户界面元素（如复选框）的当前状态应用样式

伪类	说明
:enabled	值启用的用户界面元素（如表单元素），即接受用户输入的元素
:disabled
:checked

:target伪类

:lang伪类

否定伪类

伪元素选择器

正在更新