前端学习笔记--CSS篇(冲突规则)

前言

你知道CSS的冲突规则吗？

查缺补漏

上一篇选择器部分少了伪元素选择器，这一篇给补上

伪元素

伪元素开头为::
语法：::pseudo-element-name
选择器：

• ::after: 匹配出现在原有元素的实际内容之后的一个可样式化元素
• ::before: 匹配出现在原有元素的实际内容之前的一个可样式化元素
• ::first-letter: 匹配元素的第一个字母
• ::first-line: 匹配包含此伪元素的元素的第一行
• ::grammar-error: 匹配文档中包含了浏览器标记的语法错误的那部分
• ::selection: 匹配文档中被选择的那部分
• ::spelling-error: 匹配文档中包含了浏览器标记的拼写错误的那部分

CSS引入方式

行内，style属性

• 优点：书写方便，权重高
• 缺点：没有实现样式和结构的分离

内嵌，style标签

<style>
	selector {
      
		attr:value;
	}
style>	

• 优点：部分结构和样式分离
• 缺点：分离不彻底

外部，link标签

• 优点：完全结构和样式分离
• 缺点：需要引入

CSS冲突规则

层叠顺序

在开始之前先提个问题，这样可能更好理解。请看以下代码

<div class="a b c">Hello Worlddiv>
<style>
	.a {
      
		color: red;
	}
	.b {
      
		color: green;
	}
	.c {
      
		color: blue;
	}
style>

不知道大家有没有猜对，最后的结果是Hello World展示的是蓝色。为啥结果是这样呢？这就引出了层叠的规则。

层叠顺序规则: 与css的书写顺序有关，当应用两条同级别的规则到一个元素的时候，写在后面的规则就是实际使用的规则。

咋们可以验证一下这个规则，咋们把.a和.c互换一下顺序，看看会出现啥效果。

继承

我想大家如果在工作或者练习中写过h5，那么肯定知道有这么一种情况。在父元素上指定字体的颜色，子元素会继承这个颜色，咋们还是先看一下代码，理论说百遍不如代码看一遍

<div class="parent">
	<div class="child">Hello Worlddiv>
div>
<style>
.parent {
      
	color: red;
}
style>

我们可以看到结果是Hello World为红色，即子类继承了父类的颜色。当然并不是所有的属性都可以被继承，例如width，height就不能被继承。这里留一个问题有哪些属性能被继承，哪些不能被继承呢？
既然属性能被继承，那么我们能控制继承吗？回答是肯定的，CSS为继承提供了四个特殊的通用属性值。分别为以下四个值

• inherit: 开启继承，设置子元素属性值和父元素相同
• initial：设置属性值和浏览器默认样式相同
• unset：将属性重置为自然值，如果属性是自然继承那么就是inherit， 否则和inital一样
• revert: 和unset 类似，但是在某些元素的某些属性上还是有区别。比如h3标签的font-weight属性

举个例子

<div class="parent">
  <div class="c1">child1div>
  <div class="c2">child2div>
  <div class="c3">child3div>
  <div class="c4">child4div>
div>
	
<style>
	.parent {
      
	  color: aqua;
	}
	.c1 {
      
	  color: inherit;
	}
	.c2 {
      
	  color: initial;
	}
	.c3 {
      
	  color: unset;
	}
	.c4 {
      
	  color: revert;
	}
style>

以上代码效果如下

child1

child2

child3

child4

优先级

css的优先级计算本质上是不同类型的选择器有不同的分值，把这些分值相加就得到了特定选择器的权重，然后进行匹配。
一个选择器的优先级由四个部分相加得到

千位	百位	十位	个位
style	id选择器	类选择器、属性选择器和伪类	元素、伪元素选择器

举个例子

<div class="parent">
	<div class="child">
		<span id="content">Hellospan>
	div>
	<div>div>
div>
<style>
/*优先级为 0003*/
div > div span {
      
	color: red;
}
/*优先级为 0021*/
.parent .child span {
      
	color: red;
}
/*优先级为 0120*/
.parent div #content {
      
	color: red;
}
style>

以上优先级运算可以参照表格得到，通用选择器(*)、组合符(+ > ~ 空格)和否定伪类(:not())不会影响优先级。
有一个特殊属性可以影响上面所有的优先级计算，这个属性是!important。因为这个属性改变老了层叠的常规工作方式，会让CSS的调试变得非常困难，所以这个属性除了非常情况一般不建议使用。需要注意的覆盖!important唯一的办法就是另一个!important具有相同优先级而且顺序靠后，或者更高的优先级。