一、标签选择器
直接通过标签名选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1{
color:chartreuse;
}
</style>
</head>
<body>
<h1>我是一个标题</h1>
</body>
</html>
二、类选择器
类选择器：通过元素的class属性选择（推荐使用的方式）.class属性值；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.mycls{
color: aqua;
}
</style>
</head>
<body>
<h1 class="mycls">我是一个标题</h1>
</body>
</html>
一个元素可以设置多个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.fontB{
font-weight: bold;
}
.red{
color: tomato;
}
.f18{
font-size: 38px;
}
</style>
</head>
<body>
<span class="fontB red f18">开心</span>
<div class="fontB">快乐</div>
</body>
</html>
三、id选择器
#id值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#myid{
color: honeydew;
}
</style>
</head>
<body>
<h1 id="myid">我是一个标题</h1>
</body>
</html>
四、属性选择器
通过标签+属性进行选择元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a[name]{
color: green;
}
</style>
</head>
<body>
<a href="" name="nb">11</a>
</body>
</html>
五、层级选择器
先选中父元素，再选中子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.menu div p{
color : brown;
}
</style>
</head>
<body>
<p>a</p>
<div class="menu">
<p>b</p>
<div>
<p>p标签</p>
</div>
</div>
</body>
</html>
六、组选择器
（使用多种选择器）选择多个元素，设置相同的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box,.name,.study{
font-weight: 600;
color: #008000;
}
</style>
</head>
<body>
<div class="box">111</div>
<div class="name">222</div>
<div class="study">333</div>
</body>
</html>
