一、基本选择器：
- 标签选择器，格式：
p(标签名){
属性:属性值;
}
- ID选择器（获取的是ID属性），格式：
.a(id){
属性:属性值;
}
- 类选择器 （class属性），格式：
.three(class){
属性:属性值;
}
- 通用选择器（通配符），格式：
*{
属性:属性值;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:rgb(9, 25, 245);
}
/* div{
color:rgb(235, 196, 255);
}
*/
#d{
color:rgb(237, 72, 12);
}
.three{
color:blueviolet;
}
*{
color:aquamarine;
}
</style>
</head>
<body>
<p id="e" class="two">
嗨咯
</p>
<div id="one" class="two">
嗨咯
</div>
<div id="a" class="two">
嗨咯
</div>
<div id="d" class="three">
嗨咯
</div>
</body>
</html>
二、 包含选择
- 子代选择器（获取所写标签的第一级子标签）,格式：
div.list>ul{
属性:属性值;
...
}
- 后代选择器（获取所写标签里面所有的子标签），格式：
list li{
属性:属性值;
...
}
- 逗号选择器，可同时对id、标签、类进行设置，用逗号隔开，格式：
.one,.two,#three{
属性:属性值;
...
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div.list>ul{
border: 1px solid rgb(255, 247, 0);
}
.list li{
border: 1px solid rgb(0, 255, 60);
}
.one,.two{
color: rgba(12, 237, 245, 0.763);
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="one">div1</div>
<div class="two">div2</div>
<p id="three">段落标签</p>
<div class="list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
3124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
