CSS3 选择器
1、Id选择器：通过标签的Id属性值 --#id
元素的id属性值有且只有一个，不能出现两个标签都使用一个相同的id值，所以id选择器是精准、快速的选择元素
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#div1{width: 100px;height: 100px;background-color: red;}</style></head><body><div id="div1"></div></body></html>代码中我们的div元素设置了id属性，id值为‘div1’，通过<style>样式设置了div的宽100px、高100px、和背景颜色为红色
效果：
。
2、class 类选择器：通过标签class属性值选择元素 --.class
类选择器是针对多个标签要使用同一样式的,一个标签也可以使用多个类
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style> ???????????.divs{ ???????????????width: 100px; ???????????????height: 100px; ???????????????margin: 10px; ???????????????background-color: black; ???????????} ???????????.div1{ ???????????????border: 3px solid red; ???????????} ???????</style> ???</head> ???<body> ???????<div class="div1 divs"> ???????????????????</div> ???????<div class="divs"> ???????????????????</div> ???????<div class="divs"> ???????????????????</div> ???</body></html>代码中我们的3个div标签设置了class属性其属性是一样的。其中我们的第一个div应用了两个类，还可以用更多个类用空格符分开。
结果：
。
如果一个标签设置了多个类，类中的属性一样值不一样，我们如何知道它应用了那个值呢？
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style> ???????????.div1{ ???????????????width: 100px; ???????????????background-color: green; ???????????} ???????????.div2{ ???????????????height: 100px; ???????????????background-color: red; ???????????} ???????????.div3{ ???????????????background-color: yellow; ???????????} ???????</style> ???</head> ???<body> ???????<div class="div1 div2 div3"> ???????????????????</div> ???</body></html>上面代码中的div用了多个类，其中有每个类都有设置背景颜色
结果：
由结果可以知道应用了多个类：如果第一个类中有设置了该属性值，第二各类中也有，那么第二个类的属性值会覆盖掉第一个类的属性值。如果第二个类
里的属性是第一个类没有，那么该元素会添加该属性。
当然我们还可以这样：p.class{ background : red } --选取p标签应用了该类的标签，如果p标签没有应用该类，就不会被选中
p .class{ background:red } --p 与 .class 之间存在空格，选取p标签的子标签应用了该类的标签
3、标签选择器：通过标签名直接选择该元素
比如一个<div>标签，通过标签选择器，将会选择当前页面的所有div标签
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style> ???????????div{ ???????????????width: 100px; ???????????????height: 100px; ???????????????margin: 10px; ???????????????float: left; ???????????????background-color: green; ???????????} ???????</style> ???</head> ???<body> ???????<div></div> ???????<div></div> ???????<div></div> ???????<div></div> ???</body></html>结果：
。
4、伪类选择器
前面我们有id选择器，有class类选择器，标签选择器，当然还有伪类选择器，
伪类选择器用于某些选择器添加特性效果
a:link --选择没有被访问的链接
a:visited --选择被访问的链接
a:active --选择活动的链接
a:hover --选择鼠标指针在该链接上的链接
input:focus --获得焦点的input元素
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style> ???????????a:link{ /*没有被访问的元素*/ ???????????????color: green; ???????????} ???????????a:visited{/*被访问过的元素*/ ???????????????color: yellow; ???????????} ???????????a:active{/*活动的标签*/ ???????????????color:blue; ???????????} ???????????a:hover{/*鼠标位于上方的标签*/ ???????????????color: red; ???????????} ???????????input:focus{ ???????????????background: chocolate; ???????????} ???????</style> ???</head> ???<body> ???????<a href="#">Hello HTML</a></br> ???????<a href="#1">Hello CSS</a></br> ???????<a href="#2">Hello javaScript</a></br> ???????<a href="#3">Hello Web</a></br> ???????<input type="text" ?/> ???</body></html>结果：
当然伪类选择器还有很多。
5、组合选择器
元素组合：选取div标签同时选取了p标签 --用分号分开，可以多个
div,p{ ???????????????background:red; ???????????}元素后代选择器：选取div的后代所有p标签元素包括子代的子代，用空格符号分开
<style> ???????????div p{ ???????????????background:red; ???????????} </style>子元素选择器：选取div标签的子元素p标签，不包括子标签的子标签，用大于号分开
<style> ???????????div>p{ ???????????????background:red; ???????????}</style>兄弟选择器：选取与div同级并且紧追在div后面的p标签 ，用加号分开
<style> ???????????div+p{ ???????????????background:red; ???????????}</style>6、属性选择器
<style> ???div[class]{/*选取应用了class的div元素*/ ???????background:red; ???} ???div[class=‘divs‘]{/*选取了class属性值为‘divs’的元素*/ ???????background: green; ???} ???div[class~=‘div1‘]{/*当class具有多个值，其中一个值为div1的元素*/ ???????background: yellow; ???} ???div[class|=‘c‘]{/*匹配class属性其值以c开头的元素*/ ???????background: black; ???}</style>CSS选择器
原文地址：https://www.cnblogs.com/yangWanSheng/p/9419367.html