CSS是一种用于样式控制的语言,我们可以通过它来布局网页并装饰页面在CSS中,各种选择器都有不同的作用,同时也存在优先级的差别对于被选中的同一个元素,根据不同的选择器赋予的样式,存在一定的优先级差别,
CSS是一种用于样式控制的语言,我们可以通过它来布局网页并装饰页面
在CSS中,各种选择器都有不同的作用,同时也存在优先级的差别
对于被选中的同一个元素,根据不同的选择器赋予的样式,存在一定的优先级差别,这种差别就叫做优先级
selectors { style1; } #id_name { style2; } .class_name { style3; } p { style4; } p:first-child { style5; } div p { style6; }
以上代码中的选择器依次为:
1.元素选择器(selectors);
2.ID选择器(#id_name);
3.类选择器(.class_name);
4.标签选择器(p);
5.伪类选择器(p:first-child);
6.后代选择器(div p)。
这些选择器根据优先级排序如下所示:
1.行内样式
2.ID选择器
3.类选择器、属性选择器、伪类选择器
4.元素选择器、伪元素选择器、通配符选择器
5.通配符选择器
那么在实际应用中我们如何根据优先级来确定我们样式的应用呢?
我们可以在chrome浏览器的控制台中使用“Element”标签,查看页面元素的样式应用情况,并分别查看样式的来源
在案例中,我们为p元素设置了6种样式,我们查看该元素的样式如下所示:
p { color: red; } .div p { font-size: 16px; } .first { background-color: blue; } #second { text-align: center; } .second { font-weight: bold; } p { font-style: italic; }
我们可以看到,该元素的应用样式为:
color: red; /* 标签选择器的样式 */ font-style: italic; /* 标签选择器的样式 */ font-size: 16px; /* 后代选择器的样式 */ font-weight: bold; /* 类选择器的样式 */ text-align: center; /* ID选择器的样式 */
可以发现,元素选择器、后代选择器、类选择器、ID选择器的样式都被应用了,样式的优先级由高到低依次是:
ID选择器 > 类选择器 > 后代选择器 > 元素选择器
所以,在我们编写CSS代码的时候,需要充分考虑样式的优先级,以免因为优先级的问题导致样式无法达到我们的预期效果
粉丝
0
关注
0
收藏
0