学习笔记_css初级篇-基础选择器

浏览器内核：

CSS

cascading style sheet

1.行间样式，权重1000

直接在标签中加入style=””

2.页面级css,权重100

在<head>中加入<style> </style>标签，在其中写css样式

3.外部css文件引入

在<head>中加入<link>单标签，其中引入css路径

1、ID选择器权重100

在标签中加入id=””可以使用id选择器，在css中以#开头，

id选择器具有唯一性，如

<!-- 在html文件中 -->
<div id="only">这是一个id选择器</div>

<!-- css文件中 -->
#only {
background-color:green;
}

2、class选择器权重10

在标签中加入class=””可以使用class选择器,在css中以”.”开头,

class和id选择器区别是id只能引用一次，class可以被其他标签引用，甚至一个标签也可以引用多个class选择器只需要在class=”value”空格”value”即可，如

<!-- 在html文件中 -->
<div class="demo">这是一个class选择器</div>

<!-- css文件中 -->
.demo {
background-color:green;
}

3、标签选择器权重1

在css中直接使用对应的标签开头，标签选择器是全局使用的，套入很多层也是有效果的

<!-- 在html文件中 -->
<div>这是一个标签选择器</div>

<!-- css文件中 -->
div {
background-color:green;
}

4、通配符选择器权重0

在css中以”*”开头，选择所有标签

<!-- 在html文件中 -->
<div>这是一个通配符选择器</div>

<!-- css文件中 -->
* {
background-color:green;
}

5、属性选择器权重10

在css中以”[ ]”开头，[ ]中填入属性名，如id、class等等

<!-- 在html文件中 -->
<div id="only">这是一个属性选择器</div>

<!-- css文件中 -->
[id] {
background-color:green;
}

如果想更细一点可以把属性写全，如

<!-- 在html文件中 -->
<div id="only">这是一个属性选择器</div>

<!-- css文件中 -->
[id="only"] {
background-color:green;
}

权重之间的数是256进制

!important > 行间样式 > id > class|属性|伪类 >标签|伪元素 > 通配符

infinity 1000 100 10 1 0

Andrew's Web