[分享]css3文字阴影权重

在CSS3中，文字阴影权重是一个非常重要的概念。权重是指样式表中样式规则的优先级，这决定了浏览器在处理多个冲突的样式声明时所应用的规则。CSS3中，通常有以下四种类型的选择器: 元素选择器、类选择器、...

在CSS3中，文字阴影权重是一个非常重要的概念。权重是指样式表中样式规则的优先级，这决定了浏览器在处理多个冲突的样式声明时所应用的规则。

CSS3中，通常有以下四种类型的选择器: 元素选择器、类选择器、ID选择器和通配符选择器。每种选择器的权重是不同的，其中ID选择器的权重最高，通配符选择器的权重最低。

/* 元素选择器 */ 
p { color: red; } /* 权重为1 */
/* 类选择器 */ 
 .box { color: blue; } /* 权重为10 */
 /* ID选择器 */ 
 #box{ color: green; } /* 权重为100 */
 /* 通配符选择器 */ 
 *{ color: orange; } /* 权重为0 */ 

当多个样式规则应用于一个元素时，将会比较它们的权重，优先应用具有更高权重的规则。

例如，如果在一个样式表中定义了以下规则：

.box { color: red; text-shadow: 1px 1px 1px #000; } /* 权重为11 */
#box { color: blue; text-shadow: 2px 2px 2px #000; } /* 权重为1002 */ 

然而，当应用于如下HTML的元素时：

<div class="box" id="box">Hello World!</div> 

在这种情况下，文本将呈现为蓝色，并具有2像素的文本阴影，而不是红色，并具有1像素的文本阴影。这是因为ID选择器具有比类选择器更高的权重，而text-shadow属性具有比color属性更高的权重。

在处理CSS3样式表时，我们应该注意其部分的权重，当需要强制应用某些样式时，可以利用权重的概念编写更具体的选择器，或者可以使用!important声明，在标记中强制应用给定的样式。