css选择器有几种?选择器的优先级是怎样的?
CSS选择器的主要分类
元素选择器(Type Selectors):选择HTML文档中的特定类型的元素。
-
- 示例:p { color: red; }
类选择器(Class Selectors):选择具有指定类名的元素。
-
- 示例:.myClass { font-size: 16px; }
ID选择器(ID Selectors):选择具有指定ID的元素。
-
- 示例:#myID { background-color: yellow; }
属性选择器(Attribute Selectors):根据元素的属性及其值来选择元素。
-
- 示例:input[type="text"] { border: 1px solid black; }
伪类选择器(Pseudo-class Selectors):选择HTML元素的特定状态。
-
- 示例::hover、:active、:first-child、:visited等。
- 示例:a:hover { color: blue; }
伪元素选择器(Pseudo-element Selectors):选择HTML元素的特定部分。
-
- 示例:::before、::after、::first-line、::first-letter等。
- 示例:p::first-line { color: red; }
组合选择器(Combinator Selectors):使用空格、>、+、~等符号来选择具有特定关系的元素。
-
- 示例:div > p { color: green; }(选择直接子元素p)
CSS选择器的优先级基于以下规则:
内联样式(在HTML元素内部使用style属性定义的样式)具有最高优先级。
ID选择器具有比类选择器、属性选择器和伪类选择器更高的优先级。
类选择器、属性选择器和伪类选择器具有相同的优先级,优先级高于元素选择器和伪元素选择器。
元素选择器和伪元素选择器具有最低的优先级。
通配符选择器(*)和选择器继承的样式具有最低的优先级。
如果两个或多个选择器具有相同的特异性,则最后出现的规则会覆盖前面的规则(后者优先)。
!important规则可以覆盖任何其他样式规则,但应该谨慎使用以避免维护困难。(最优先!!!!)