css的10个选择器
时间: 2023-10-21 09:21:33 浏览: 55
1. 元素选择器(Element Selector):使用HTML元素的标签名作为选择器,例如`p`、`div`等。
2. 类选择器(Class Selector):以`.`符号开头,后面跟上类名,例如`.my-class`。
3. ID选择器(ID Selector):以`#`符号开头,后面跟上ID名,例如`#my-id`。
4. 属性选择器(Attribute Selector):根据元素的属性来选择元素,例如`[type="text"]`可以选择所有type属性值为"text"的元素。
5. 后代选择器(Descendant Selector):使用空格将多个选择器连接起来,表示选取某个元素的后代元素,例如`div p`表示选取所有嵌套在`div`内的`p`元素。
6. 子元素选择器(Child Selector):使用大于号`>`将父元素和子元素连接起来,表示只选择直接子元素,例如`ul > li`表示选取所有直接嵌套在`ul`内的`li`元素。
7. 相邻兄弟选择器(Adjacent Sibling Selector):使用加号`+`将相邻的兄弟元素连接起来,表示选取紧跟在某个元素后面的兄弟元素,例如`h1 + p`表示选取紧跟在`h1`后面的`p`元素。
8. 通用兄弟选择器(General Sibling Selector):使用波浪号`~`将兄弟元素连接起来,表示选取与某个元素有相同父元素且在其后的所有兄弟元素,例如`h1 ~ p`表示选取`h1`后的所有`p`元素。
9. 伪类选择器(Pseudo-class Selector):表示元素的特殊状态,例如`:hover`表示鼠标悬停时的状态。
10. 伪元素选择器(Pseudo-element Selector):表示元素的特定部分,例如`::before`表示在元素内容前插入一个虚拟的元素。
这是一些常见的CSS选择器,用于选择HTML文档中的元素并应用样式。
相关推荐
![](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)