css选择器

选择器的分类

• 简单选择器：针对某一特征判断是否选中元素。
• 复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素。
• 复杂选择器：由“（空格）”“ >”“ ~”“ +”“ ||”等符号连接的复合选择器，根据父元素或者前序元素检查单个元素。
• 选择器列表：由逗号分隔的复杂选择器，表示“或”的关系。

简单选择器的介绍：

属性选择器
属性选择器根据 HTML 元素的属性来选中元素。属性选择器有四种形态。
第一种，[att]
直接在方括号中放入属性名，是检查元素是否具有这个属性，只要元素有这个属性，不论属性是什么值，都可以被选中。
第二种，[att=val]
精确匹配，检查一个元素属性的值是否是 val。
第三种，[att~=val]
多种匹配，检查一个元素的值是否是若干值之一，这里的 val 不是一个单一的值了，可以是用空格分隔的一个序列。
第四种，[att|=val]
开头匹配，检查一个元素的值是否是以 val 开头，它跟精确匹配的区别是属性只要以 val 开头即可，后面内容不管。 

伪类选择器

:empty 伪类表示没有子节点的元素，这里有个例外就是子节点为空白文本节点的情况。
:nth-child 和 :nth-last-child 这是两个函数型的伪类，CSS 的 An+B 语法设计的是比较复杂的，我们这里仅仅介绍基本用法。我们还是看几个例子：
:nth-last-child 的区别仅仅是从后往前数。
:first-child :last-child 分别表示第一个和最后一个元素。
:only-child 按字面意思理解即可，选中唯一一个子元素。

 

 

 

 

此文章为3月Day28学习笔记，内容来源于极客时间《重学前端》，推荐该课程。