标签（空格分隔）： 标签选择器
选择器定义：
在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。选择器为样式规则指定一个作用范围。
基础选择器包含：
1.标签选择器
2.类选择器
3.ID选择器
4.通用选择器
标签选择器：
顾名思义通过标签名来选择元素；
例如：
p { ?color: red;}将所有的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;*/ ???????????/*font-size:20px;*/ ???????????????/*}*/ ???????body{ ???????????color: gray; ???????????font-size: 12px; ???????} ???</style></head><body><!--css选择器1.标签选择器： ???????标签选择器，可以选中所有的标签，比如div,ul,li,p等等； ???????不管标签的藏得多深，都能选中； ???????选中的是所有的，不是某一个，所以说这个标签选择器选中的是"共性"的属性，而不是"特性"--> ???<div> ???????<p>我是一个段落</p> ???????<ul> ???????????<li> ???????????????<span> ???????????????????想想吧！！！ ???????????????</span> ???????????</li> ???????</ul> ???</div> ???<div> ???????<div> ???????????<div> ???????????????<div> ???????????????????<p> ???????????????????????藏得深的段落 ???????????????????</p> ???????????????</div> ???????????</div> ???????</div> ???</div></body></html>id选择器：
通过元素的ID值选择元素：
例如：
#i1 { ?color: red;}将id值为i1的元素字体颜色设置为红色。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css的选择器</title> ???<style type="text/css"> ???????/*id选择器*/ ???????#box{ ???????????color: green; ???????} ???????#s1{ ???????????color: red; ???????} ???????#s2{ ???????????color: red; ???????????font-size:16px; ???????} ???</style></head><body><!--css选择器1.标签选择器： ???????标签选择器，可以选中所有的标签，比如div,ul,li,p等等； ???????不管标签的藏得多深，都能选中； ???????选中的是所有的，不是某一个，所以说这个标签选择器选中的是"共性"的属性，而不是"特性"2.id 选择器： ???#选中id ???同一个页面中id不能重复， ???是不是所有的标签都可以加标签呢？任何的标签都可以设置ID，但是ID的命名一定要规范，字母开头后边可以数字，下划线等等；--> ???<div> ???????<p>我是一个段落</p> ???????<ul> ???????????<li> ???????????????<span> ???????????????????想想吧！！！ ???????????????</span> ???????????</li> ???????</ul> ???</div> ???<div> ???????<div> ???????????<div> ???????????????<div> ???????????????????<p> ???????????????????????藏得深的段落 ???????????????????</p> ???????????????</div> ???????????</div> ???????</div> ???</div> ???<div id="box"> ???????<span id="s1">123</span> ???????<span id="s2">234</span> ???</div></body></html>类选择器：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css的选择器</title> ???<style type="text/css"> ???????/*id选择器*/ ???????#box{ ???????????color: green; ???????} ???????#s1{ ???????????color: red; ???????} ???????#s2{ ???????????color: red; ???????????font-size:16px; ???????} ???????.titile{ ???????????color: yellowgreen; ???????????font-size: 12px; ???????} ???????.aaaa{ ???????????color: red; ???????} ???</style></head><body><!--css选择器1.标签选择器： ???????标签选择器，可以选中所有的标签，比如div,ul,li,p等等； ???????不管标签的藏得多深，都能选中； ???????选中的是所有的，不是某一个，所以说这个标签选择器选中的是"共性"的属性，而不是"特性"2.id 选择器： ???#选中id ???同一个页面中id不能重复， ???是不是所有的标签都可以加标签呢？任何的标签都可以设置ID，但是ID的命名一定要规范，字母开头后边可以数字，下划线等等；3.类选择器： ???所谓类：.，class 与id非常的相似，可以作用任何标签， ???但是id特性是唯一，但是类是可以重复的，叫做归类； ???同一个标签中可以携带多个类；多个类之间用空格隔开；--> ???<div> ???????<p>我是一个段落</p> ???????<ul> ???????????<li> ???????????????<span> ???????????????????想想吧！！！ ???????????????</span> ???????????</li> ???????</ul> ???</div> ???<div> ???????<div> ???????????<div> ???????????????<div> ???????????????????<p> ???????????????????????藏得深的段落 ???????????????????</p> ???????????????</div> ???????????</div> ???????</div> ???</div> ???<div id="box"> ???????<span id="s1">123</span> ???????<span id="s2">234</span> ???</div> ???<div> ???????<h3 id="h" class="titile xiaoma egon aaaa">woshi yige sanji bieti </h3> ???????<h3 class="titile">woshi yige sanji bieti </h3> ???????<h3 class="titile">woshi yige sanji bieti </h3> ???????<h3>woshi yige sanji bieti </h3> ???????<h3>woshi yige sanji bieti </h3> ???????<h3>woshi yige sanji bieti </h3> ???</div></body></html>类选择器：具体的可以查看代码注释里面；
如何正确的使用类选择器及总结：
需求：
段落1：40px,绿色
段落2：绿色，下划线
段落3：下划线，40px
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>练习</title> ???<style> ???????.lv{ ???????????color: green; ???????????font-size: 40px ???????; ???????} ???????.l2{ ???????????text-decoration: underline; ???????????color: green; ???????} ???????.l3{ ???????????font-size: 40px; ???????????text-decoration: underline; ???????????????????} ???</style> ???<div> ???????<p class="lv">段落1</p> ???????<p class="l2">段落2</p> ???????<p class="l3">段落3</p> ???</div></head><body></body></html>方案2：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>练习</title> ???<style> ???????.lv{ ???????????color: green; ???????} ???????.un{ ???????????text-decoration: underline; ???????} ???????.big{ ???????????font-size: 40px; ???????} ???</style> ???<div> ???????<p class="lv big">段落1</p> ???????<p class="lv un">段落2</p> ???????<p class="un big">段落3</p> ???</div></head><body></body></html>总结：不要试图，用一个类的页面写完，这个标签要携带多个类共同设置样式，
2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用
- 总结：
到底是用id修改样式还是用class呢？
答案：尽可能的使用class，除非特殊的原因，ID是用来js，也就是说js是通过ID来获取到标签的，后边我们还会说的这个内容；在css中尽量不要用id，（一般的来说，css用class,js用ID，更像是一种约定）
css之标签选择器
原文地址：https://www.cnblogs.com/surewing/p/10312111.html