CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）

CSS选择器

HTML：定义网页元素

CSS：美化网页元素，控制HTML标签展示样式

CSS与HTML相结合，结合方式如下：

（1）内联样式：CSS代码复用性太低，书写凌乱，不推荐，缺点就是一次只能控制一个标签端的展示样式

（2）内部样式：配合选择器，进行标签的选择，进而对标签进行样式的控制。一次可以控制一个或多个标签的展示样式，复用性高一些。

（3）外部样式：将CSS代码抽取到一个单独的文件中，页面用来引即可，一次可以控制多个页面元素的展示样式，开发首选。

id选择器

id选择器一次只能选择一个标签。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/**选择器：就是选中一个或多个标签的一种语法*id选择器 一次只能选中一个标签*/#myh1 {color: #0000FF;font-size: 50px;}#myh2 {color: #FF00FF;font-size: 100px;}</style></head><body><!-- id是唯一的 多个标签的id值不要相同 --><h1 id="myh1">id选择器</h1><h2 id="myh2">id选择器222222</h2></body>
</html>

包含选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#d1 h1 span{color: #C71585;font-size: 20px;}#d2 h2 span{color: #FF0000;font-size: 20px;}h1{color: cyan;font-size: 15px;}</style></head><body><!-- span是行标签 p是块标签 --><div id="d1"><h1><span>陕西省</span></h1></div><div id="d2"><h2><span>西安市</span></h2></div><h1>长安区</h1><h1>子午大道</h1><h1>西安邮电大学</h1></body>
</html>

标签名选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 标签名选择器 一次可以选中多个标签 --><style type="text/css">h1{color: aquamarine;}font{font-size: 20px;}</style></head><body><h1>标签名选择器1</h1><h1>标签名选择器1</h1><h1>标签名选择器1</h1><h1>标签名选择器1</h1><h1>标签名选择器1</h1><h1>标签名选择器1</h1></body>
</html>

类选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 类选择器 一次可以选取多个标签进行控制 --><style type="text/css">/* 类选择器 一次可以选取多个标签进行控制 */.myclass1 {color: #FF00FF;font-size: 20px;}#h1 {color: #0000FF;font-size: 20px;}</style></head><body><h1 class="myclass1">类选择器1</h1><h1 class="myclass1">类选择器1</h1><h1 class="myclass1">类选择器1</h1><h1 class="myclass1">类选择器1</h1><h1 class="myclass1">类选择器1</h1><h1 id="h1" class="myclass1">类选择器2</h1></body>
</html>

属性选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* h1[align]{color: red;} */h1[align='center'] {color: red;}/* first-letter每个元素的第一个字母 */div::first-letter {color: #0000FF;font-size: 50px;}</style></head><body><h1 align="center">陕西省</h1><h2 align="right">西安市</h2><h1>长安区</h1><div id="">西安邮电大学长安校区西区</div></body>
</html>

通配符选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 全局通配 *//* {color: #0000FF} *//* 局部通配 */#d1>* {color: red;}</style></head><body><div id="">陕西省西安市</div><font size="" color="">长安区 雁塔区</font><div id="d1">陕西省西安市长安区<font size="" color="">西安邮电大学</font><h1>西安邮电大学</h1></div><h1>旭日苑餐厅</h1></body>
</html>

伪类选择器

伪类选择器最初是针对a标签的，伪类选择器就是选择状态的。

link：连接平常的状态。 active：连接被按下的状态。

visited：连接被访问过之后的状态。 hover：鼠标放到连接上的状态。

超链接标签有四种状态：

（1）链接状态。（2）鼠标悬浮状态。（3）鼠标按下状态。（4）链接访问过后的状态。

其中，鼠标悬浮状态鼠标按下状态这两种状态对于其他标签也是有用的。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">a:link {color: mediumvioletred;/* 线条的样式 none 不要线条  underlinex下划线 line-through 删除线 overline 上划线*/text-decoration: none;}a:hover {color: black;font-size: 50px;text-decoration: none;}a:active {color: red;font-size: 220px;text-decoration: none;}a:visited {color: blue;text-decoration: none;}</style></head><body><a href="http://www.baidu.com">进入百度</a>、<a href="http://www.baidu.com">进入百度</a></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div {height: 500px;width: 500px;background: #0000FF;}div:hover {height: 500px;width: 500px;background: #FF0000;}div:active {background: yellow;}</style></head><body><div id=""></div></body>
</html>

相邻选择器

相邻兄弟选择器：#d1:hover+div 兄弟选择器：#d1:hover~div

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#d1{height: 200px;width: 200px;background: red;}#d2{height: 200px;width: 200px;background: yellow;}/*+ 相邻兄弟选择器 *//* #d1:hover+div{background: olivedrab;} *//* ~兄弟选择器 */#d1:hover~div{background: palevioletred;}#d3{height: 200px;width: 200px;background: blue;}</style></head><body><div id="d1">陕西省陕西省</div><div id="d2">西安市西安市</div><div id="d3">雁塔区雁塔区</div></body>
</html>

选择器的优先级

多个选择器，选中了同一标签，控制的样式如果没有冲突，那就叠加生效。

如果说控制的样式之间有冲突时，根据选择器的优先级来，优先级高的选择器它的控制强度就比较大。

内联样式>id选择器>类选择器>标签名选择器

优先级的关系：内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/**多个选择器，选中了同一标签，控制的样式如果没有冲突，那就叠加生效如果说有冲突时：根据选择器的优先级来的，优先级高的选择器它的控制强度比较大内联样式>id选择器>类选择器>标签名选择器优先级关系：内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器*/#d1 {height: 200px;width: 500px;}.divclass {width: 200px;background: #0000FF;}div {background: red;}</style></head><body><div id="d1" class="divclass" style="background: #7FFF00;height: 500px;"></div></body>
</html>

子选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul>li{color: red;}#d1{color: greenyellow;}#sp{color: #FF0000;}#d2>div>#sp1{color: blue;}</style></head><body><div id="d1"><!-- 子标签没有单独去设置样式，会继承父标签的样式 --><span id="sp">陕西省</span></div><div id="d2"><div id="">西安市</div><div id=""><span>雁塔区，雁塔区</span></div><div id="">长安区，长安区</div><div id="">西安邮电大学<span id="sp1">西安邮电大学长安校区</span></div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#wai {height: 500px;width: 500px;background: #ADFF2F;}#nei {height: 250px;width: 250px;background: #C71585;}#wai:hover>#nei {background: aqua;}#wai1 {height: 600px;width: 600px;background: red;}#nei1 {height: 400px;width: 400px;background: #0000FF;}#nei2 {height: 200px;width: 200px;background: #555500;}#nei1:hover>#nei2 {background: #00FFFF;}#wai1>#nei1>#nei2 {background: #ffffff;}</style></head><body><div id="wai"><div id="nei"></div></div><div id="wai1"><div id="nei1"><div id="nei2"></div></div></div></body>
</html>