This article focuses on
- CSS inheritance of
- CSS stack of
- Calculate the weight
- Large sum weight problem
- Summary of the conflict of CSS style sheets
- Weight problems in depth
- With a label carrying the name of more than one class
- ! Important marker
CSS inheritance of
We attribute the increase to the red div tag, but found that, in each sub-div tag <p>has increased red property. So we get to this conclusion:
There are some attributes, when to set up their own, their offspring inherit on, this is the inheritance.
Inheritance is a start from their own, down to the smallest elements.
We div to add a border, but found only a div with a border property, but did not border p tag attributes. So we can conclude that:
-
About attribute text style, it has inherited. These attributes include: beginning font- color, beginning with text-, at the beginning of the line-.
-
Properties on the box, positioning, layout, can not be inherited.
Later when we talk about what css properties, we must first think of inheritance. And, you know what properties are inherited, which no property inheritance.
CSS stack of
Laminate: the weights are calculated
Laminating properties: css is the ability to deal with conflict. All the weight calculation, without any compatibility problems!
Three choices also increases the color to a P-tag attributes, however, the final text is displayed blue, at this time, there have been cases of laminate.
When multiple choice, select on an element of time, according to the statistical weights following order :
- id selector
- Class selectors, attribute selectors, pseudo class selector
- Tag selector, the dummy selector elements
Since the same manner as the style sheet which priority selector for sorting: ID selector> class selector> tag selector
For the above sentence, we are going to give some complicated example.
Examples of laminate
Example 1: calculate the weight
As shown above, the number of statistics of the respective selectors, high priority wins. The text color is red.
Example 2: The same weight
The figure can be seen, the first pattern and a second weight pattern the same weight. However, the writing order by the second pattern, the second pattern therefore prevail (principle of proximity).
Example 3: A practical example of
现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
如果写成下面这种代码是无法实现的：
无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。
正确的做法是：（非常重要）
上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：所有人当中，让某一个人为红，让其他所有人为蓝。
这种方式好用是好用，但用好很难。
就拿上方代码来举例，为了达到这种效果，即为了防止权重不够，比较稳妥的做法是：把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。
举例4：继承性造成的影响
如果不能直接选中某个元素，而是通过继承性影响的话，那么权重是0。
为了验证上面这句话，我们来看看下面这样的例子：
另外：如果大家的权重相同，那么就采用就近原则：谁描述的近，听谁的。举例如下：(box3 描述得最近，所以采用 box3 的属性)
上图，因为没有选中p，所以权重为0.
层叠性：权重计算的问题大总结（非常重要）
层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
通过列举上面几个例子，我们对权重问题做一个总结。
上面这个图非常重要，我们针对这个图做一个文字描述：
- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
CSS样式表的冲突的总结