CSS是对样式的修饰,权重表率着某种级别,权重决定了你css规则怎么样被浏览器解析直到生效,css权重关系到你的css规则是怎么样表示的。怎样学习,理论+案例代码。
初步认识:CSS选取器便是按照区别需求把区别的标签选出来,设置相应的样式
案例
h1{
color:blue;
font-size:15px;
}
以上h1标签选取器,做了两件事:
1.找到所有的h1标签(选取对象)
2.设置这些标签的样式:字体颜色为蓝色,字体体积为15px(设置样式)
diveng
南通大学 工学硕士
11251 次赞同
去咨询
CSS选取器功效:CSS便是为了给HTML页面添加样式,CSS设置样式是经过CSS选取器进行掌控,CSS选取器便是用于指向必须CSS功效的标签,让CSS样式晓得自己必须功效到哪个标签上去。
CSS的选取器分为两大类:基本选取器和扩展(高级)选取器。
基本选取器
标签选取器:针对一类标签
ID选取器:针对某一个特定的标签运用
类选取器:针对你想要的所有标签运用
通用选取器(通配符):针对所有的标签都适用(不意见运用)
高级选取器
后代选取器:用空格隔开
子代选取器:用>隔开
交集选取器:用.隔开
并集选取器(分组选取器):用逗号隔开
伪类选取器:常用的是:hover
仔细讲解
基本选取器以及CSS权重的关联内容见下面的链接,重点讲一下高级选取器
选取器权重用4位数暗示
1.后代选取器(包括选取器)
(1)语法格式:父元素 后代元素{属性:属性值;属性:属性值;}
(2)运用场景:当咱们必须把父元素下所有后代某种元素样式统1、设置为同样的时候
(3)为何要运用后代选取器而不消class选取器呢?
咱们此刻必须将一个类名为diveng的div下所有的p标签所有设置为蓝色,此时候咱们给所有的p标签(1个,2个,还能处理,还有可能是100个.......,即使咱们在vscode中运用ctrl+d的方式进行快捷设置,亦不美观)添加class是非常麻烦的,然则用后代选取器避免这些麻烦与问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.diveng p{color:blue;}
</style>
</head>
<body>
<div class="diveng">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
2.子代选取器
(1)语法格式:父元素>子元素{属性:属性值;}
(2)运用场景:当咱们必须把段落1、2、5的文字改成红色,加粗时。倘若运用包括选取器,就会把段落3、4一块改变,此时就必须运用子代选取器
<!DOCTYPE html>
<html lang="
|