跳转至

My Docs

CSS选择器

2-css选择器¶

css选择器¶

选择器的作用就是选中元素，然后给元素添加样式。

基础选择器¶

类型选择器
类选择器
id选择器
通配符选择器
选择器里是从上到下运行的，样式也是从上到下覆盖的，优先使用最下面的样式。

类型（标签）选择器¶

类型选择器选择某个类型的元素，也称为标签选择器

p {
  color: pink;
}

类选择器¶

类选择器选择具有某个类名的元素

.box {
  color: pink;
}

<div class="box"></div>

注意：

类选择器优先级高于类型（标签）选择器
类名自定义，不能是中文、纯数字
多个英文单词组成尽量使用-链接
命名有要意义，尽量见名知义
class属性可以有多类名中间用空格隔开

id选择器¶

id选择器选择具有某个id的元素

#box {
  color: pink;
}

<div id="box"></div>

注意：

id选择器优先级高于类选择器
id选择和类选择的区别是，id选择器不能重复，只能有一个
id属性命名规范同类名

通配符选择器¶

通配符选择器选择所有元素

* {
  margin: 0;
  padding: 0;
}

通配符选择器优先级最低
一般用于清除默认样式比如内外边距

关系选择器¶

后代选择器
子元素选择器
相邻兄弟选择器
通用兄弟选择器

后代选择器¶

后代选择器选择某个元素的后代元素

div p {
  color: pink;
}

子元素选择器¶

子元素选择器选择某个元素的子元素，只限一层

div > p {
  color: pink;
}

相邻兄弟选择器¶

紧紧挨着的兄弟元素

div + p {
  color: pink;
}

通用兄弟选择器¶

通用兄弟选择器选择某个元素后面的所有兄弟元素

div ~ p {
  color: pink;
}

分组选择器¶

分组选择器是将不同的选择组合在一起，使用逗号分隔，也称为并集选择器

使用场景：多个元素具备相同样式

小米官网的文字超出省略号的示例

.brick-item-m .desc, .brick-item-m .title{
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

伪类选择器¶

选择符号的特定状态或结构位置，符号是冒号：

鼠标经过链接
选择第5个或第10个元素
针对表单的样式

链接伪类¶

链接伪类是根据链接的不同状态，提升交互

伪类链接	作用
a:link	未访问链接的默认样式
a:visited	已访问链接的样式
a:hover	鼠标悬停在链接上的反馈
a:active	链接被点击时的瞬间状态

用户行为伪类¶

动态伪类	作用
:hover	鼠标经过元素
:focus	获得焦点的元素（表单）

结构伪类选择器¶

结构伪类	作用
:first-child	一组兄弟元素的第一个元素
:last-child	最后一个元素
:nth-child(n)	第n个元素

表单伪类¶

表单伪类	作用
:disabled	表单禁用
:checked	选中状态，单选复选框

伪元素选择器¶

伪元素选择器	作用
::first-line	选择首行
::first-letter	首字母
::placeholder	input/textarea占位符
::before	元素内部最前面
::after	元素内部最后面

属性选择器¶

属性选择器	作用
[属性]	匹配有该属性的元素
[属性=值]	精确匹配
[属性^=值]	开头匹配
[属性$=值]	结尾匹配
[属性*=值]	包含匹配
```