CSS选择器是用于选择和定位HTML或XML文档中的元素的模式。
下面土嘎嘎小编分享一些常见的CSS选择器:
1. 元素选择器:通过元素名称选择元素。
示例: p 选择所有 <p> 元素。
2. 类选择器:通过类名选择元素。
示例: .highlight 选择所有具有 highlight 类的元素。
3. ID选择器:通过ID属性选择元素。
示例: #logo 选择具有 logo ID的元素。
4. 属性选择器:通过属性及其值选择元素。
示例: [type="email"] 选择具有 type 属性值为 "email" 的元素。
5. 后代选择器:通过子孙关系选择元素。
示例: div p 选择所有 <p> 元素,这些元素是 <div> 元素的后代。
6. 直接子元素选择器:通过父子关系选择元素。
示例: ul > li 选择所有 <li> 元素,这些元素是 <ul> 元素的直接子元素。
7. 兄弟选择器:通过兄弟关系选择元素。
示例: h2 + p 选择紧跟在 <h2> 元素后的 <p> 元素。
8. 伪类选择器:通过元素的状态或位置选择元素。
示例: :hover 选择鼠标悬停的元素。
9. 伪元素选择器:选择元素的特定部分。
示例: ::before 在元素内容前插入一个伪元素。
10. 通用选择器:选择所有元素。
示例: * 选择文档中的所有元素。
11. 群组选择器:选择多个元素。
示例: h1, h2, h3 选择所有 <h1> , <h2> , <h3> 元素。
12. 子元素选择器:通过父元素选择子元素。
示例: ul > li 选择所有 <li> 元素,这些元素是 <ul> 元素的直接子元素。
13. 相邻兄弟选择器:选择紧接在另一个元素后的元素。
示例: h2 + p 选择紧跟在 <h2> 元素后的 <p> 元素。
14. 属性存在选择器:选择具有指定属性的元素。
示例: [disabled] 选择具有 disabled 属性的元素。
15. 属性值开始匹配选择器:选择属性值以特定字符串开始的元素。
示例: [class^="btn"] 选择 class 属性值以 "btn" 开头的元素。
16. 属性值包含匹配选择器:选择属性值包含特定字符串的元素。
示例: [class*="active"] 选择 class 属性值包含 "active" 的元素。
17. :nth-child() 伪类选择器:根据位置选择元素。
示例: ul li:nth-child(odd) 选择 <ul> 元素下的奇数位置的 <li> 元素。
18. :not() 伪类选择器:选择不匹配指定条件的元素。
示例: :not(.hidden) 选择不具有 hidden 类的元素。
这些是更多常见的CSS选择器示例,每个选择器都有不同的用途和适用情况。你可以根据需要组合使用和扩展这些选择器来选择和样式化文档中的特定元素。还有其他更多的选择器和组合方式可以使用。通过选择器,你可以精确地选择并应用样式于文档中的特定元素。