一、前端基础-css-css的选择器之基础选择器
原创
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: red;
}
h1{
background-color: yellow;
}
#i1{
background-color: blue;
}
.c1{
background-color: green;
}
</style>
</head>
<body>
<!-- 基础选择器
1、通用选择器：*，匹配所有标签，所有标签样式都收影响。
2、标签选择器：根据标签选择，指定标签受影响。
3、id选择器：根据标签id属性选择，指定id样式受影响，其他id不变。
4、class选择器：根据标签class属性选择，指定class样式受影响，其他class不变。
-->
<!-- 基础选择器之通用选择器
1、在head中添加样式（演示方便，可以使用link）
2、匹配所有标签，所有标签的样式都会受到影响
-->
<p>基础选择器之通用选择器</p>
<div>基础选择器之通用选择器</div>
<!--基础选择器之标签选择器
1、在head中添加样式（演示方便，可以使用link）
2、根据标签选择，指定标签样式受影响（h1），其他不变(h2)。
-->
<h1>基础选择器之标签选择器</h1>
<h2>基础选择器之标签选择器</h2>
<!--基础选择器之id选择器
1、在head中添加样式（演示方便，可以使用link）
2、在标签中添加id属性，id属性是唯一
3、根据标签id属性选择，指定id属性样式受影响，其他不变。
-->
<h2 id="i1">基础选择器之id选择器</h2>
<h2>基础选择器之id选择器</h2>
<!--基础选择器之class选择器
1、在head中添加样式（演示方便，可以使用link）
2、在标签中添加class属性，class属性可以有多个成员
3、根据标签class属性选择，指定class属性样式受影响，其他不变。
-->
<h2 class="c1">基础选择器之class选择器</h2>
<div class="c1">基础选择器之类class选择器</div>
<h2>基础选择器之class选择器</h2>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
