基本选择器
首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。
基础选择器包括：
- 标签选择器
- 类选择器
- ID选择器
- 通用选择器
标签选择器
通过标签名选择元素：
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等
不管标签藏的多深，都能选中
选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
/*标签选择器*/
p {
color:red;
font-size:20px;
}
span {
color:yellow;
}
</style>
</head>
<body>
<div>
<p>我是一个段落</p>
<ul>
<li>
<p>是的</p>
<span>
真的哦
</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>我是另外一个段落</p>
</div>
</div>
</div>
</div>
</body>
</html>
id选择器
# 选中id
同一个页面中id不能重复
任何标签都可以设置id
id命名规范：要以字母开头，可以有数字，下划线 ，区分大小写
<!--id选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
/*id选择器*/
#s1{
color:red;
}
#s2{
font-size:30px;
}
</style>
</head>
<body>
<div id="box">
<span id="s1">我是id选择器</span>
<span id="s2">我也是哦</span>
</div>
</body>
</html>
类选择器
- 所谓类就是class，class与id非常相似，任何的标签都可以加类，但是类是可以重复的
- 同一个标签中可以携带多个类，用空格隔开
- 一定要有”公共类“的概念
<!--类选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
/*类选择器*/
.title{
color:yellowgreen;
font-size: 12px;
}
.alex{
color:red;
}
.active{
color:yellow;
}
</style>
</head>
<body>
<div id="box2">
<h3 id="h" class="title mike tom alex">我是一个三级标题</h3>
<h3>我是一个三级标题</h3>
<h3 class="title">我是一个三级标题</h3>
<h3>我是一个三级标题</h3>
<h3>我是一个三级标题</h3>
</div>
</body>
</html>
总结：
- 不要去试图用一个类将我们的页面写完，这个标签携带多个类，共同设置样式
- 每个类要尽可能的小，有公共的概念，能够让更多的标签使用
- 到底使用id还是用class？尽可能的用class，除非一些特殊情况可以用id
原因：id一般是用在js的，也就是说js是通过id来获取到标签
通用选择器
使用*选择所有元素：
* {
color:black;
}
小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小练习</title>
<style type="text/css">
.lv{
color:green;
}
.big{
font-size:40px;
}
.line{
text-decoration:underline;
}
</style>
</head>
<body>
<!--公共类 共有的属性-->
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
</body>
</html>