发表于： 2019-11-19 23:14:58
1 450
一、今天完成的事情
在使用bootstrap的时候，发现引用导航栏再写样式会被bootstrap自带的样式覆盖，这个时候我们自己写的css代码怎么加上去呢？
我觉得就要考虑到代码的优先级的问题。在自己写的代码后面加上！important；再引用就会可以用了！
顺便可以了解一下什么是优先级和权重问题？？以及！important 的优先级。
问题：有多少种css选择器可以对<p>标签样式产生影响呢？
如果详细的进行分析，排列组合有太多种了，太过麻烦。我们就说说有哪几个类别：
- 行内样式： 即 style = "font-size: 12px"；
- id选择器： 即 #thisId {font-size: 12px;}
- class选择器： 即 .thisClass {font-size: 12px;}
- 元素选择器： 即 p {font-size: 12px;}
如上四种类别都可以对<p>标签的样式产生影响，那么谁先谁后，谁打谁小呢？
有如下两种解释：
- 一个selector的权重表示方式：0.0.0.0，按照计算规则给每位填充数字，对应位置相等，则比较下一位；
- 也有分别以1000、100、10、1四个权值系数对CSS选择器进行权重计算。
选择器类别 | 说明 | 权重表示 | 权值表示 |
行内样式 | 行内只有一个 style = "" | （1.0.0.0） | 1000 |
id选择器 | selector中使用了几个id，即#的个数 | （0.1.0.0） | 100 |
类选择器 | 类,伪类,以及属性的个数 如： .outerClass .buttonClass[type="button"]:hover{} 选择器中有2个类,1个属性,1个伪类 | （0.0.1.0） | 10 |
元素选择器 | 伪元素和标签元素的个数，如： p:first-child 选择器中有一个标签元素p和一个伪元素first-child | （0.0.0.1） | 1 |
最后的几点说明：
!important 表示强制应用该样式，例如：button{ width: 150px !important;}，与以上的选择器相遇时，强制使用此样式；
如果比较后权重相同，那么后者覆盖前者，后渲染的胜出；
内联样式 > id选择器样式 > 类选择器样式 > 元素选择器样式；
CSS选择器的使用，应该尽量避免使用 !important 和 内联样式；id通常也是与class区分开使用，前者多用于JS中的结点定位，后者多用于CSS选择器。
重中之重，1000/100/10/1这种权值系数的比较方式只是便于理解，真实情况下10个class并不能逆转1个id。
二、遇到的困难
暂时没有
三、明天要做的事情
任务八第一页写完
四、收获
学会了导航栏的引用，还有标签的优先级 各自权重的不同
返回列表
评论