CSS选择器

CSS选择器

元素选择器

文档的元素为最基本的选择器，设置一个HTML样式，选择器通常是某个HTML元素，如p，h3，em，a，甚至可以是html本身。例如：

html {color : black;}
h1 {color : gray;}
h3 {color :  silver;}
p th td {color : purple;}

通配选择器

CSS2中引入的一种简单选择器，显示为一个（*）。该选择器可以与任何元素匹配，就像是一个通配符。例如，要让一个文档中的每一个元素都为红色，可以写为以下规则：

*{color : red;}

类选择器

要应用样式而不考虑具体涉及的元素，最常用的方法是使用类选择器。在使用类选择器之前，需要修改具体文档的标记，以便类选择器正常工作。例如：

<p class="warning"> warning! </p>
.warning {fint-size : 20px;}

多类选择器

假设希望class为warning的所有元素都是粗体，而class为urgent的所有元素为斜体class中同时包含warning和urgent的所有元素还有一个银色的背景。则可以写为：

.warning {font-weight : bold;}
.urgent {font-style : italic;}
.waring.urgent {background : silver;}

ID选择器

某些方面，ID选择器类似于类选择器，ID选择器前面有一个#号，例如：

#first-para {font-weight : bold;}

这个规则会让id属性中包含值first-para的所有元素显示为粗体文本。
第二个区别是ID选择器不引用class属性的值，需要引用的是id属性的值，例如：

<p id = "first-para">first para</p>
#first-para {font-weight : bold;}

ID选择器和类选择器都会忽略通配选择器，且ID选择器的特殊性高于类选择器，所以当ID选择器和类选择器描述冲突时，将会采用ID选择器的描述。

属性选择器

简单的属性选择

如果希望选择有某个属性的元素，而不论该属性的值是什么，可以使用一个简单属性选择器。例如，要选择有class属性的所有h1元素，使其文本为银色，可以写为：

h1 [class] (color : silver;)

根据具体属性值选择

属性选择器可以进一步缩小范围，只选择特定属性的元素，例如，将指向某个特定文档的超链接变为粗体，可以写为：

a[href="www.baidu.com"]{font-weight:bold;}

根据部分属性值选择

如果你想选择class属性中包含warning的元素，可以用属性选择器做到：

<p class="urgent warning"urgent warning</p>

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

选择子元素

某些时候，希望选择一个元素的子元素。例如，你可能想选择只作为一个h1元素子元素的strong元素。可以通过子结合符（>）：

h1 > strong {color:red;}

这个规则会把h1下面出现的第一个strong元素变成红色，而后面的strong元素则不会。

选择相邻兄弟元素

要选择紧接在另一个元素后的元素，而且两者有相同的父元素，可以使用相邻兄弟结合符（+），例如：要除去紧接在一个h1元素后出现的段落的上边框，可以写作：

h1 + p {margin-top:0;}