一、特殊性规则
选择器的特殊性由选择器本身的组件确定;特殊性由四个部分组成,其初始值为0,0,0,0。
1. 对于选择器中的每一个id,加0,1,0,0;
2. 对于选择器中的每一个类、伪类、属性选择,加0,0,1,0;
3. 对于选择器中的每一个元素、伪元素,加0,0,0,1;
4. 结合符与通配符对于选择器的特殊性没有任何贡献。
注意:
1. 0,0,1,0的特殊性比0,0,0,13的特殊性更高。
2. 通配符 * 的特殊性为0,0,0,0,它是有特殊性的;结合符(比如h1+p中的“+”)根本没有特殊性;继承而来的样式也没有特殊性。
请看如下代码:
CSS Code复制内容到剪贴板- <head>
- <style>
- *{
- color:red;
- }
- body{
- color:cyan;
- }
- </style>
- </head>
- <body>
- <p>Whatkindofcolorthisparawillbe?</p>
- </body>
页面显示如下:
关于通配符 * :由于 * 适用于所有元素,而且有0特殊性,往往会在不经意间造成继承无法实现的情况,应该尽量避免使用 * 选择器。
3. 指定id属性的属性选择器与id选择器有本质区别,比如:
CSS Code复制内容到剪贴板- <head>
- <style>
- div[id="test"]p{
- color:red;
- }
- #testp{
- color:cyan;
- }
- </style>
- </head>
- <body>
- <divid="test">
- <p>Whatkindofcolorthisparawillbe?</p>
- </div>
- </body>
页面效果:
4. 行内样式的特殊性最高,为1,0,0,0。
5. 标记为!important的声明被称为重要声明,它没有特殊性,不过要与非重要声明分开考虑。
具体而言:非重要声明分为一组,它们之间的冲突使用特殊性解决;重要声明分为一组,它们之间的冲突内部解决;重要声明总是比非重要声明优先。
二、继承
1. 继承没有任何特殊性,记住这一点往往能明白很多问题。
请看如下代码:
CSS Code复制内容到剪贴板- <head>
- <style>
- p{
- color:red;
- }
- </style>
- </head>
- <body>
- <p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p>
- </body>
页面效果:
为什么设置了<p>元素的颜色为红色,<a>元素的颜色却是蓝色?
这并不是因为<a>元素不继承父元素的颜色(原谅我之前就是这么认为的),而是因为<a>元素继承了<p>元素的颜色,但是这个继承来的样式根本没有特殊性,然而浏览器默认样式中对<a>元素设置了样式,很明显浏览器默认样式的特殊性更高,于是<a>元素就按照浏览器默认样式显示。
2. 关于CSS中的继承:一般而言,只能子元素继承父元素的样式,也就是说样式在DOM中只能向下传递,不能向上;但是有一个例外,应用到body元素的背景样式可以向上传递到html元素,相应地可以定义其画布。
三、层叠
层叠规则:
1. 按权重排序。读者重要声明>作者重要声明>作者一般声明>读者一般声明>用户代理声明。
2. 权重相同的情况下,按照特殊性排序,特殊性越高的胜出。
3. 特殊性相同的情况下,按照样式表中的顺序排序,后出现的胜出。
btw,正是因为这个规则,才会使用LoVe-HA的顺序声明链接样式(LoVe-HA 依次为 :link; :visited; :hover; :active)。
css继承层叠
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 谢采妘.2016-邓丽君名曲专辑【丰荣】【WAV+CUE】
- 张含韵.2007-一人一梦【天中文化】【WAV+CUE】
- 蟑螂乐队.1999-帮个忙【福茂】【WAV+CUE】
- 张宇.2001-替身【EMI百代】【WAV+CUE】
- 班得瑞原装进口《第六张新世纪专辑:日光海岸》1CD[APE/CUE分轨][339.5MB]
- 班得瑞原装进口《第七张新世纪专辑:梦花园》1CD[APE/CUE分轨][331.4MB]
- 班得瑞原装进口《第八张新世纪专辑:琉璃湖畔》1CD[APE/CUE分轨][286.4MB]
- 魏如萱.2011-在哪里(EP)【添翼创越】【WAV+CUE】
- 群星.1981-新金曲奖·青年创作园地12合辑(喜玛拉雅复刻版)【歌林】【WAV+CUE】
- 麦洁文.1989-新曲与精丫新艺宝】【WAV+CUE】
- SNH48《薄荷糖 (Mint Candy)》[320K/MP3][33.72MB]
- SNH48《薄荷糖 (Mint Candy)》[FLAC/分轨][78.59MB]
- 刘美麟《同生》[320K/MP3][70.99MB]
- 群星.1994-宝丽金最流行3CD【宝丽金】【WAV+CUE】
- 群星.2024-聆听“某某”影视原声带【华纳】【FLAC分轨】