CSS选择器
选择器基础
CSS选择器是由与文档树中所有元素匹配的模式组成。当模式中的所有条件均满足时，选择器匹配，并且规则中的声明将应用于匹配的一个或多个元素。
p { color:red;}
这个规则会匹配文档中所有的p元素，并将其中文本的颜色设置为红色。
选择器概述
一些术语：
后代：文档数中的子代，孙子或者更高后代的元素。
祖先：元素由于存在嵌套关系，所以一个元素，他可以是文档树中元素的父级，祖父母或更早的祖先。
子代：元素的直接后代。两者之间没有其他元素。
父母：元素的直接祖先。两者之间不能有其他元素。
兄弟：与当前元素具有相同的父元素的元素。
基本选择器
| 序号 | 选择器 | 含义 |
|---|---|---|
| 1 | * | 通用选择器，匹配任何元素 |
| 2 | E | 元素选择器，匹配所有E标签的元素 |
| 3 | .infor | 类选择器，匹配所有class属性中包含info的元素 |
| 4 | #foot | id选择器，匹配所有id属性等于foot的元素 |
例子：
‘ * { color: RED; }
p { font-size:2em;}
.infor { backgroud:blue; }
‘ #foot { color: pink; }
p.infor { font-weight: bold; }
p#foot { color: green; }
这里要注意：p.infor 和 p .infor 有一些不一样。前一个表示规则应用于所有class属性包含infor的p元素，后一个表示规则应用于所有p元素的后代中，class属性包含infor的元素。*
- 类选择器
可以为一个元素分配多个类名称-该class属性可以包含一个用空格分隔的类名称列表，可以将类选择器仅用于具有多个类名的元素。p.info.error { color:#900; font-weight:bold; }此规则将匹ji配p在其类名称表中同时包含info和error的元素。
类选择器和ID选择器的区别
- 同一个类名可以应用于多个元素，而ID能且只能应用于一个元素
虽然，浏览器不会时时检测ID, 即把同一个ID应用于多个元素，浏览器不会报错且样式正常渲染，但是当使用DOM脚本函数时，对于类选择器来说，通过getElementsByClassName()函数可以获取到所有具有同一类名的元素，而getElementById()函数仅可以获取到第一个元素。
- id属性不支持值为以空格分隔的列表。也就是说，不能把多个ID选择符串在一起使用。而类选择符则可以。
多元素的组合选择器
| 选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，同时匹配所有E元素和F元素，其中逗号是必须的，用来分割元素 |
| E F | 后代元素选择器，用于匹配所有E元素的后代元素F,E和F之间用空格分割 |
| E>F | 子元素选择器，用于匹配所有E元素的子代F元素 |
| E+F | 相邻同辈选择器，用于匹配所有属于同一父元素的且紧跟在E元素之后的兄弟F元素 |
| E~F | 一般同辈选择器，匹配任何在E元素之后的同级F元素，两元素只需为属于同一父元素的同辈即可，不一定非要是紧邻同胞 |
属性选择器
| 选择器 | 含义 |
|---|---|
| E[att] | 匹配任何具有att属性的E元素 |
| E[att=val] | 匹配任何att属性值为val的E元素 |
| E[att^=val] | 匹配任何att属性值以val开头的E元素 |
| E[att$=val] | 匹配任何att属性值以val结尾的E元素 |
| E[att*=val] | 匹配任何att属性值包含“val”字符串的E元素 |
| E[att~=val | 匹配任何att属性具有多个空格分隔的值且其中一个值等于val的元素 |
| E[att1=val] | 匹配所有att属性具有多个连字符号分隔(eg:us-image)的值且其中一个值以val开头的E元素，或者是val本身，主要用于lang元素。比如：“en”“en-us”“en-gb”等 |
支持多个属性选择，E[att1][att2].... 属性的值与指定的值要完全一致
<p class = "fir sec">Hello</p>
若是要通过属性选择器匹配这个元素，顺序、个数等等要完全一致，即：
p[class = "fir sec"] // 顺序、个数等等要完全一致
当用到最后一个属性选择器时，只有属性的值或为单个值，即val，或为多个值均是包含连字符时，规则才会被应用。
div[class|="us"] {
color: red;
}
<div class="us us-image us-hap">
计算机科学与技术
</div>
<div class="us">
Jona Zhu 小诸葛
</div>
以上代码最终结果："计算机科学与技术"仍是黑色，"Jona Zhu 小诸葛"为红色。
但是如果 class="us us-image us-hap"改为class="us us-image us-hap”，那么结果文本全是红色。
伪类
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配父元素的第一个E元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有被点击过的链接 |
| E:active | 匹配鼠标已经按下还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配当前获得焦点的E元素 |
| E:lang((c) | 匹配lang属性等于c的E元素 |
| E:required | 匹配带有required属性的表单元素 |
| E:optional | 匹配无required属性的表单元素 |
| E:enabled | 匹配表单中激活的元素 |
| E:disabled | 匹配表单中禁用的元素 |
| E:checked | 匹配被选中的表单单选或多选元素 |
| E:selection | 匹配当前用户选中的元素 |
结构性伪类
| 选择器 | 含义 |
|---|---|
| :root | 匹配文档的根元素，对于HTML文档，就是HTML元素 |
| :nth-child(n) | 匹配其父元素的第n个子元素，第一个为1 |
| :nth-last-child(n) | 匹配父元素倒数第n个子元素 |
| :nth-of-type(n) | 与nth-child()类似，但会忽略非指定类型的元素 |
| :nth-last-of-type(n) | 与nth-last-child()类似，但会忽略非指定类型的元素 |
| :last-child | 匹配父元素中的最后一个子元素 |
| :only-child | 匹配父元素中仅有的一个子元素，等同于:first-child:last-child |
| :first-of-type | 匹配父元素中同种标签的第一个元素 |
| :last-of-type | 匹配父元素使用同一种标签的最后一个子元素 |
| :only-of-type | 匹配父元素下使用同种标签的唯一的一个子元素 |
| :empty | 匹配一个不包含任何子元素的元素。子元素只可以是元素节点或文本（包括空格）。 |
| :not(s) | 匹配不符合一组选择器的元素，它有时也被称为反选伪类（negation pseudo-class）。不能包含另外一个否定选择器。 |
| :target | 代表一个唯一的页面元素（目标元素），其id与当前URL片段匹配 |
注意
-
:not()伪类不能被嵌套，这意味着:not(:not(...))是无效的。 - 由于伪元素不是简单的选择器，他们不能被当作
:not()中的参数，形如:not(p::before)这样的选择器将不会工作。 - 可以利用这个伪类写一个完全没有用处的选择器。例如，
:not(*)匹配任何非元素的元素，因此，这个规则将永远不会被应用。 - 可以利用这个伪类提高规则的优先级 ，例如：
#foo:not(#bar)和#foo会匹配相同的元素，但是前者的优先级更高。 -
:not(.foo)将匹配任何非.foo的元素，包括<html>和<body>。 - 这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如，
body :not(table) a依旧会应用到表格元素<table>内部的<a>上, 因为<tr>将会被:not(table)这部分选择器匹配。
伪元素
| 选择器 | 含义 |
|---|---|
| E:first-line | 匹配E的第一行 |
| E:first-letter | 匹配E元素的第一个字母 |
| E:before | 在元素前面插入内容 |
| E:after | 在元素后面插入内容 |
::first-line 和::first-letter伪元素只能应用于块级元素，如标签或段落等，不能应用于行内元素。
网友评论