CSS高级选择器
层次选择器
1、后代选择器 E F:会定位父标签body下所有的子标签p,范围更大
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>层次选择器</title>
<style>
/* 后代选择器 */
body p{
color: red;
}
</style>
</head>
<body>
<p>abc</p>
<h1>今天你迟到了吗</h1>
<p>今天打字<span>为啥</span>还没提交</p>
<h1>项目</h1>
<p>嘉文四世继承王位!</p>
<ul>
<li><p>疫情二三事</p></li>
<li>几个小目标</li>
</ul>
</body>
</html>
页面展示:

从图上我们可以看到,body下所有p标签的字体变成红色
2、子选择器 E>F: 会定位父标签body内所有的直接子标签p(只定义在其内部-紧邻父标签,没有其它父标签影响)
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 子选择器 */
body>p{
color: aqua;
}
</style>
</head>
<body>
<p>abc</p>
<h1>今天你迟到了吗</h1>
<p>今天打字<span>为啥</span>还没提交</p>
<h1>项目</h1>
<p>嘉文四世继承王位!</p>
<ul>
<li><p>疫情二三事</p></li>
<li>几个小目标</li>
</ul>
</body>
</html>
页面展示:

从图上我们可以看到:< li>下的p标签字体颜色没有发生改变,因为它不是body的直接子标签
3、相邻兄弟选择器 E+F: 会向下定位紧挨着的第一个同级标签p
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>层次选择器</title>
<style>
/* 相连兄弟 紧跟h1后面同级p */
h1+p{
color: chocolate;
}
</style>
</head>
<body>
<p>abc</p>
<h2>今天你迟到了吗</h2>
<p>今天打字<span>为啥</span>还没提交</p>
<h1>项目</h1>
<p>嘉文四世继承王位!</p>
<p>博客忘记提交了</p>
<ul>
<li><p>疫情二三事</p></li>
<li>几个小目标</li>
</ul>
</body>
</html>
页面展示:

从图上我们看到:h1后面的同级p标签有两个,字体颜色发生变化的是紧挨着的第一个
4、通用兄弟选择器 E~F: 会向下定位所有的同级标签p
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>层次选择器</title>
<style>
/* h2后面的同级p标签变颜色 */
h2~p{
color:darkblue
}
</style>
</head>
<body>
<p>abc</p>
<h2>今天你迟到了吗</h2>
<p>今天打字<span>为啥</span>还没提交</p>
<h1>项目</h1>
<p>嘉文四世继承王位!</p>
<ul>
<li><p>疫情二三事</p></li>
<li>几个小目标</li>
</ul>
</body>
</html>
页面展示:

从图上我们看到:h2后面的同级p标签变颜色
结构伪类选择器
1、E:first-child:作为父元素的第一个子元素的元素E
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 父元素下的第一个标签 */
p:first-child{
color: red;
}
</style>
</head>
<body>
<a href="#">练习</a>
<p>abc</p>
<h2>今天你迟到了吗</h2>
<p>今天打字<span>为啥</span>还没提交</p>
<h1>项目</h1>
<p>嘉文四世继承王位!</p>
<ul>
<li><p>疫情二三事</p></li>
<li>几个小目标</li>
<li>结构伪类选择器</li>
</ul>
</body>
</html>
页面展示:

从图上我们看到:abc颜色没有变化,因为第一个标签是< a>,疫情二三事颜色发生变化,因为标签< p>是< li> 下的第一个标签
2、E:last-child 作为父元素的最后一个子元素的元素E
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li:last-child{
color: red;
}
</style>
</head>
<body>
<a href="#">练习</a>
<p>abc</p>
<h2>今天你迟到了吗</h2>
<p>今天打字<span>为啥</span>还没提交</p>
<h1>项目</h1>
<p>嘉文四世继承王位!</p>
<ul>
<li><p>疫情二三事</p></li>
<li>几个小目标</li>
<li>结构伪类选择器</li>
</ul>
</body>
</html>
页面展示:

从图上可以看到:结构伪类选择器字体发生变化,因为该< li>是< ul>下的最后一个标签
3、E F:nth-child(n) 选择父级元素E的第n个子元素F,(n可以是1、2、3)
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li:nth-child(2){
color: red;
}
</style>
</head>
<body>
<a href="#">练习</a>
<p>abc</p>
<h2>今天你迟到了吗</h2>
<p>今天打字<span>为啥</span>还没提交</p>
<h1>项目</h1>
<p>嘉文四世继承王位!</p>
<ul>
<li><p>疫情二三事</p></li>
<li>几个小目标</li>
<li>结构伪类选择器</li>
</ul>
</body>
</html>
页面展示:

从图上可以看到:几个小目标演示发生变化,因为该< li>是< ul>的第二个标签
4、E:first-of-type 选择父元素内具有指定类型的第一个E元素
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p:first-of-type{
color: red;
}
</style>
</head>
<body>
<a href="#">练习</a>
<p>abc</p>
<h2>今天你迟到了吗</h2>
<p>今天打字<span>为啥</span>还没提交</p>
<h1>项目</h1>
<p>嘉文四世继承王位!</p>
<ul>
<li><p>疫情二三事</p></li>
<li>几个小目标</li>
<li>结构伪类选择器</li>
</ul>
</body>
</html>
页面展示:

从图上可以看到:abc、疫情二三事字体颜色都发生变化,< p>abc< /p>虽然不是第一个标签,却是第一个p标签
5、E:last-of-type 选择父元素内具有指定类型的最后一个E元素
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p:last-of-type{
color: red;
}
</style>
</head>
<body>
<a href="#">练习</a>
<p>abc</p>
<h2>今天你迟到了吗</h2>
<p>今天打字<span>为啥</span>还没提交</p>
<h1>项目</h1>
<p>嘉文四世继承王位!</p>
<ul>
<li>疫情二三事</li>
<li>几个小目标</li>
<li>结构伪类选择器</li>
</ul>
</body>
</html>
页面展示:

子元素< p>嘉文四世继承王位!< /p>是父元素body下最后一个p标签
6、E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body p:nth-of-type(2){
color: red;
}
</style>
</head>
<body>
<a href="#">练习</a>
<p>abc</p>
<h2>今天你迟到了吗</h2>
<p>今天打字<span>为啥</span>还没提交</p>
<h1>项目</h1>
<p>嘉文四世继承王位!</p>
<ul>
<li>疫情二三事</li>
<li>几个小目标</li>
<li>结构伪类选择器</li>
</ul>
</body>
</html>

子元素< p>今天打字< span>为啥< /span>还没提交< /p>是父元素body下第二个p标签
属性选择器
1、E[attr] 选择匹配具有属性attr的E元素
代码显示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p[id]{
color: red;
}
</style>
</head>
<body>
<form action="">
<p><input type="text" name="userName" value="写啥都行" placeholder="请输入用户名"></p>
<p><input type="password" name="pwd"></p>
<p id="aa">
<input type="radio" name="hobby" value="sport">体育
<input type="radio" name="hobby" value="paint">绘画
<input type="radio" name="hobby" value="music">音乐
</p>
<p><input type="submit" value="点我试试"></p>
</form>
</body>
</html>
页面展示:

匹配具有id属性的p标签
2、E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p[id]{
color: red;
}
input[type=submit]{
color: #0000FF;
}
</style>
</head>
<body>
<form action="">
<p><input type="text" name="userName" value="写啥都行" placeholder="请输入用户名"></p>
<p><input type="password" name="pwd"></p>
<p id="aa">
<input type="radio" name="hobby" value="sport">体育
<input type="radio" name="hobby" value="paint">绘画
<input type="radio" name="hobby" value="music">音乐
</p>
<p><input type="submit" value="点我试试"></p>
</form>
</body>
</html>
页面展示:

匹配属性type="submit"的input标签
3、E[attr^=val] 选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p[id]{
color: red;
}
input[type=submit]{
color: #0000FF;
}
input[name^=u]{
color: #00FFFF;
}
</style>
</head>
<body>
<form action="">
<p><input type="text" name="userName" value="写啥都行" placeholder="请输入用户名"></p>
<p><input type="password" name="pwd"></p>
<p id="aa">
<input type="radio" name="hobby" value="sport">体育
<input type="radio" name="hobby" value="paint">绘画
<input type="radio" name="hobby" value="music">音乐
</p>
<p><input type="url" name="url" value="http://www.baidu.com"></p>
<p><input type="submit" value="点我试试"></p>
</form>
</body>
</html>
页面展示:

匹配属性name以u开头的input标签
4、E[attr$=val] 选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p[id]{
color: red;
}
input[type=submit]{
color: #0000FF;
}
input[name^=u]{
color: #00FFFF;
}
input[type$=t]{
color: brown;
}
</style>
</head>
<body>
<form action="">
<p><input type="text" name="userName" value="写啥都行" placeholder="请输入用户名"></p>
<p><input type="password" name="pwd"></p>
<p id="aa">
<input type="radio" name="hobby" value="sport">体育
<input type="radio" name="hobby" value="paint">绘画
<input type="radio" name="hobby" value="music">音乐
</p>
<p><input type="url" name="url" value="http://www.baidu.com"></p>
<p><input type="submit" value="点我试试"></p>
</form>
</body>
</html>
页面展示:

匹配属性type以t结尾的input标签
5、E[attr*=val] 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p[id]{
color: red;
}
input[type=submit]{
color: #0000FF;
}
input[name^=u]{
color: #00FFFF;
}
input[type$=t]{
color: brown;
}
input[name*=m]{
color: cornflowerblue;
font-size: 30px;
}
</style>
</head>
<body>
<form action="">
<p><input type="text" name="userName" value="写啥都行" placeholder="请输入用户名"></p>
<p><input type="password" name="pwd"></p>
<p id="aa">
<input type="radio" name="hobby" value="sport">体育
<input type="radio" name="hobby" value="paint">绘画
<input type="radio" name="hobby" value="music">音乐
</p>
<p><input type="url" name="url" value="http://www.baidu.com"></p>
<p><input type="submit" value="点我试试"></p>
</form>
</body>
</html>
页面展示:

匹配属性name包含字母m的input标签
9889

被折叠的 条评论
为什么被折叠?



