css基础选择器和优先级

最新推荐文章于 2022-08-26 10:35:48 发布

刘小航9527

最新推荐文章于 2022-08-26 10:35:48 发布

阅读量3.5k

点赞数 3

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_40594554/article/details/84669356

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css基础选择器
HTML是我们学习的框架，css是我们网页的样式，下面我会慢慢了解css等相关组成。
在开始介绍之前，我先给出具体的相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css基础</title>
    <link rel="stylesheet"  type="text/css" href="my.css">
</head>
<body>
<!--选择器-->
<!--1.id选择器-->
<div id="color">123</div>
<div id="color_1">456</div>
<!--2.class选择器-->
<div class="demo">789</div>
<div class="demo">753</div>
<div class="demo demo1">159</div>
<!--3.标签选择器-->
<p>456789</p>
<p>456789</p>
<span>123</span>
<div>
    <span>456789</span>
</div>
<!--4.通配符-->
<!--以*号为开始在css文件里创建，*{
<!--优先级比较：行间样式>id>class>标签选择器>通配符-->
}-->
<!--5.属性选择器-->
<div id="id" class="demo">123456</div>
<div id="id_1" >123456</div>
<!--优先级比较：属性选择器：class>id-->
<!--权重：
！import      正无穷
行间样式      1000
id            100
class         10
标签          1
通配符        0    -->
</body>
</html>

这是本次学习的相关内容：
1.id选择器
id选择器中：我们在css文件中，采用
#xxx{

}
来更改相关样式
2.class选择器
class选择器中：我们采用
.xxx{

}
3.标签选择器
标签选择器中：采用标签直接控制其样式：
xxx（标签）{

}
4.通配符
通配符即为所有格式的全局控制：
*{

}
5.属性选择器
属性选择器：
[xxx(属性名)]{

}
属性选择器将会把所有属性为xxx的样式更改。

优先级比较：
优先级比较：！import>行间样式>id>class>标签选择器>通配符
优先级关乎着其控制样式，及其重要：下面我给出其权重：
权重：
！import ：正无穷
行间样式： 1000
id ： 100
class ： 10
标签： 1
通配符： 0
这样就能看的明白了,css基础选择器较为简单。
只是控制的一些相关基础手段。
后面会慢慢加深。