高级选择器
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>