CSS选择器

选择器

规则结构

选择器   声明块(属性:值;)
h1    {color:red;}

分组

分组分为选择器分组和声明分组。

h1,h2 {color:red} //选择器分组

h1 {color:red;background:yellow;} //声明分组

两者的结合，可以让代码更加简洁。

选择器分类

元素选择器，类选择器，ID选择器，属性选择器。

类选择器

.warning {font-style: italic;} //通用类选择器
span.warning {font-weight: bold;}  //元素特定类选择器

多类选择器

.waring {font-style: italic;}
.urgent {font-weight: bold}
.waring.urgent {background: silver}; //class中同时含有warning和urgent的所有元素

属性选择器

对于类选择器和ID选择器，你所做的实际上只是选择属性值。 另外，CSS2引入了属性选择器，它可以根据元素的属性及属性值来选择元素。共有四种类型的属性选择器。

简单属性选择器

如有希望选择有某个属性的元素，而不论该属性的值是什么，可以使用一个简单属性选择器。

h1[class] {color: silver;}
*[title] {font-weight: bold;} //应用在所有包含title属性的元素
a[href][title] {font-weight: bold;} //根据多属性进行选择

根据具体属性值选择

a[title="wilson"] {font-weight: bold;}
a[title=wilson][href="wilsonliu.cn"] {color:red;} //根据多属性值进行选择

p[class="urgent"] {color: red;} //必须与属性值完全匹配，如下
p[class="urgent warning"] {font-weight: bold;}
<p class="urgent warning">Welcome to China!</p>

根据部分属性值选择

p[class~="warning"] {font-weight: bold;}

还有一个更高级的CSS选择器模块，这是在CSS2完成之后发布的，其中包含更多的部分值属性选择器或者称为”子串匹配属性选择器”。

类型	描述
[foo^=”ball”]	选择foo属性值以”bar”开头的所有元素
[foo$=”ball”]	选择foo属性值以”bar”结尾的所有元素
[foo*=”ball”]	选择foo属性值中包含子串”bar”的所有元素

特定属性选择类型

一般地，[attr|="val"]可以用于任何属性及其值。 用于特定地”-“标记

*[lang|="en"] {color:white;} //选择lang属性等于en或者以en-开头的所有元素
img[src|="figure"] {border: 1px solid gray;} //匹配一系列图片，其文件名都形如figure-1.jpg和figure-2.jpg

使用文档结构

后代选择器

定义后代选择器就是来创建一些规则，他们仅在某些结构中起作用，而在另外一些结构中不起作用。解析的时候，是从右往左解析。

h1 em {color:gray}
ul ol ul em {color:gray} //并不仅限于两个选择器

选择子元素

在某些情况下，可能并不想选择一个任意的后代元素；而是希望缩小范围，只选择另一个元素的子元素。

h1 > strong {color: red;}
table.summary td > p {color:yellow} //可以在同一个选择器中结合使用后代选择器和子选择器

选择相邻兄弟元素

要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟结合符，这表示为一个加号(+)。
li + li {color:red}

伪类和伪元素

利用伪类和伪元素，可以为文档中不一定具体存在的结构指定样式，或者为某些元素(甚至是文档本身)的状态所指示的幻象类指定样式。

伪类选择器

伪类的实质，它是把某种幻像类关联到与伪类相关的元素。例如first-child,可以想象为是在父元素中第一个元素中的class="first-child",而visited则可以想象为是在a标签里class="visited"。

链接伪类

要想区别哪些链接已经访问过，唯一的办法就是将文档中的链接与用户的浏览历史相比较。

:link //指示作为超链接并指向一个未访问地址的所有锚
:visited  //指示作为超链接并指向一个已访问地址的所有锚

动态伪类

CSS2.1定义了3个动态伪类，它们可以根据用户行为改变文档的外观。

:focus //指示当前拥有输入焦点的元素
:hover //指示鼠标指针停留在哪个元素
:active //指示被用户输入激活的元素

选择第一个子元素

p:first-child {font-weight: bold;}
最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素。实际上，是指作为父元素的第一个子元素的p元素。

结合伪类

a:link:hover {color:red;}
a:visited:hover {color: maroon;}

伪元素选择器

就像伪类为锚指定幻想类一样，伪元素能够在文档中插入假想的元素，从而得到某种效果。CSS2.1中定义了4个伪元素：设置首字母样式，设置第一行样式，设置之前和之后元素的样式。

设置首字母样式

第一个伪元素用于设置一个块级元素首字母的样式，而且仅对该首字母设置样式：

p:first-letter {color:red;}
<p>test doc</p> //测试p
<p><p:first-letter>t</p:first-letter>est doc</p> //由浏览器动态构造成的假想元素

设置第一行的样式

p:first-line {color:purple;}

设置之前和之后元素的样式

h1:before {content: "*";color:silver}