选择器有哪些?写出它们的表示符号及涵义用途
时间: 2023-08-15 10:05:58 浏览: 62
在 CSS 中,常见的选择器有以下几种:
1. 元素选择器:用于选择 HTML 元素。例如,`body` 选择器可以选择所有 `<body>` 元素。表示符号为元素名,如 `body`。
2. 类选择器:用于选择具有相同类名的元素。例如,`.red` 选择器可以选择所有 `class` 属性中包含 `red` 的元素。表示符号为 `.类名`,如 `.red`。
3. ID 选择器:用于选择具有唯一 ID 的元素。例如,`#header` 选择器可以选择 ID 属性为 `header` 的元素。表示符号为 `#ID`,如 `#header`。
4. 属性选择器:用于选择具有特定属性的元素。例如,`[type="text"]` 选择器可以选择所有 `type` 属性为 `text` 的元素。表示符号为 `[属性名="属性值"]`,如 `[type="text"]`。
5. 后代选择器:用于选择指定元素的后代元素。例如,`ul li` 选择器可以选择所有 `<ul>` 元素下的所有 `<li>` 元素。表示符号为 `祖先元素 后代元素`,如 `ul li`。
6. 子元素选择器:用于选择指定元素的子元素。例如,`ul > li` 选择器可以选择所有 `<ul>` 元素下的直接子元素 `<li>` 元素。表示符号为 `父元素 > 子元素`,如 `ul > li`。
7. 相邻兄弟选择器:用于选择指定元素的下一个相邻兄弟元素。例如,`h1 + p` 选择器可以选择紧接着 `<h1>` 元素后的第一个 `<p>` 元素。表示符号为 `元素1 + 元素2`,如 `h1 + p`。
8. 通用选择器:用于选择所有元素。例如,`*` 选择器可以选择所有元素。表示符号为 `*`。
这些选择器可以组合使用,用于选择更具体的元素。例如,`ul.navbar li.active` 可以选择所有具有 `navbar` 类的 `<ul>` 元素下的所有具有 `active` 类的 `<li>` 元素。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)