CSS选择器有多种类型,包括元素选择器、类选择器、ID选择器、属性选择器、伪类选择器和伪元素选择器等。
以下是这些选择器的示例代码:
1、元素选择器:选择HTML文档中的特定元素。
cssp { color: red; }
2、类选择器:选择具有特定类的元素。
css.my-class { background-color: yellow; }
3、ID选择器:选择具有特定ID的元素。
css#my-id { font-size: 24px; }
4、属性选择器:选择具有特定属性的元素。
cssinput[type="text"] { width: 200px; }
5、伪类选择器:选择处于特定状态的元素,例如悬停状态或特定子元素。
cssa:hover { color: blue; }
6、伪元素选择器:选择元素的特定部分,例如第一个字母或第一个行。
cssp::first-line { color: green; }
关于优先级,CSS选择器的优先级按照以下规则进行排序:
- ID选择器具有最高优先级。
- 类选择器和属性选择器具有中等优先级。
- 元素选择器和伪元素选择器具有最低优先级。
- 在同一个元素上,后来的规则会覆盖先前的规则。