CSS选择器

1. 元素选择器

直接指定元素标签。

p {color: black;}

2. 后代选择器

示例中，缩进只应用于块引用的后代段落

blockquote p {padding-left: 2em;}

3. ID选择器

用#和id名来表示

#id-name{}

4. 类选择器

用.和类名来表示

.class-name{}

5. 伪类选择器

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */
input:focus{background-color:yellow;} /*选定的文本框背景颜色变为黄色*/

:link和:visited称为链接伪类，只能用于锚元素。:hover、:focus、:active称为动态伪类，理论上可以应用于任何元素。

伪类的并列使用，相当于或，例如：

a:hover, a:active {color:red;} /*当鼠标移动到链接上或者点击时颜色都是红色*/

伪类的综合使用，相当于和，例如：

a:visited:hover {color:red;} /*访问过的链接再把鼠标移上去就会变成红色*/

6. 通用选择器

通用选择器为*，其样式可应用于所有的可用元素。

* {color: red;}

7. 子选择器

后代选择器会选择一个元素的所有后代，包括嵌套的。而子选择器只选择元素的直接后代，不包括嵌套的。打比方来说就是后代选择器惠及子子孙孙，子选择器只让儿子受惠。例如：

#nav>li {color:red;} 
/*id为nav里面的li(A,B,D)为红色，而li里面嵌套的li(C1,C2,C3)不受影响*/ 

<ul id='nav'>
    <li>A</li>
    <li>B</li>
    <li>
        <ul>
        <li>C1</li>
        <li>C2</li>
        <li>C3</li>
        </ul>
    </li>
    <li>D</li>
</ul>

8. 相邻同胞选择器

相邻同胞选择器可用于定位同一个父元素下某个元素之后(相邻)的元素。例如：

h2 + p {color:red;}
/*h2后面相邻于h2的p会变红*/

<h2>head2</h2>
<p>paragraph1</p> <!--该p变红-->
<p>paragraph2</p>

9. 属性选择器

利用标签的属性来进行选择。例如：

/*指定所有input里面的字体大小都是16*/
input[type]{font-size:16px;}
/*指定文本框输入的字为红色*/
input[type=text]{color:red;}
/*指定按钮中的字为蓝色*/
input[type=button]{color:blue;}

或者不用写标签名称，单纯用一个属性。例如：

/*作用于所有含有title属性的标签*/
[title]{color:red;}
/*作用于所有含有属性title="apple"的标签*/
[title=apple]{color:red;}

[attribute~=value]为包含指定值的属性的所有元素设置样式。适用于由空格分隔的属性值，以title属性为例：

/*属性名中包含单词hello的，属性名对大小写敏感*/
[title~=hello]{color:red}

<!--变红-->
<p title='hello world'>hello world</p>
<p title='student hello'>student hello</p>
<!--不变红-->
<p title='helloworld'>helloworld</p>
<p title='Hello world'>Hello world</p>

[attribute|=value]为带有包含指定值的，且以该值开头的属性的所有元素设置样式。适用于由连字符-分隔的属性值，以title属性为例：

[title|=hello] { color:red; }

<!--变红-->
<p title='hello'>hello</p>
<p title='hello-world'>hello-world</p>
<p title='hello-a world'>hello-a world</p>
<p title='hello- world'>hello- world</p>
<!--不变红-->
<p title='hello world'>hello world</p>
<p title='a-hello'>a-hello</p>
<p title='helloworld'>helloworld</p>

[attribute^=value] 匹配属性值以指定值开头的每个元素。例如：

[title^=hello]{color:red;}

<!--变红-->
<p title='hello'>hello</p>
<p title='hello-world'>hello-world</p>
<p title='helloworld'>helloworld</p>
<p title='hello world'>hello world</p>
<!--不变红-->
<p title='ahello'>ahello</p>

[attribute$=value] 匹配属性值以指定值结尾的每个元素。例如：

[title$=hello]{color:red;}

<!--变红-->
<p title='hello'>hello</p>
<p title='ahello'>ahello</p>
<!--不变红-->
<p title='hello world'>hello world</p>

[attribute*=value] 匹配属性值中包含指定值的每个元素。例如：

[title*=hello]{color:red;}

<!--只要含有hello都会变红-->
<p title='hello'>hello</p>
<p title='hello-world'>hello-world</p>
<p title='hello-a world'>hello-a world</p>
<p title='hello- world'>hello- world</p>
<p title='hello world'>hello world</p>
<p title='a-hello'>a-hello</p>
<p title='helloworld'>helloworld</p>

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或以连字符结尾，具体见上面示例。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。