摘要：加号相连的两个选择器实现同级紧邻的元素选择的功能。我最好的朋友是米老鼠。样式紧挨的第一个同级元素是我最好的朋友是米老鼠。注意区分新增的属性选择器。是中新增的选择器，用于标示当前处于活动的锚标记。选择器的取反，这个很好理解。
概览
在 CSS 中，选择器用于选择需要添加样式的元素。
CSS 选择器非常丰富，现将 CSS 1 - 3 目前所有的选择器列举如下。
CSS 选择器这么多，都需要掌握吗？多吗，分组去记忆还是很好掌握的，掌握的越多你就越能随心所欲的操纵HTML文档。
上面的选择器只是基础，掌握了上面的内容，只能说明你识字了，至于能不能组成句子，甚至优美的句子还有很大的距离。
记住并使用选择器如何记住这么多选择器呢？我个人记忆方式是，一是分组，二是使用，在此分享给大家。
基础选择器类选择器.class，ID选择器#id，通配符选择器*，元素选择器element是四个最基本的选择器，相信你早就记住了。
* {
color: black;
}
a {
color: blue;
}
.msg {
color: red;
}
#top {
background-color: #ff0000;
}
选择器组合
通过使用特定的符号来连接选择器可以实现更加丰富的选择功能。
selector, selector逗号连接两个或多个选择器实现多选的功能。
h1, h2, .title {
color: black;
}
h1, h2 标签和 class="title" 的元素的字体颜色都设置为黑色。
selector selector空格直接相连的两个或多个选择器可以实现精确定位的功能。
#header h3 {
color: #fff;
}
ID为header的元素下面的h3元素字体颜色设置为白色。
selector > selector大于号连接的两个选择器实现父子选择的功能。
HTML文档片段
hello,job1...
hello,job2...
hi,job3...
hi,job4...
CSS样式
.info > p {
background-color: yellow;
}
.info下的所有直接子元素 p(带有hello的段落)背景被设置为黄色，其余的(带有hi的段落，不是子元素或不是直接子元素)不受影响。
selector + selector加号相连的两个选择器实现同级紧邻的元素选择的功能。
HTML部分文档
欢迎来到我到的主页
我是唐老鸭。
我最好的朋友是米老鼠。
我的样式会改变。
CSS样式
div + p + p {
background-color: yellow;
}
div 紧挨的第一个同级元素 p 是“我最好的朋友是米老鼠。”，然后又一个 + 连着 p 最终选中最后一个 p.
selector ~ selector波浪线连接的两个选择器实现同级并在其下面所有选择器指定元素的选择功能（好绕，看例子吧）。
HTML文档
A div element.
The first paragraph.
CSS样式
p ~ ul{
background:#ff0000;
}
p 元素同级的 ul 并且 ul 元素是在 p 的下面。
注意：这个是CSS3新增的选择器。
选择器结合结合的意思嘛，就是连着写在一起呗。
div#user {
color: black;
}
我是黑色字体
常用的就是 element#id,element.class.
也有一种多类选择器，也算选择器结合
HTML文档
This paragraph is very important.
This is a warning.
This paragraph is a very important warning.
CSS样式
.important {font-weight: bold;}
.warning {font-style: italic;}
.important.warning {background: silver;}
注意：在 IE7 之前的版本中，不能正确地处理多类选择器。
属性选择器HTML标签可以定义若干属性，我们可以通过属性选择器进行元素的选取。
注意区分CSS3新增的属性选择器。
[attribute]选取包含某属性的元素。
a[href]
选取包含href属性的a标签。
[attribute=value]选择某个属性attribute并且属性值为value的元素。
.info[ref="good"][attribute~=value]
选择某个属性attribute并且属性值中有value这个单词的元素。
这里是指单词，属性值如果是 boy man 则有两个单词。
p[class~="man"][attribute|=value]
属性起始值为value的元素。
p[class|="cls"]
以上是CSS2开始提供的属性选择器，下面的将是CSS3提供的选择器，注意区别使用。
[attribute^=value]属性值以value开始的元素。
[attribute$=value]属性值以value结尾的元素。
[attribute*=value]属性值包含value的元素，不一定是单词哟。
伪类选择器所谓的伪类，你可以简单的理解为带 : 的选择器。伪类很好理解，一般从名称上就可以知道其作用了。
可以从以下几个方面去记。下面的归类只用来方便记忆，这些选择器并不局限于我所列举的场景。
跟 a 紧密关联的 a:link所有未被访问的链接。
a:hover鼠标移动到链接上面。
a:active鼠标点按在链接上不松开。
a:visited链接已经点击过。
注意: 为了产生预期的效果，在CSS定义中，尽量采用上面四个的顺序去定义。
:target是CSS3中新增的选择器，用于标示当前处于活动的锚标记。
HTML文档
This is a heading
Click on the links above and the :target selector highlight the current active HTML anchor.
New content 1...
New content 2...
CSS样式
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
当点击锚定位a标签时，相应的锚元素会设置为指定样式。
跟 input 紧密关联的 :focus选择具有焦点的元素，一般都是输入元素。
除了 :focus 是CSS2开始有的，下面的都是CSS3新增的伪类。
:enabled可用的输入元素。
:disabled不可用的输入元素。
input[type="text"]:disabled {
background:#ffffdffffd;
}
:valid
匹配输入合法的元素，例如：email,number等等。
:invalid不合法的。
input:invalid {
border:2px solid red;
}
:optional
匹配可选输入元素。
:required匹配设置了“required”的元素。
input:required {
background-color: yellow;
}
:read-write
匹配可读可写的元素。
:read-only匹配设置了“readonly”的元素。
input:read-only {
background-color: yellow;
}
readonly 和 disabled 可以实现同样的功能，禁止用户输入和更改。
:out-of-range匹配设置范围且值范围超出范围的元素。
input:out-of-range {
border:2px solid red;
}
:in-range
匹配在设置值范围内的元素。
:checked匹配被选中的元素。
父子及排序关系相关先说一下常用于 p 的：
:first-letter第一个字母，一般用于实现首字母大写。
:first-line选取第一行。
比较通用的
:before在元素之前插入内容。
:after在元素之后插入内容。
示例
p:before {
content:"Read this -";
}
之前之后是指元素内部的前面和后面。
::before xxxx ::after
上面几个是CSS1或2开始支持的，下面的除了:first-child 是CSS2开始的，其余的都是CSS3伪类。
:root选择文档的根元素，基本就是 标签。
:empty没有任何子级（包括文本内容）的元素。
父子关系伪类有两种，一种是*-type 的，作用于父元素，另一种是*-child的，作用于子元素，还是看例子好理解。
:first-of-type选取一个元素的父元素的第一个这个元素。
HTML文档
This is a heading
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
CSS样式
p:first-of-type {
background:#ff0000;
}
第一个 p 标签将被设置背景色。p 的父元素是body,body的第一个p元素被选中。
:last-of-type这个元素的父元素的最后一个这个元素被选中。
:only-of-type这个元素的父元素只有一个这个元素，可以有其他元素不影响，唯一的这个元素被选中。
:nth-of-type(n)这个元素的父元素的第n个元素被选中。
n 可以是一个数字，一个关键字，或者一个公式。
数字：从1开始，代表第一个元素
关键字：奇数 odd 偶数 even
表达式：公式（an+b） a 代表一个循环的大小，n是计数器（从0开始），b是偏移量。
示例
tr:nth-of-type(2n+1) {
background:#ff0000;
}
奇数行（1,3,5,7...）设置背景。
:nth-last-of-type(n)从后往前计算。
说完 type 该说 child 了。
:first-child这个是CSS2开始有的伪类选择器，选取这个元素的第一个子元素。
示例
ul:first-child {
color: blue;
}
让ul的第一个li的字体为蓝色。
:last-child最后一个子元素。
:nth-child(n)第几个子元素，n配置同上。
:nth-last-child(n)从后开始找子元素。
还剩下几个，多带带列出来吧。
其他 :lang(language)选取lang属性的起始值为language的元素。
:not(selector)选择器的取反，这个很好理解。
示例
:not(a) {
color: black;
}
所有的非a标签。
::selection匹配元素中被用户选中或处于高亮状态的部分。
示例
::selection {
color:#ff0000;
background-color:blue;
}
鼠标拉选中的部分字体设置为红色，背景设置为蓝色。
后续会再跟进和补充一些东西，先发这些吧。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111157.html
摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...
摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...
摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...
摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...
阅读 1832·2021-11-11 16:55
阅读 1965·2021-10-08 10:13
阅读 716·2019-08-30 11:01
阅读 2132·2019-08-29 13:19
阅读 3257·2019-08-28 18:18
阅读 2604·2019-08-26 13:26
阅读 554·2019-08-26 11:40
阅读 1835·2019-08-23 17:17
