css选择器分为基础选择器和复合选择器。
标签选择器，类选择器，id选择器，通配符选择器。
标签选择器 :
缺点：不能设计差异化样式，只能选择全部的当前标签。
类选择器：
口诀：样式点定义，结构类class调用，一个或多个，开发最常用
1）
2）class=“类名”
id选择器：
口诀：样式#定义，结构id调用，只能调用一次，
1）
2）id=“id名”
例如
通配符选择器 ：
常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等
后代 选择器（重要）
空格
例如;
子选择器
大于号
并集选择器
逗号（和）
任何形式的选择器都可以作为并集选择器的一部分
交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
记忆技巧：交集选择器是并且的意思。 即…又…的意思
比如：p.one选择的是类名为.one的段落标签。
后续兄弟选择器
~将两个选择器分开，并匹配第二个元素的所有迭代元素，第二个选择器在第一个选择器后面的任意位置，但必须与第一个元素有相同的父级元素。
语法：
例如：
紧邻兄弟选择器
组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且两个元素都属于同一个父元素的子元素。
语法：
例子： 会匹配紧邻在 元素后的第一个元素。
伪类选择器
冒号
用于给某些选择器添加特殊效果。
注意：
1.冒号后没有空格
2.为了确保生效，应按照lvha的循顺序声明:link :visited :hover :active
3.开发中 :hover使用最多
:focus伪类选择器
:enabled伪类
CSS 伪类表示任何已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。该元素还有一个被禁用的状态，在此状态下它无法被激活或接受焦点。
disabled 禁用
:not()伪类
CSS伪类 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
语法：
伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择器或[伪元素]。
注意：
- 伪类的优先级将由其逗号分割的参数中优先级最高的选择器指定；
- :not(.foo) 的元素，包括 和
- 你可以同时否定多个选择器。例如： 等同于 。
- 如果传递给 伪类的选择器无效或者浏览器不支持，则整个规则都将是无效的。克服这种行为的有效方式是使用： 伪类，它接受一个可容错选择器列表。例如 将使整个规则无效，但是 将匹配任何不是 的元素。
例如：
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
1.属性选择器
2.结构伪类选择器
3.伪元素选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
补充:
表示带有以 attr 命名的属性的元素，并且该属性有多个值，值之间以空格隔开，其中至少有一个值为 value。
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀
选择所有具有 属性的元素（不论这个属性的值是什么）。
例如：
权重为11
注意：类选择器、属性选择器、伪类选择器，权重为10。
或
区别：
1.nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
2.nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子
nth-child（n）选择某个父元素的一个或多个特定的子元素（重点）
- n 可以是数字，关键字和公式
- n 如果是数字，就是选择第n 个子元素，里面数字从1开始…
- n 可以是关键字：even 偶数，odd 奇数
- n 可以是公式：常见的公式如下( 如果n是公式，则从0开始计算，但是第0 个元素或者超出了元素的个数会被忽略)
公式取值2n偶数2n+1奇数5n5 10 15…n+5从第5个开始（包含第五个）到最后-n+5前五个（包含第五个）…
小结
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子
- 关于nth-child（n）我们要知道n 是从0 开始计算的，要记住常用的公式
- 如果是无序列表，我们肯定用nth-child 更多
- 类选择器、属性选择器、伪类选择器，权重为10。
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
注意：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树（检查）中是找不到的，所以我们称为伪元素
- 语法： element::before {}
- before和after必须有content 属性
- before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
上图的权重为2
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/23079.html