css选择器简介及优先级

本文作者依旧用大白话来解释

css样式单

文件后缀名:  .css

作用：控制网页内容的外观（形象点表述相当于为建好的毛胚房装修）

使用：css常见四种基本用法

1. 链接外部样式文件（建议使用）
2. 导入外部样式文件（不推荐使用）
3. 使用内部样式文件
4. 使用行内样式文件

链接外部样式写法

下面就是代表链接到与网页同一目录下的一个css文件夹中名叫 b的css文件

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

导入外部样式写法

代码含义与上面相同

注意 ： 按照规范，style要写在head中

<style type="text/css">
    @import "css/b.css"
</style>

使用内部样式文件

下面代表为页面内所有li元素设置边框粗细为1像素，实线，边框颜色为黑

<style type="text/css">
		li {
			border: 1px solid black;
		}

	</style>

使用行内样式文件

下面代表了对本div块修饰，使背景颜色为蓝色

<div style ="background-color : blue;"></div>

四种基本用法的优先级（即同时出现时显示谁的属性）如下

行内样式 > 内部样式> 链接外部样式 > 导入外部样式

之后我们来说说在同一样式单同级别下的优先级（常见）

根据id选择（ID选择器）>根据class选择（类选择器）>根据标签类型选择（元素选择器）>通配符（*）

 有了同级别，自然有不同级别

比如下面代码

#a{
    background-color: yellow;
}

div>.b{
    background-color: blue;
}

虽然a是根据ID选择，b是根据class选择，但是b明确了是在div的子元素才能使用，也就是说找到了它的父亲，因此b的优先级更高，同理div>p> li{}哪怕是元素选择器，它的优先级也比a和b 高

希望这篇文章能够帮到大家，如果我的文章有问题，欢迎批评指正。如果您还有哪里不理解，也欢迎留言，我们 一起讨论学习