CSS中用到的选择器有4种:
- 元素选择器
- id选择器
- 类选择器
- 通配选择器
先来说第一种:元素选择器,根据标签名来选中指定的元素。
语法:标签名{}
例子:将“标题”和“段落”设置为红色。
<h1>我是标题</h1>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
代码演示:
<style>
h1{
color:red
}
p{
color:red
}
</style>
效果:
第二种:id选择器,根据元素的id属性选中一个元素。
语法:#id的属性值{}
例子:将“乡音无改鬓毛衰”设置为绿色,字体大小为50。
<h1>我是标题</h1>
<p>少小离家老大回</p>
<p id="p2">乡音无改鬓毛衰</p>
代码演示:
<style>
#p2{
color:green;
font-size:50px;
}
</style>
效果图:
第三种:类选择器,根据元素的class属性来选中一组元素。
语法:.class属性值{}
例子:将秋水...和落霞...设置为蓝色。
<h1>我是标题</h1>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
<p class="blue">秋水共长天一色</p>
<p class="blue">落霞与孤鹜齐飞</p>
代码演示:
<style>
.blue{
color: blue;
}
</style>
效果图:
第四种:通配选择器,选中页面种所有的元素。
语法:*{}
例子:当使用通配选择器时,所有的元素都会变为橙色。
<h1>我是标题</h1>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
代码演示:
<style>
*{
color:orange;
}
</style>
效果图:
总结:以上就是4种常用的选择器,大家根据自己需求来进行选择。
如果觉得我的文章有帮助到你,希望给个关注个赞,谢谢!