css样式三种优先级 |webkit内核浏览器的css写法

内联样式（inline style）->ID选择器样式（ID selector style）->类选择器或属性选择器或伪类选择器样式（class/attribute/pseudo-class selector style）->标签选择器或通配符选择器或继承样式（tag/wildcard/inherit style）

那么这三种优先级到底是什么呢？

1. 内联样式

内联样式是直接写在HTML标签中的样式，如<p>这是一段红色的文字</p>。它具有最高的优先级，因为它是直接作用在标签上的。

2. ID选择器样式

ID选择器样式是通过ID选择器定义的样式，如这是一个id为"example"的标签。该样式只作用在与之匹配的具体标签上，它比类选择器或属性选择器或伪类选择器样式具有更高的优先级。

3. 类选择器或属性选择器或伪类选择器样式

类选择器或属性选择器或伪类选择器样式是通过类选择器或属性选择器或伪类选择器定义的样式，如class="example"或input[type="text"]或a:hover等。它们都作用在多个标签上，它们的优先级要低于ID选择器样式，但要高于标签选择器或通配符选择器或继承样式。

4. 标签选择器或通配符选择器或继承样式

标签选择器或通配符选择器或继承样式是直接作用在HTML标签上的样式或从父元素继承而来的样式，它们的优先级最低。如<p>标签默认是有一些样式的，如字号、字体、行间距等，这些样式就是标签选择器或通配符选择器或继承样式。

在CSS中，如果出现了优先级冲突，就会按照上述的优先级顺序来解决，例如：

#example {color: blue;}
p {color: green;}
.example {color: yellow;}

如果HTML中有这样一段代码：

<p id="example" class="example">这是一段优先级测试的文字</p>

那么这段文字的颜色就是蓝色的，因为ID选择器样式的优先级最高。