|
本章咱们给大众讲解一下什么是css选取器？css3中5种平常的基本选取器。有必定的参考价值，有必须的伴侣能够参考一下，期盼对你有所帮忙。
一：什么是css选取器？
CSS是一种用于屏幕上渲染html，xml等一种语言，CSS重点是在相应的元素中应用样式，来渲染相对应用的元素，那样这般咱们选取相应的元素就很要紧了，怎样选取对应的元素，此时就必须咱们所说的选取器。在 CSS 中，选取器是一种模式，用于选取必须添加样式的元素。选取器重点是用来确定html的树形结构中的DOM元素节点。
二：css3中5种平常的基本选取器
css3中的选取器种类有非常多，下面介绍的是5种平常的基本选取器：通配选取器，类选取器，元素选取器， ID选取器和群组选取器。
1.通配符选取器（所有浏览器支持） 通用选取器用*来暗示，用来选取所有元素，，亦能够选取某个元素下的所有元素；
*{marigin: 0;
padding: 0;
font-size: 14px;
}
上面代码大众在reset样式文件中看到的肯定不少，他所暗示的是，所有元素的margin和padding都设置为0，字体体积都设置为14px,另一一种便是选取某个元素下的所有元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符 选取器</title>
<style>
.demo * {
width: 50px;
height: 50px;
border:1px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
<div>1</div>
<p>2</p>
<span>3</span>
</div>
</body>
</html> 效果图：
咱们能够看到在demo元素里的三个子元素div，p，span都是分别无设置css样式的，但只要咱们设置了demo元素下的所有元素的统同样式，那样demo元素里的三个子元素div，p，span就会显现样式。
2.类选取器 （所有浏览器都支持类选取器，但多类选取器（.className1.className2）不被ie6支持。）
类选取器按照类名来选取，前面以”.”来标志，是以一独立于文档元素的方式来指定样式，运用类选取器之前必须在html元素上定义类名，换句话说必须保准类名在html标记中存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类 选取器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #2DC4CB;
}
</style>
</head>
<body>
<div class="demo">类 选取器</div>
</body>
</html> 效果图：
| 
发表于 2024-6-30 11:04:19
