2-css选择器¶

css选择器¶

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

基础选择器¶

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

类型（标签）选择器¶

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

p {
  color: pink;
}

类选择器¶

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

类选择
.box {
  color: pink;
}

body{
    定义类名
    <div style= "box"></div>
}

注意：

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

id选择器¶

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

id选择器
#box {
  color: pink;
}

id属性
<body>
    <div id="box"></div>
</body>

注意：

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	一组兄弟元素的第一个元素
:lsdt-child	一组兄弟元素中的最后一个元素
:nth-child(n)	一组兄弟元素列表中的第一个

:nth-child(n) 的取值可以是

数字
关键字 odd（奇数） even（偶数）
公式
- :nth-child(3n) 3的倍数，第3.6.9...个元素
- :nth-child(n+2) 第2个以及以后的元素
- :nth-child(-n+3) 前面3个元素
- 注意公式的n取值从0开始计算

表单伪类¶

针对表单元素的状态

使用场景：

表单按钮禁用的时候，调整颜色
复选框选中修改样式

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

示例一

<input type="text" disabled>        <!-- 被禁用的输入框 -->
<button disabled>提交</button>       <!-- 被禁用的按钮 -->

input:disabled {
  background-color: #f0f0f0;        /* 禁用状态的样式 */
  cursor: not-allowed;
}

示例二

<input type="radio" name="gender" value="male" checked> 男
<input type="checkbox" name="agree" checked> 我同意

input:checked {
  outline: 2px solid blue;           /* 选中的元素加蓝色外框 */
}

伪元素选择器¶

其中的 :: 可以选择元素中的伪元素从而设置样式

textarea::placeholder{
    color:red;
    font-size: 12px;
}

伪元素选择器	作用
::first-line	选择首行
::first-letter	首字母
::placeholder	选择input或者textarea占位符

选择元素的特定部分

伪元素选择器	作用
::before	元素内插入伪元素，作为第一个元素
::after	元素内插入伪元素，作为最后一个元素

属性选择器¶

使用场景：

表单样式控制
图标字体控制
国际化语言适配

属性选择器	代码	作用
[属性]	a[class]{}	匹配指定属性的元素
[属性=值]	a[class="font"]{}	匹配指定属性值的元素
[属性^=值]	a[class^="font"]{}	匹配属性指定字符开头的元素
[属性$=值]	a[class$="font"]{}	匹配属性值指定字符串的结尾的元素
[属性*=值]	a[class*="font"]{}	匹配属性值任意位置包含指定字符串的元素