摘要：元素选择器针对元素的选择器，用于寻找指定的元素。通用选择器通用选择器可设置全部的元素，由一个表示。使用表示伪类选择器。伪类选择器包含两种状态伪类和结构伪类。层叠规定了选择器的特殊性，将特殊性分为，，，四个登记，各等级特殊性逐渐降低即。
什么是选择器？
CSS选择器就是使样式找到应用对象。
简单选择器（Simple selectors）在日常开发中，最常用的选择器，也是最基本的选择器。
元素选择器（Type selector）针对HTML元素的选择器，用于寻找指定的HTML元素。
a { color: blue; }
p { color: black; }
通用选择器（Universal Selector）
通用选择器可设置全部的HTML元素，由一个 * 表示。
* { margin: 0; }
属性选择器（Attribute presence and value selectors）
| 类型 | 描述 |
|---|---|
| [title] | 选择具有 title 属性的所有元素。 |
| [title="baidu"] | 选择具有 title 属性且值为"baidu"的所有元素。 |
| [title~="baidu"] | 选择 title 属性值中出现的一个用空格分隔的"baidu"的元素。 |
| [title^="baidu"] | 选择 title 属性值以 "baidu" 开头的所有元素。 |
| [title$="baidu"] | 选择 title 属性值以 "baidu" 结尾的所有元素。 |
| [title*="baidu"] | 选择 title 属性值中包含字串"baidu"的所有元素。 |
以及
[title|="baidu"]：选择 title 属性值中等于 "baidu"或以 "baidu-"开头的所有元素。
给HTML元素中指定了 class 的元素定义样式。使用 . 表示。
.large-text { font-size: 18px; }
ID选择器（ID Selectors）
给HTML元素中指定了 id 的元素定义样式。使用 # 表示。
#main-content { margin: 8px; }
组选择器（Groups of selectors）
将具有相同的样式的元素，归为组合来写。使用 , 表示。
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
等于
h1, h2, h3 { font-family: sans-serif }
伪类选择器（Pseudo-Classes）
伪类选择器是需要根据文档结构之外的其他条件对元素应用样式。使用 : 表示伪类选择器。
a:hover{ color: red }
伪类选择器包含两种：状态伪类和结构伪类。
状态伪类基于HTML元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。
| 属性 | 描述 | css版本 |
|---|---|---|
| :link | 匹配未被访问的链接的元素。（标签） | 1 |
| :visited | 匹配已被访问的链接的元素。（标签） | 1 |
| :active | 匹配被激活的元素。（如鼠标点击的瞬间） | 1 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 2 |
| :focus | 匹配拥有键盘输入焦点的元素。 | 2 |
| :target | 匹配相关URL指向的E元素。 | 3 |
| :checked | 匹配处于选中状态的元素添加样式。（用于input type为radio与checkbox时） | 3 |
| :enabled | 向处于可用状态的元素添加样式。 | 3 |
| :disabled | 向处于禁用状态的元素样式。 | 3 |
| :indeterminate | 表示状态不确定的表单元素。（用于input type为radio与checkbox及 | 3 |
结构性伪类是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。
| 属性 | 描述 | css版本 |
|---|---|---|
| :not(s) | 匹配不含有s选择符的元素。 | 3 |
| :first-child | 匹配父元素的第一个子元素E。 | 2 |
| :last-child | 匹配父元素的最后一个子元素E。 | 3 |
| :only-child | 匹配父元素仅有的一个子元素E。 | 3 |
| :nth-child(n) | 匹配父元素的第n个子元素E。 | 3 |
| :nth-last-child(n) | 匹配父元素的倒数第n个子元素E。 | 3 |
| :first-of-type | 匹配同类型中的第一个同级兄弟元素E。 | 3 |
| :last-of-type | 匹配同类型中的最后一个同级兄弟元素E。 | 3 |
| :only-of-type | 匹配同类型中的唯一的一个同级兄弟元素E。 | 3 |
| :nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素E。 | 3 |
| :nth-last-of-type(n) | 匹配同类型中的倒数第n个同级兄弟元素E。 | 3 |
| :empty | 匹配没有任何子元素（包括text节点）的元素。 | 3 |
| :root | 匹配文档根元素。 | |
| 在HTML中，根元素始终是。 | 3 |
其他伪类及相关信息请参考：伪元素选择器（Pseudo-elements）
伪类
各伪类实现（待完成...）
伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中！
使用 :: 表示伪元素选择器。
| 属性 | 描述 | css版本 |
|---|---|---|
| ::first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| ::first-line | 向文本的首行添加特殊样式。 | 1 |
| ::before | 在元素之前添加内容。 | 2 |
| ::after | 在元素之后添加内容。 | 2 |
::before 和 ::after 被引入CSS中，最核心的目的，还是为了实现语义化。
使用::before 和 ::after 布局的闭合问题
.clear::after {
content: "";
display: block;
clear: both;
}
组合选择器
后代选择器（Descendant combinator）
由于HTML元素之间具有层次结构关系，因此在一些情况下，我们需要根据对应的HTML结构寻找指定的HTML元素。
p span{ color: #999; }
ul li { font-size:14px; }
#main-content div { color: black; }
子选择器（Child combinators）
选择元素的直接子元素。使用 > 表示。
body > div {
background: #c0c0c0;
height: 100px;
width: 100%;
}
body > div > div {
background: red;
}
相邻选择器（Next-sibling combinator）
根据一个元素与另一个元素的相邻关系对它应用样式。使用 + 表示。
/* 相邻元素选择后面的元素进行样式设置 */
li + li {
border-left: 1px solid #000000;
}
一般兄弟选择器（Subsequent-sibling combinator）
根据一个元素在另外一个元素后面且两个元素都属于一个父元素，对后面选择的元素进行样式设置。使用 ~ 表示。
/* 选择后面的元素进行样式设置 */
p ~ span {
color: red;
}
选择器层叠和特殊性
当你随机打开一个页面，查看源代码，你会发现，同一个元素，不止有一个CSS选择器及对应的样式。而一个元素只能应用一个样式，那么一堆样式中究竟是应用哪一个呢？这就涉及到CSS的层叠规则了。
CSS层叠规定了选择器的特殊性，将特殊性分为a，b，c，d四个登记，各等级特殊性逐渐降低（即a>b>c>d）。通过选择器特殊性的比较，实现样式选择。
计算规则如下：
在 style 中写的内联样式或加 !important 的样式特殊性为 1，0，0，0 （ !important > 内联样式）
每个ID选择器的特殊性为 0，1，0，0
每个类、伪类或者属性选择器的特殊性为 0，0，1，0
每个元素或伪元素选择器贡献特殊性为 0，0，0，1
组合选择器和通配符的对特殊性没有贡献
用style属性编写的规则总是比其他任何规则特殊；具有ID选择器的规则比没有ID选择器的规则特殊；具有类选择器的规则比只有类型选择器的规则特殊；如果两个规则的特殊性相同，那么后定义的规则优先。参考
CSS Selector
Selectors Level 3 -- W3C Working Draft
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114061.html
摘要：元素选择器针对元素的选择器，用于寻找指定的元素。通用选择器通用选择器可设置全部的元素，由一个表示。使用表示伪类选择器。伪类选择器包含两种状态伪类和结构伪类。层叠规定了选择器的特殊性，将特殊性分为，，，四个登记，各等级特殊性逐渐降低即。 什么是选择器？ showImg(https://segmentfault.com/img/remote/1460000016763315?w=784&h...
摘要：为标记语言提供了一种样式描述，定义了其中元素的显示方式。选择器指明了中的样式的作用对象，也就是样式作用于网页中的哪些元素基本语法第一种选择器叫选择器在里面写一个，通过这个就能找到这个。一、CSS是什么？ 它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。...
摘要：相反，当响应指针事件时，它会调用创建它的代码提供的回调函数，该函数将处理应用的特定部分。回调函数可能会返回另一个回调函数，以便在按下按钮并且将指针移动到另一个像素时得到通知。它们为组件构造器的数组而提供。 来源：ApacheCN『JavaScript 编程精解 中文第三版』翻译项目原文：Project: A Pixel Art Editor 译者：飞龙 协议：CC BY-NC-SA 4...
摘要：本章中的大部分内容适用于构造函数和方法。第项其他方法优先于序列化第项谨慎地实现接口第项考虑使用自定义的序列化形式第项保护性地编写方法第项对于实例控制，枚举类型优先于第项考虑用序列化代理代替序列化实例附录与第版中项目的对应关系参考文献 effective-java-third-edition 介绍 Effective Java 第三版全文翻译，纯属个人业余翻译，不合理的地方，望指正，感激...
摘要：定场诗马瘦毛长蹄子肥，儿子偷爹不算贼，瞎大爷娶个瞎大奶奶，老两口过了多半辈，谁也没看见谁前言本章为重读学习数据结构与算法第三版的系列文章，主要讲述队列数据结构双端队列数据结构以及队列相关应用。 定场诗 马瘦毛长蹄子肥，儿子偷爹不算贼，瞎大爷娶个瞎大奶奶，老两口过了多半辈，谁也没看见谁！ 前言 本章为重读《学习JavaScript数据结构与算法-第三版》的系列文章，主要讲述队列数据结构、...
阅读 3123·2021-10-14 09:42
阅读 641·2021-10-11 10:58
阅读 2517·2021-09-08 10:44
阅读 1102·2021-09-02 10:18
阅读 3145·2021-08-30 09:43
阅读 2615·2021-07-29 13:49
阅读 3566·2019-08-29 17:02
阅读 1435·2019-08-29 15:09
