51工具盒子高级选择器
1.层次选择器分类
E F == 后代选择器 //选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F == 子选择器 //选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F == 相邻兄弟选择器 //选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F == 通用兄弟选择器 //选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
1.1后代选择器后代选择器，就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素（如"孙元素"）
语法：
选择器1 选择器2{
属性1 : 取值1;
}
说明：选择器1(父)和选择器2(后代)必须要用空格隔开，从而表示选中某个元素内部的后代元素
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>后代选择器</title>
<style type="text/css">
#p1{
color:red;
}
</style>
</head>
<body>
<p id="p1">
<span>p1的后代span</span><br/>
<font>p1的后代font</font>
</p>
<p id="p2">
<span>p2的后代span</span><br/>
<span>p2的后代span</span>
</p>
</body>
</html>
说明： p1 span {color:red;}表示选择"id为p1的元素"下的所有span元素，然后定义它们的文本颜色为红色
1.2子选择器子选择器，就是选择元素内部中的某一种子元素。
语法：
选择器1>选择器2{
属性1 : 取值1;
}
说明：选择器1(父)和选择器2(子)必须要用">"隔开，从而表示选中某个元素内部的子元素 案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>子选择器</title>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>学习 <strong>让我</strong> <strong>感到</strong>快乐</h1>
<h1>学习 <em>真的 <strong>非常</strong></em>有意思</h1>
</body>
</html>
1.3相邻兄弟选择器
相邻兄弟选择器是选中元素后的第一个兄弟元素（必须为相邻）
语法：
选择器1+选择器2{
属性1 : 取值1;
}
说明：选择紧接在"选择器1"元素后出现的"选择器2"，选择器1 和 选择器2 元素拥有共同的父元素"
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>相邻兄弟选择器</title>
<style>
h1+p{
color: red;
}
</style>
</head>
<body>
<h1>我是H1标签</h1>
<p>我是第一个P标签</p>
<p>我是第二个P标签</p>
<p>我是第一个P标签</p>
<p>我是第一个P标签</p>
<p>我是第一个P标签</p>
</body>
</html>
1.4通用兄弟选择器通用兄弟选择器就是是选中元素后的所有兄弟元素（不须为相邻）
语法：
选择器1~选择器2{
属性1 : 取值1;
}
说明：选择在"选择器1"元素后出现的所有"选择器2"，选择器1 和 选择器2 元素拥有共同的父元素"
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>通用兄弟选择器</title>
<style>
h1~p{
color: red;
}
</style>
</head>
<body>
<h1>我是H1标签</h1>
<p>我是第一个P标签</p>
<p>我是第二个P标签</p>
<p>我是第一个P标签</p>
<p>我是第一个P标签</p>
<p>我是第一个P标签</p>
</body>
</html>
2.伪类选择器
2.1超链接伪类使用"超链接伪类"来定义超链接在鼠标点击的不同时期的样式。
a:link == 定义a元素未访问时的样式
a:visited == 定义a元素访问后的样式
a:hover == 定义鼠标经过a元素时的样式(重点记忆)
a:active == 定义鼠标点击激活时的样式
语法：
a:link{...}
a:visited{...}
a:hover{...}
a:active{...}
定义4个伪类，必须按照"link、visited、hover、active"的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a{text-decoration:none;}
a:link{color:black;}
a:visited{color:purple;}
a:hover{color:yellow;}
a:active{color:blue;}
</style>
</head>
<body>
<a href="www.baidu.com" target="_blank">去百度</a>
</body>
</html>
2.2子元素伪类选择器子元素伪类选择器，指的就是选择某一个元素下的子元素。
在CSS3中，子元素伪类选择器有两大类。
第一类：
E:first-child == 选择父元素下的第一个子元素（该子元素类型为E，以下类同）
E:last-child == 选择父元素下的最后一个子元素
E:nth-child(n) == 选择父元素下的第n个子元素或奇偶元素，n取值有3种：数字、odd和even，其中n从1开始
E:only-child == 选择父元素下唯一的子元素，该父元素只有一个子元素
第二类：
E:first-of-type == 选择父元素下的第一个E类型的子元素
E:last-of-type == 选择父元素下的最后一个E类型的子元素
E:nth-of-type(n) == 选择父元素下的第n个E类型的子元素或奇偶元素，n取值有3种：数字，odd和even，n从1开始
E:only-of-type == 选择父元素下唯一的E类型的子元素，该父元素可以有多个子元素
案例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素伪类选择器一</title>
<style>
ul li:first-child{
color: red;
}
ul li:nth-child(2){
color: yellow;
}
ul li:nth-child(3){
color: blue;
}
ul li:nth-child(4){
color: green;
}
ul li:last-child{
color: pink;
}
</style>
</head>
<body>
<ul>
<li>scratch</li>
<li>java</li>
<li>html</li>
<li>sql</li>
<li>javascript</li>
</ul>
</body>
</html>
说明： ul li:first-child{}"表示选择父元素（即ul）下的第一个子元素，这句代码等价于"ul li:nth-child(1){}","ul li:last-child{}"表示选择父元素（即ul）下的最后一个子元素，这句代码等价于"ul li:nth-child(5){}"
案例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素伪类选择器</title>
<style>
td{
}
tr:nth-child(odd){
background-color: pink;
}
tr:nth-child(even){
background-color: gray;
}
</style>
</head>
<body>
<table border="1" width="300" height="200">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
说明：odd选择奇数 even选择偶数
3.属性选择器3.属性选择器
属性选择器，指的是通过"元素的属性"来选择元素的一种方式。元素的属性，我们都知道是什么，像下面这句代码中的id、type、value就是input元素的属性
<input id="btn" type="button" value="按钮" />
E[attr^="xxx"] == 选择元素E，其中E元素的attr属性是以xxx开头的任何字符
E[attr$="xxx"] == 选择元素E，其中E元素的attr属性是以xxx结尾的任何字符
E[attr*="xxx"] == 选择元素E，其中E元素的attr属性是包含xxx的任何字符
案例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
span[class]{
color: red;
}
</style>
</head>
<body>
<span class="sp1">java</span>
<span>html</span>
<span class="sp2">javascript</span>
</body>
</html>
案例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
span[class='sp1']{
color: red;
}
</style>
</head>
<body>
<span class="sp1">java</span>
<span>html</span>
<span class="sp2">javascript</span>
</body>
</html>
案例3：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
span[class^='sp']{
color: red;
}
</style>
</head>
<body>
<span class="sp1">java</span>
<span>html</span>
<span class="sp2">javascript</span>
<span class="ss1">sql</span>
</body>
</html>
案例4：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
a[href$='java']{
color: red;
}
a[href$='html']{
color: green;
}
a[href$='txt']{
color: blue;
}
</style>
</head>
<body>
<a href="test.java">java</a>
<a href="index.html">html</a>
<a href="test.txt">txt</a>
</body>
</html>
案例5：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li[class*='huarui']{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="java-huarui">java专区</li>
<li class="html-huarui">html专区</li>
<li class="sql-huarui">sql专区</li>
<li class="javascript-huarui">Javascript专区</li>
</ul>
</body>
</html>
![Cannot execute command “/usr/lib/zabbix/alertscripts/weinxin.py”: cannot resolve path [2] No such file or directory](http://static.51tbox.com/static/2024-08-29/col/4f897e2afc42140d124486ec32ceadbb/9977dd43da464d23bd32acb8d4b835e6.png.jpg)