后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
ul li {
background-color: pink;
}
.father .son {
background-color: powderblue;
}
这样的选择器选择的是在ul和.father选择器所处标签下所有的li和.son选择器元素。
- me 都被选中
- me 都被选中
- me 都被选中
元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器
子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。
ul>li {
background-color: pink;
}
.father>.son {
background-color: powderblue;
}
这样的选择器选择的是ul和.father选择器所处标签下第一个被该选择器选中的标签。
- me 被选中
- me
- me
元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器
并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。
.first, .second {
background-color: powderblue;
}
这样的选择器选择的是.father和.son选择器所处标签处的元素
元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
兄弟选择器
兄弟选择器选择的是两个或多个相邻选择器中的的其中几个标签，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
.frist+.second {
background-color: pink;
}
该选择器选择的是同一标签下的.first和.second选择器所选中的标签，可以结合下面的html代码
注意：hover对兄弟节点进行控制时，必须加上+兄弟选择器对兄弟节点进行控制，否则不起效果
‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示，比如:hover 、:first-child
.father:hover {
background-color: pink;
}
该选择器选择的是.father元素在鼠标经过时，上列代码是鼠标经过.father元素时元素的背景颜色变成粉红色
同样的伪类选择器还有很多，更多选择器访问https://www.w3school.com.cn/css/css_pseudo_classes.asp
CSS3新增选择器
属性选择器
选择器
描述
[attribute]
用于选取带有attribute属性的元素。
[attribute=value]
用于选取带有attribute属性和值为value的元素。
[attribute~=value]
用于选取attribute属性值中包含值为value元素。
[attribute|=value]
用于选取带有值为value开头的attribute属性值的元素，该值必须是整个单词。
[attribute^=value]
匹配attribute属性值以value值开头的每个元素。
[attribute$=value]
匹配attribute属性值以value值结尾的每个元素。
[attribute*=value]
匹配attribute属性值中包含value值的每个元素。
例如：我们想要选择div元素下所有包含class属性且属性值为choose的元素
div[class='choose'] {
background-color: salmon;
}
其html结构为：
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
选择器
描述
first-child
匹配父元素中的第一个子元素
last-child
匹配父元素中最后一个E元素
nth-child(n)
匹配父元素中的第n个子元素E
first-of-type
指定类型的第一个
last-of-type
指定类型的最后一个
nth-of-type(n)
指定类型的第n个
nth-child(n)选择某个父元素的一个或多个特定的子元素(重点)
n 可以是数字，关键字和公式
n 如果是数字，就是选择第n 个子元素，里面数字从1开始…
n 可以是关键字：even 偶数，odd 奇数
n 可以是公式：常见的公式如下( 如果n是公式，则从0开始计算，但是第0 个元素或者超出了元素的个数会被忽略)
公式
取值
2n
偶数
2n+1
奇数
5n
5 10 15 ...
n+5
从第5个开始(包含第五个)到最后
-n+5
前5个(包含第5个)...
区别：
nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子
总的来说就是：
nth-child 是查找到排序好的第n个元素再匹配。
nth-of-type是先匹配到元素，在根据排序好的元素查找到第n个元素。
例如以下代码
css：
.father .son:nth-child(2n) {
background-color: salmon;
}
.mother div:nth-of-type(2n) {
background-color: seagreen;
}
html：
hihi 因为不属于div元素，所以没有被选中
结构伪类选择器就是选择第n个
nth-child从所有子级开始算的，可能不是同一种类型
nth-of-type 是指定同一种类型的子级，比如 ul li:nth-of-type(2) 是选择第2个li
关于nth-child(n) 我们要知道n从0开始计算的，要记住常用的公式
如果是无无序列表，我们肯定用 nth-child 更多
伪元素选择器
选择符
简介
::before
在元素内部的前面插入内容
::after
在元素内部的后面插入内容
before 和 after 必须有 content 属性
before 在内容的前面，after 在内容的后面
before 和 after 创建一个元素，但是属于行内元素。
因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素
伪元素和标签选择器一样，权重为 1
例如以下代码
css：
.box {
width: 100px;
height: 100px;
background-color: pink;
}
.box::before {
content: "你好";
}
.box::after {
content: "世界";
}
html：
这段代码在浏览器中打开，会发现hello前面生成了你好，后面生成了世界
伪元素的功能非常强大，配合定位能搭配出非常好的效果
标签：attribute,元素,复合,nth,hi,选中,选择器,CSS
来源： https://www.cnblogs.com/JSW79/p/14725187.html
1156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
