选择器
将css样式作用于特定的HTML元素
| 选择器类型 | 说明 | 格式 |
|---|
| 标签选择器（元素选择器） | 指用HTML标签名称作为选择器，按标签名称分类 ,为页面中某一类标签指定统一的css样式。 | 标签名(元素名)｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
| 类选择器 | 类选择器使用"."进行标识，后面紧跟类名。与class属性搭配使用。 | .类名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
| 多类名选择器· | 即一个元素的class属性可以有多个类名，可以调用多个类选择器，类名之间用空格隔开。如class=“red green” | 与类选择器一样 |
| id选择器 | 使用"#"进行标识，后面紧跟id名。与id属性搭配使用。元素的id值是唯一的，且规定上该id选择器只能被一个元素调用。 | #id名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
| 通配符选择器 | 用"*"号表示，它是所有选择器中作用范围最广的，能匹配页面中所有元素，但平时应尽量少用。 | *｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
- 伪类选择器
也是一个选择器，用于向某些选择器添加特殊的效果，比如给链接添加特殊效果。
链接伪类选择器：
| 链接伪类选择器 | 说明 | 格式 |
|---|
| :link | 作用于未访问的链接 | a:link｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
| :visited | 作用于以访问过的链接 | a:visited｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
| :hover | 作用于鼠标移动到的链接 | a:hover｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
| :active | 作用于选定的链接，即当我们点击不松开鼠标时的状态 | a:active｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
注意：写的时候，当出现以上多个链接伪类选择器时，伪类选择器的顺序应该按上述顺序出现在css中，否则会出现问题。
结构（位置）伪类选择器：
| 结构伪类选择器 | 说明 | 格式 |
|---|
| :first-child | 选取属于其父元素的首个子元素的指定选择器。 | 元素:first-child{ 属性1：属性值1；属性2：属性值2；属性3：属性值3； } |
| :last-child | :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。 | 元素:last-child{ 属性1：属性值1；属性2：属性值2；属性3：属性值3； } |
| :nth-child(n) | 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。如：关键词 even（偶数）、odd（奇数）；公式 n（0、1、2、3…）， 2n(0、2、4…)，3n，3n+1等等 | 元素:nth-child(n){ 属性1：属性值1；属性2：属性值2；属性3：属性值3； } |
| :nth-last-child(n) | :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式。 | 元素:nth-last-child(n){ 属性1：属性值1；属性2：属性值2；属性3：属性值3； } |
目标伪类选择器：
| 目标伪类选择器 | 说明 | 格式 |
|---|
| :target | :target 选择器可用于选取当前活动的目标元素。URL 后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。通常与锚点定位联合使用。 | :target{ 属性1：属性值1；属性2：属性值2；属性3：属性值3； } |
目标伪类选择器代码示例：
<html>
<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
<p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>
</body>
</html>
- 复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。
| 选择器类型 | 说明 | 格式 |
|---|
| 交集选择器 | 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为类选择器，两个选择器之间不能有空格，该选择器是并且的意思，用的相对来说较少，不太建议使用。 | 元素.类名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
| 并集选择器 | 并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、类选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为他们定义相同的CSS样式。 | 选择器，选择器…｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
| 后代选择器 | 后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。 | 外层标签 内层标签｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
| 子元素选择器 | 子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，注意，符号左右两侧各保留一个空格。子元素代表的是亲儿子，不包含孙子、重孙子，即该选择器只渲染该子元素。 | 父元素 > 子元素 > …｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝ |
- 属性选择器
选取标签带有某些特殊属性的选择器，称为属性选择器，它有多种使用形式。
| 选择器类型 | 说明 |
|---|
| 标签[attribute]｛…｝ | 选择含有该属性的标签。 |
| 标签[attribute=value]｛…｝ | 选择该属性为value值的标签 |
| 标签[attribute^=value]｛…｝ | 该属性选择器选取的是以value开头的标签 |
| 标签[attribute$=value]｛…｝ | 该属性选择器选取的是以value结尾的标签 |
| 标签[attribute*=value]｛…｝ | 该属性选择器选取的是包含value的标签 |
| 选择器类型 | 说明 |
|---|
| 元素::first-letter｛…｝ | 选择文本的第一个单词或字。（如中文、日文、韩文等） |
| 元素::first-line｛…｝ | 选择标签中文本第一行。 |
| 元素::selection｛…｝ | 可改变选中文本的样式。（如鼠标点击选取时） |
| 元素::before｛content:（插入元素）｝ | 在元素内部的开始位置创建一个元素，该元素为行内元素，且必须要结合content属性使用。 |
| 元素::after｛content:（插入元素）｝ | 在元素内部的结束位置创建一个元素，该元素为行内元素，且必须要结合content属性使用。 |
注意：E:before、E:after在旧版本里是伪元素，CSS3的规范里"：“用来表示伪类，”::"用来表示伪元素，但是在高版本浏览器下E:before、E:after会被自动识别为E::before、E::after，这样做的目的是用来兼容处理。
1698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
