Css3选择器

最新推荐文章于 2024-05-15 12:09:40 发布

HYuan-

最新推荐文章于 2024-05-15 12:09:40 发布

阅读量166

点赞数 3

文章标签： css3

本文链接：https://blog.csdn.net/m0_61685405/article/details/120401131

版权

css3中常见的基本选择器

css3中的选择器种类有很多，下面是4种常见的基本选择器：通配符选择器，类选择器，元素选择器， ID选择器。

1.通配符选择器
通配符选择器用*来表示，用来选择所有元素，

*{marigin: 0;
 padding: 0;
 font-size: 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>

2.类选择器

类选择器根据类名来选择，前面以”.”来标志，是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在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>

3.元素选择器
元素选择器（标签名选择器），是css3选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素，如body,p,div等，下面例子中选择了span元素。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>元素选择器</title>
 <style>
 .demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 }
 span{
 color: red;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <p>这里使用<span>元素选择器</span>改变了样式</p>
 </div>
 </body>
</html>

4.ID选择器

ID选择器和类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用"#"如(#demo)。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>ID选择器</title>
 <style>
 #demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 background: #FF0000;
 }
 
 </style>
 </head>
 <body>
 <div id="demo">ID选择器</div>
 </body>
</html>

HYuan-

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Css3选择器

css3中常见的基本选择器css3中的选择器种类有很多，下面是4种常见的基本选择器：通配符选择器，类选择器，元素选择器， ID选择器。1.通配符选择器通配符选择器用*来表示，用来选择所有元素，*{marigin: 0; padding: 0; font-size: 14px;}也可以选择某个元素下的所有元素；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <
复制链接

扫一扫