css三种选择器的优先级

在CSS中，选择器是用来定位HTML元素并对其应用样式的工具。使用不同的选择器可以实现不同的样式效果。选择器的优先级是用来确定哪些样式被应用到一个元素上，当一个元素被多个选择器匹配时，就需要按照优先级来确定样式的应用顺序。

在CSS中，有三个重要的选择器优先级：

• 内联样式
• ID选择器
• 类选择器、属性选择器、伪类选择器和标签选择器

内联样式的优先级最高，它是直接在HTML元素的style属性中指定的样式，可以覆盖其他选择器对同一元素的样式定义。

<div style="color:red">这个文字会变成红色</div> 

ID选择器的优先级仅次于内联样式。可以通过在属性值前加上#符号来定义ID选择器。

#myDiv {
  background-color: yellow;
} 

类选择器、属性选择器、伪类选择器和标签选择器的优先级最低。这些选择器之间没有固定的优先级顺序，会根据它们在样式表中的出现顺序来确定优先级。

.myClass {
  color: blue;
}

[data-role=button] {
  background-color: green;
}

a:hover {
  text-decoration: underline;
}

p {
  font-size: 16px;
} 

需要注意的是，当多个选择器的优先级相同时，后定义的样式会覆盖先定义的样式。

综上所述，选择器的优先级是CSS样式应用的关键之一，要合理使用各种选择器，避免样式覆盖，从而实现预期的样式效果。