【重识 HTML + CSS】CSS 选择器

小咪咪 2023-01-22 06:58 30阅读 0赞

### 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】知识点目录][HTML _ CSS]

本章 Gitee 代码：[https://gitee.com/szluyu99/html\_css\_note/tree/master/day04][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 并设置前景色为红色：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]

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

给所有的元素设置前景色为红色：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]  
一般用来给所有元素作一些通用性的设置：

*  比如内边距、外边距

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

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

将 id 值为 one 的元素设置前景色为红色：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]  
id 选择器的注意点：

*  一个 HTML 文档里面的 id 值是唯一的，不能重复
 *  id 值如果由多个单词组成，单词之间可以用中划线`-`、下划线`_`连接，也可以使用驼峰标识
 *  最好不要用标签名作为 id 值  
    ![在这里插入图片描述][20210518210935852.png]

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

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

将 class 值为 one 的元素设置前景色为红色：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]  
class 选择器的注意点：

*  一个元素可以有多个 class 值，每个 class 之间用空格隔开
 *  class 值如果由多个单词组成，单词之间可以用中划线`-`、下划线`_`连接，也可以使用驼峰标识
 *  最好不要用标签名作为 class 值  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]

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

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

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

![在这里插入图片描述][20210518211438906.png]  
Gitee 代码：[class 选择器 - 练习][class _ -]

# 属性选择器 (attribute selectors) #

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

拥有 title 属性的元素，设置前景色为红色：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]

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

title 属性值恰好等于 one 的元素，设置前景色为红色：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]

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

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

title 属性值包含单词 one 的元素（**单词 one 与其他单词之间必须用空格隔开**）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]

> 以下 2 个选择器效果一致  
> ![在这里插入图片描述][20210519123215782.png]

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

title 属性值恰好等于 one 或者 以单词 one 开头且后面紧跟着连字符 `-` 的元素：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]  
这个用法很奇特，一般都是用在 lang 属性上：  
![在这里插入图片描述][20210519123534632.png]

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

title 属性值以单词 one 开头的元素：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]

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

title 属性值以单词 one 结尾的元素：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]

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

title 属性值包含单词 one 的元素（无需以空格作为分割）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 11]

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

div 元素里面的 span 元素（包括直接、间接子元素）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 13]

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

div 元素里面的 直接 span 子元素（不包括间接子元素）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 14]  
建议采用以下写法：`>` 两边没有空格

div>span {
    	color: red;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 15]

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

div 元素后面紧挨着的 p 元素（且 div、p 元素必须是兄弟关系）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 16]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 17]

# 选择器组 #

## 交集选择器：div.one \{\} ##

同时符合 2 个条件的元素：div 元素、class 值有 one  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 18]  
同时符合 3 个条件的元素：div 元素、class 值有 one、title 属性值等于 test  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 19]

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

所有的 div 元素 + 所有 class 值有 one 的元素 + 所有 title 属性值等于 test 的元素：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 20]  
上面的写法等价于将每个选择器单独写出来：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 21]

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

<!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 {}` 即所有文本输入框的选择器。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 22]  
选择器编写建议：**在保证精准性的前提下，尽量简洁**

最繁琐的写法：

将没有特征的元素去掉：

将元素名去掉：

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

[HTML _ CSS]: https://blog.csdn.net/weixin_43734095/article/details/117025820
[https_gitee.com_szluyu99_html_css_note_tree_master_day04]: https://gitee.com/szluyu99/html_css_note/tree/master/day04
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20221020/14e402cd851346cc98c44b1f326635e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: /images/20221020/fa335395a2da49e99147e96f39eeff6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]: /images/20221020/16ccf1c9868f4cf6a9e0e394d4e1fefa.png
[20210518210935852.png]: /images/20221020/a5977950a09d4f32994e246a337b2a18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]: /images/20221020/23acbfab0274482a9ae867d3c308cccc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]: /images/20221020/0f88b3c5d9fe4197b0d7f6e1f3e98e15.png
[20210518211438906.png]: /images/20221020/f7aa9d1d249b468b8125cb9a795bfd9e.png
[class _ -]: https://gitee.com/szluyu99/html_css_note/blob/master/day04/01-%E9%80%89%E6%8B%A9%E5%99%A8/02-class%E9%80%89%E6%8B%A9%E5%99%A8-%E7%BB%83%E4%B9%A003.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]: /images/20221020/30dcd481bc844f7eb2384a28c56c3897.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]: /images/20221020/1e3ee8b9f28442c58876d0399eb7b8e4.png
[Link 1]: https://blog.csdn.net/weixin_43734095/article/details/117336026#_48
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]: /images/20221020/2267a28359de42ed9c44284f1376c8ef.png
[20210519123215782.png]: /images/20221020/799fc6a175ba455fa8cf1dd81299857c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]: /images/20221020/fed4b4463b0e4e3e995f4d806b7782d2.png
[20210519123534632.png]: /images/20221020/e7b507b418a8410eafabf340f41e89a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]: /images/20221020/70c56dc0910e4d679dba614e064be324.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]: /images/20221020/d6a2e45b208c4fbb9bd0efdda6fafd01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 11]: /images/20221020/002d7bcddb804499936f711cc3824385.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 12]: /images/20221020/a339d26f941041ca97a2ea4a305c345a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 13]: /images/20221020/ccdfcd1303ca41168127d2759001498f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 14]: /images/20221020/1b95924a6d314aa381961e0f145dd943.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 15]: /images/20221020/15cbaa49e0754fbeb79620bcf73a0f53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 16]: /images/20221020/78b33544fa4343adb062fe32ff5a234f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 17]: /images/20221020/45c620a1673b4141a2422335f64ea0fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 18]: /images/20221020/2ead02ffc72d4a94a0f639f91b2034e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 19]: /images/20221020/c790dee0de0f44f69d3a180fc330d59b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 20]: /images/20221020/c4cb1bf738f4432689227956df28bd32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 21]: /images/20221020/f52ba419613842ea9aa453c585b3d93c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 22]: /images/20221020/5c27b8f4633842e58e7c9f50a88513a0.png