CSS 选择器

CSS

发布日期: 2022-01-11

文章字数: 2k

阅读时长: 7 分

阅读次数:

关于css属性选择器常用的有以下这些：

id选择器（#box） -->选择id为box的元素
类选择器（.one） -->选择类名为one的所有元素
标签选择器（div） -->选择标签为div的所有元素
后代选择器（#box div） -->选择id为box元素内部所有的div元素
子选择器（.one>one_1） -->选择父元素为.one的所有.one_1的元素
相邻兄弟选择器（.one+.two） -->选择紧接在.one之后的所有.two元素
交集选择器（div.one） -->选择类名为one的所有div元素
并集选择器（div,p） -->选择所有div和p元素

还有一些使用频率相对没那么多的选择器：

伪类选择器

:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：同级别中的第一个元素

伪元素选择器

::first-letter ：用于选取指定选择器的首字母
::first-line ：选取指定选择器的首行
::before : 选择器在被选元素的内容前面插入内容
::after : 选择器在被选元素的内容后面插入内容

属性选择器

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素

在CSS3中新增的选择器还有：

通用兄弟选择器（p~ul），选择p元素下的所有ul元素

结构化伪类选择器

:last-child 同级别中的最后一个标签
:nth-child(n) 同级别中的第n个元素
:nth-child(odd) 同级别中的所有奇数
:nth-child(even) 同级别中的所有偶数
:only-child 父元素中唯一的标签

:first-of-type 同级别中同类型的第一个元素
:last-of-type 同级别中同类型的最后一个元素
:nth-of-type(n) 同级别中同类型的第n个元素
:nth-last-of-type(n) 同级别中同类型的倒数第n个元素
:only-of-type  父元素中唯一的同类型的标签

:root 设置HTML文档
:empty 指定空的元素
:enabled 选择被禁用元素
:disabled 选择被禁用元素
:checked 选择选中的元素

属性选择器

[attribute|=value]：选择attribute属性开头为value，且value是被-或其他内容隔开的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素，无论value会不会被-隔开
[attribute$=value]：选择attribute属性结尾为value的所有元素
[attribute~=value]：选择attribute属性值包含value，且value被空格隔开的所有元素
[attribute*=value]：选择attribute属性值包含value的所有元素

CSS 三大特性

继承性

给父元素设置一些属性，子元素也可以使用，这个我们就称之为继承性。在 CSS 的继承中，不仅仅是儿子可以继承，只要是后代都可以继承。

可继承的属性

所有元素可以继承的属性：
- 元素可见性：visibility
- 光标属性：cursor：箭头可以变成需要的形状

内联元素可以继承的属性：

字体系列属性

font：组合字体
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
font-variant：偏大或偏小的字体

文本系列属性

text-indent：文本缩进
text-align：文本水平
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

表格布局属性

caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定

列表属性

list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合

引用：quotes：设置嵌套引用的引号类型

不可继承的属性

a 标签的字体颜色
h 标签字体的大小
display：规定元素应该生成的框的类型
文本属性：
- vertical-align：垂直文本对齐
- text-decoration：规定添加到文本的装饰
- text-shadow：文本阴影效果
- white-space：空白符的处理
- unicode-bidi：设置文本的方向
盒子模型的属性：width、height、margin、border、padding
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

层叠性

层叠性就是 CSS 处理冲突的一种能力。

优先级

什么是优先级：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定。

优先级判断的3种方式：

是否是直接选中（间接选中就是值继承）

如果是间接选中，那么就是谁离目标标签比较近就听谁的

相同选择器（直接选中）

如果都是直接选中，并且都是同类型的选择器，那么就是谁写在后面就听谁的

不同选择器（直接选中）

如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠：【!important >】内联 > id选择器 > 类选择器 > 标签选择器【> 通配符 > 继承 > 浏览器默认属性】

如果是多个选择器混合在一起使用，就需要计算权重。
权重的计算规则：

首先计算选择器中有多少个 id ，id 多的选择器优先级最高
如果 id 的个数一样，那么再看类名的个数，类名个数多的优先级最高
如果这两者的个数都一样，同时标签名称个数也一样，那么就不会继续往下计算了，此时谁写在后面就听谁的。也就是说优先级如果一样，那么谁写在后面就听谁的

注意：只有选择器是直接选中标签的才需要计算权重，否则一定会听直接选中的选择器的

如果再到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：