选择器
- 元素（标签）选择器
组合选择器: h1,p{color:red}
- 结合标签选择器
h1.xiaodi {color:red;}
- 多类选择器
class="xiaodi background"
- 链接多个类选择器
.xiaodi.background{color:red; background-color:black}
- id选择器
声明：#important{}
属性：id="important
注意：⼀个id选择器的属性值在html⽂档中只能出现⼀次，避免写js获取id时出现混淆
-
通配符选择器*
-
后代选择器
h1 p{color:red;}
- ⼦元素选择器
div>span{font-size:900}
- 相邻选择器（兄弟）
h1+p{background-color:pink;}
- 代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div,p,h1{
color: red;
} */
/* p.xiaodi{
color: yellow;
} */
/* .background.xiaodi{
color: red;
background-color: black;
} */
/* #xiaodi{
color: red;
} */
/* * {
margin: 0;
padding: 0;
} */
/* h1 p{
color:green
} */
/* h1>p {
color: red;
} */
li+li{
color: red;
}
</style>
</head>
<body>
<!-- <div>小滴课堂</div>
<p>有很多的课程</p>
<h1>前端</h1> -->
<!-- <p class="xiaodi">有很多的课程</p> -->
<!-- <div id="xiaodi">小滴课堂</div> -->
<!-- <div>小滴课堂</div> -->
<!-- <h1>
<p>
<p>小滴课堂</p>
</p>
</h1> -->
<!-- <h1>
<p>
<p>小滴课程</p>
</p>
</h1>
<p>有很多的课程</p> -->
<ul>
<li>前端</li>
<li>后端</li>
<li>测试</li>
</ul>
<ol>
<li>电脑</li>
<li>键盘</li>
<li>鼠标</li>
</ol>
</body>
</html>
