CSS 选择器 selector
- 元素选择器 (type selectors)：div {}
- 通用选择器 (universal selector)：* {}
- id 选择器 (id selectors)：#xxx {}
- 类选择器 (class selectors)：.xxx {}
- 属性选择器 (attribute selectors)
- 后代选择器 (descendant combinator)：div span {}
- 子选择器 (child combinators)：div>span {}
- 相邻兄弟选择器 (adjacent sibling combinator)：div+p
- 全体兄弟选择器 (general sibling combinator)：div~p
- 选择器组
- 【练习】让所有文本输入框的文字颜色都为红色
- 【练习】找到内容为 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>
3839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
