CSS 选择器 selector

元素选择器 (type selectors)：div {}
通用选择器 (universal selector)：* {}
id 选择器 (id selectors)：#xxx {}
类选择器 (class selectors)：.xxx {}
- 【练习】类选择器实现多种按钮样式
属性选择器 (attribute selectors)
- [attr] - 拥有 attr 属性的元素
- [attr=val] - attr 属性等于 val 的元素
- [attr~=val] - attr 属性包含 val 的元素（空格分割）
- [attr|=val] - attr 属性等于 val 或者以 'val-' 开头
- [attr^=val] - attr 属性以 val 开头的元素
- [attr$=val] - attr 属性以 val 结尾的元素
- [attr*=val] - attr 属性包含 val 的元素（无需空格分割）
后代选择器 (descendant combinator)：div span {}
子选择器 (child combinators)：div>span {}
相邻兄弟选择器 (adjacent sibling combinator)：div+p
全体兄弟选择器 (general sibling combinator)：div~p
选择器组
- 交集选择器：div.one {}
- 并集选择器：div, .one, [title="test"] {}
【练习】让所有文本输入框的文字颜色都为红色
【练习】找到内容为 em2、em3、em4 的 em 元素

博文集合：【重识 HTML + CSS】知识点目录

本章 Gitee 代码：https://gitee.com/szluyu99/html_css_note/tree/master/day04

CSS 选择器的作用：按照一定的规则选出符合条件的元素，为之添加 CSS 样式

CSS 选择器的分类：

通用选择器 (universal selector)
元素选择器 (type selectors) / 标签选择器
类选择器 (class selectors)
id 选择器 (id selectors)
属性选择器 (attribute selectors)
组合 (combinators)
伪类 (pseudo-classes)
伪元素 (pseudo-elements)

元素选择器 (type selectors)：div {}

选中所有的 div 并设置前景色为红色：

通用选择器 (universal selector)：* {}

给所有的元素设置前景色为红色：

一般用来给所有元素作一些通用性的设置：

比如内边距、外边距

效率比较低，尽量不要使用

id 选择器 (id selectors)：#xxx {}

将 id 值为 one 的元素设置前景色为红色：

id 选择器的注意点：

一个 HTML 文档里面的 id 值是唯一的，不能重复
id 值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
最好不要用标签名作为 id 值

中划线 - 又叫连字符 (hyphen)，推荐使用

类选择器 (class selectors)：.xxx {}

将 class 值为 one 的元素设置前景色为红色：

class 选择器的注意点：

一个元素可以有多个 class 值，每个 class 之间用空格隔开
class 值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
最好不要用标签名作为 class 值

【练习】类选择器实现多种按钮样式

在开发过程中，类选择器可以认为是最常用最灵活的选择器

一般会将一些公共样式抽取出来，写到某个类选择器中；想要使用这些样式，加上类名即可

Gitee 代码：class 选择器 - 练习

属性选择器 (attribute selectors)

[attr] - 拥有 attr 属性的元素

拥有 title 属性的元素，设置前景色为红色：

[attr=val] - attr 属性等于 val 的元素

title 属性值恰好等于 one 的元素，设置前景色为红色：

#test 和 [id="test"] 看起来好像一样，其实本质不一样，参考

[attr~=val] - attr 属性包含 val 的元素（空格分割）

title 属性值包含单词 one 的元素（单词 one 与其他单词之间必须用空格隔开）：

以下 2 个选择器效果一致

[attr|=val] - attr 属性等于 val 或者以 ‘val-’ 开头

title 属性值恰好等于 one 或者以单词 one 开头且后面紧跟着连字符 - 的元素：

这个用法很奇特，一般都是用在 lang 属性上：

[attr^=val] - attr 属性以 val 开头的元素

title 属性值以单词 one 开头的元素：

[attr$=val] - attr 属性以 val 结尾的元素

title 属性值以单词 one 结尾的元素：

[attr*=val] - attr 属性包含 val 的元素（无需空格分割）

title 属性值包含单词 one 的元素（无需以空格作为分割）：

后代选择器 (descendant combinator)：div span {}

div 元素里面的 span 元素（包括直接、间接子元素）：

子选择器 (child combinators)：div>span {}

div 元素里面的直接 span 子元素（不包括间接子元素）：

建议采用以下写法：> 两边没有空格

div>span {color: red;
}

相邻兄弟选择器 (adjacent sibling combinator)：div+p

div 元素后面紧挨着的 p 元素（且 div、p 元素必须是兄弟关系）：

全体兄弟选择器 (general sibling combinator)：div~p

div 元素后面的 p 元素（且 div、p 元素必须是兄弟关系）

选择器组

交集选择器：div.one {}

同时符合 2 个条件的元素：div 元素、class 值有 one

同时符合 3 个条件的元素：div 元素、class 值有 one、title 属性值等于 test

并集选择器：div, .one, [title=“test”] {}

所有的 div 元素 + 所有 class 值有 one 的元素 + 所有 title 属性值等于 test 的元素：

上面的写法等价于将每个选择器单独写出来：

【练习】让所有文本输入框的文字颜色都为红色

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>07-选择器练习_01</title>
</head>
<body><input type="text"><input type="text"><input type="text"><input type="text"><input type="button"><input type="checkbox"><input type="color"><textarea></textarea>
</body>
</html>

答案：先找到 input 输入框，满足 [type="text"] 则为文本输入框，同时 textarea 也属于文本输入框，因此 input[type="text"], textarea {} 即所有文本输入框的选择器。

<style>input[type="text"], textarea {color: red;}
</style>

【练习】找到内容为 em2、em3、em4 的 em 元素

选择器编写建议：在保证精准性的前提下，尽量简洁

最繁琐的写法：

<style>div.box>p>strong>span[title="one"]>span>strong#cat~em {color: red;}
</style>

将没有特征的元素去掉：

<style>div.box span[title="one"] strong#cat~em {color: red;}
</style>

将元素名去掉：

<style>.box [title="one"] #cat~em {color: red;}
</style>

最精简的写法，由于 id 必然是唯一的，直接靠 id 定位：

<style>#cat~em {color: red;}
</style>

【重识 HTML + CSS】CSS 选择器相关推荐

【重识 HTML + CSS】知识点目录
重识 HTML + CSS 前言基本 HTML 标签基本 CSS 属性 CSS 选择器 CSS 特性 HTML 列表.表格.表单 HTML 元素类型盒子模型相关知识点 Photoshop 简单使 ...
【重识 HTML + CSS】项目实战
项目实战常见项目目录 CSS Reset CSS 编码规范浏览器私有前缀 CSS 知识补充 CSS 属性 - white-space CSS 属性 - text-overflow image-se ...
【重识 HTML + CSS】CSS 特性
CSS 特性 CSS 属性的继承继承的注意点 CSS 属性的层叠 CSS 属性的优先级优先级细节 CSS 属性使用总结博文集合:[重识 HTML + CSS]知识点目录本章 Gitee 代码: ...
【重识 HTML + CSS】CSS 伪类、伪元素
CSS 伪类.伪元素伪类 (pseudo-classes) 动态伪类 (dynamic pseudo-classes) :link.:visited.:hover.:active :focus 目标 ...
【重识 HTML + CSS】官方文档的阅读
官方文档 CSS 属性的描述 CSS 属性的取值组合 (combinators) 出现次数 (multipliers) 类型 (types) < number >.< intege ...
【重识 HTML + CSS】浮动
浮动 CSS 属性 - float 浮动的规则浮动的应用浮动存在的问题:高度坍塌清浮动的常见方法 CSS 属性 - clear 各种定位方案对比博文集合:[重识 HTML + CSS]知识点目 ...
【重识 HTML + CSS】定位
定位标准流 (Normal Flow) CSS 属性 - position relative - 相对定位 static - 静态定位 fixed - 固定定位画布 (Canvas) 和视口 (V ...
【重识 HTML + CSS】背景相关知识点
background 背景 CSS 属性 - 背景 CSS 属性 - background-image 设置元素背景图片 CSS 属性 - background-repeat 设置背景图片是否平铺 C ...
【重识 HTML + CSS】Photoshop 简单使用
Photoshop Photoshop 简介常用功能常用面板常用设置单位设置标尺设置颜色模式设置移动工具设置增加画布大小常用快捷键矩形选框工具 (D) 裁剪工具.切片工具 (C) ...

【重识 HTML + CSS】CSS 选择器