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

前言

你知道CSS的冲突规则吗？

查缺补漏

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

伪元素

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

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

CSS引入方式

行内，style属性

<element style="atter=value"></element>

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

内嵌，style标签

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

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

外部，link标签

<link rel="stylesheet" type="text/css" href="style.css" />

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

CSS冲突规则

层叠顺序

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

<!--请问Hello World最后会展示啥颜色？-->
<div class="a b c">Hello World</div>
<style>
	.a {
    
		color: red