HTML5之选择器篇[通配符、属性、伪类、伪元素等选择器以及选择器的组合、并列]

选择器

选择器：可以帮助你精准的选中想要的元素。

一、简单选择器

前三中选择器已在上一篇文章中提到。

ID选择器
元素选择器
类选择器
通配符选择器
* , 选中所有的元素
属性选择器
根据属性名和属性值选中元素。
1. 选中所有具有href属性的元素
  
  这会使具有href属性的标签全部显示红色。
2. 选中href属性的值等于某一个值。
  
  这会使href属性具有“新浪”的值的标签显示为红色。
  
  若想更加了解属性选择器可以参考文档 ☛ 属性选择器详细文档

伪类选择器
选中某些元素的某种状态。
（1）link:超链接未访问时的状态.

a:link{
   color:chocolate;
}
/*表示的是为访问时内容显示为chooclate色。*/

（2）visited:超链接访问过后的状态。

a:visited{
   color:brown;
}

（3）为元素的某些状态设置样式。:hover例如，伪类仅在将鼠标指针悬停在元素上时才选择它：

/* 选中鼠标悬停时的a元素 */
a:hover { 
   color:red;
}
/* 表示的是当鼠标停留在a元素上时，a元素里的内容会变成红色。 */

（4）active:激活状态，鼠标按下时的状态。

a:active{
   color:red;
}
/*表示的是当鼠标按下的时候，a标签里面的内容会变成红色。*/

伪元素选择器
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
（1）::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

HTML 内容：
```
一些引用, 他说, 比没有好。.
```
CSS 内容：
```
q::before { 
content: "«";
color: blue;
}
q::after { 
content: "»";
color: red;
}
```
结果：

(2)::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

若想更加了解伪元素选择器可以参考文档 ☛ 伪元素选择器详细文档

二、选择器的组合

并且

最后结果输出为第二个P标签里面的内容变为红色。
后代元素—— 空格
这些选择器选择的元素是其他选择器的后代。他们不需要是直接的孩子来匹配。

为了不让第一行文字改变颜色就只是改变li标签里面的元素，及li是.red的后代，后代选择器--在它们之间有空格的选择器.
子元素—— >

子组合器是一个大于符号(>)，它仅在选择器选择直接子元素时匹配。层次结构下的后代不匹配。
0005
运行结果：
0006
4. 相邻兄弟元素 —— +
格式：兄选择符名+弟选择符名{样式}
例：p+h3{样式} 只对p后的h3有效

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h2, p, h3 {
    margin: 0;    /* 清除默认边距 */
    padding: 0;    /* 清除默认间距 */
    height: 30px;    /* 初始化设置高度为30像素 */
}
p+h3 { background-color: #0099FF;    /* 设置背景色 */ }
</style>
</head>
<body>
<div class="header">
    <h2>情况一：</h2>
    <p>子选择器控制p标签，能控制我吗</p>
    <h3>子选择器控制p标签</h3>
    <h2>情况二：</h2>
    <div>我隔开段落和h3直接</div>
    <p>子选择器控制p标签，能控制我吗</p>
    <h3>相邻选择器</h3>
    <h2>情况三：</h2>
    <h3>相邻选择器</h3>
    <p>子选择器控制p标签，能控制我吗</p>
    <div>
        <h2>情况四：</h2>
        <p>子选择器控制p标签，能控制我吗</p>
        <h3>相邻选择器</h3>
    </div>
</div>
</body>
</html>

0007

5. 兄弟元素 —— ~
选择后面出现的所有兄弟元素。
0007
运行结果：
0008

若想更加了解组合选择器可以参考文档 ☛ 组合选择器详细文档

三、选择器的并列

多个选择器，用逗号分隔。
格式：选择符，选择符，……{样式}
例：h1,h2,h3,h4{样式} 对h1~h4有效

<html>
<head>
<meta utf-8>
<script type="text/javascript" src="IE8.js"></script>
    <style type="text/css">
    h1, h2, h3, h4 {
        background-color: #99CC33;    /* 设置背景色 */
        margin: 0;    /* 清除标题的默认外边距 */
        margin-bottom: 10px;    /* 使用下边距拉开各个标题之间的距离 */
    }
    </style>
</head>
<body>
    <h1>h1元素<span>这里是span元素</span></h1>
    <h2>h2元素<span>这里是span元素</span></h2>
    <h3>h3元素<span>这里是span元素</span></h3>
    <h4>h4元素<span>这里是span元素</span></h4>
    <h5>h5元素<span class="S1">这里是span元素</span></h5>
    <h6>h6元素<span class="S2">这里是span元素</span></h6>
</body>
</html>

00010