先看下下面的例子
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><div style="background-color:#2459a2;height:24px;"> ???欢迎来到京东商城</div></body></html>
在标签上设置style属性：
background-color:#2459a2
height:24px
color可以参照RGB颜色对照表，一种码对应一种颜色
当然我们也可以不在body里面写，因为方便模板重用，我们可以把style模板放到head里面
页面效果如下：
（1）id选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????#i1{ ???????background-color:#2459a2; ???????height:24px; ???????} ???????#i2{ ???????background-color:#2459a2; ???????height:24px; ???????} ???</style></head><body><div id="i1"> ???欢迎来到京东商城</div><div id="i2"> ???欢迎来到淘宝</div></body></html>id选择器了解一下，虽然我们可以通过id把模板和内容联系起来，但是id原则上需要唯一值，这就给代码的重复利用带来了困难。
（2） 类选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????background-color:#2459a2; ???????height:24px; ???</style></head><body><div class="c1"> ???欢迎来到京东商城</div><div class="c1"> ???欢迎来到淘宝</div></body></html>相对于id选择器，类选择器就很好的解决了模块需要重复利用的问题，既然id不可以重复，那class是可以重复的。这种选择器也最常用
（3）标签选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????div{ ???????background-color:#2459a2; ???????height:24px; ???</style></head><body><div> ???欢迎来到京东商城</div><span>欢迎来到好乐买</span>><div> ???欢迎来到淘宝</div></body></html>你也可以自定义div 模块格式，那后面所有用div标签的内容都会生效,而span不生效
（4）层级选择器（空格）
通过两个标签关联：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ??????span div{ ???????background-color:#2459a2; ???????height:24px; ???</style></head><body><div> ???欢迎来到京东商城</div><span>欢迎来到好乐买 ???<div>要啥自行车</div></span><div> ???欢迎来到淘宝</div></body></html>通过class和标签关联：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1 div{ ???????background-color:#2459a2; ???????height:24px; ???</style></head><body><div class="c1"> ???欢迎来到京东商城</div><span class="c1">欢迎来到好乐买 ???<div class="c1">要啥自行车</div></span><div class="c1"> ???欢迎来到淘宝</div></body></html>我们甚至可以关联多层，但不建议
（5）组合选择器（逗号）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????#i1,#i2{ ???????background-color:#2459a2; ???????height:24px; ???????} ???????????</style></head><body><div id="i1"> ???欢迎来到京东商城</div><div id="i2"> ???欢迎来到淘宝</div></body></html>还记得第（1）中id选择器的代码重复利用率低吗，我们可以通过逗号来把模板赋值给多个id，这样也可以降低代码重复的问题.
当然累选择器也是可以使用组合选择器的：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.i1,.i2{ ???????background-color:#2459a2; ???????height:24px; ???????} ???</style></head><body><div class="i1"> ???欢迎来到京东商城</div><div class="i2"> ???欢迎来到淘宝</div></body></html>（6）属性选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????input[type=‘text‘]{width:100px;height:200px;} ???</style></head><body><input type="text" /><input type="password" /></body></html>可以根据type字段来让我的模板生效，我们可以看到text生效了，但是password没有生效。
当然我们甚至可以自定义属性：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????input[n=‘xiaohong‘]{width:100px;height:200px;} ???</style></head><body><input type="text" n="xiaoming"/><input type="text" n="xiaohong"/><input type="password"/></body></html>n是我自定义的。
当然也可以结合类标签，把input变成.c1(类名)
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1[n=‘xiaohong‘]{width:100px;height:200px;} ???</style></head><body><input class="c1" ?type="text" n="xiaoming" /><input class="c1" ?type="text" n="xiaohong" /><input class="c1" type="password"/></body></html>可以看到生效的就只有xiaohong
css选择器
原文地址：https://www.cnblogs.com/brownyangyang/p/9095862.html