Night小课堂06 CSS高级选择器

Night-Zzz

已于 2023-05-13 16:32:18 修改

阅读量73

点赞数 1

文章标签：前端 css3 html5

于 2023-05-13 16:30:42 首次发布

本文链接：https://blog.csdn.net/NoNight_Zzz/article/details/130658571

版权

高级选择器

1.层次选择器

(1)后代选择器

div p 代码意为在div中的p生效，背景色变为黄色，而不在div中的p则还是原来的红色效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>后代选择器</title> 
<style type="text/css">
	div{
		border: 1px solid black;
	}
	div p
	{
		background-color:yellow;
	}
	p{
		background-color:red;
	}
</style>
</head>
<body>

<div>
<p>1 在 div 中</p>
<p>2 在 div 中</p>
</div>

<p>3 不在 div 中</p>
<p>4 不在 div 中</p>
</body>
</html>

效果图：

(2)子选择器

div>p 只影响一代，div中的p生效，而在div里面h1中的p则没有效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>子选择器</title> 
<style type="text/css">
	div{
		border: 1px solid black;
	}
	div>p
	{
		background-color:yellow;
	}
	p{
		background-color:red;
	}
</style>
</head>
<body>

<div>
<p>1 在 div 中</p>
<p>2 在 div 中</p>
<h1>1.2<p>55555</p></h1>
</div>

<p>3 不在 div 中</p>
<p>4 不在 div 中</p>
</body>
</html>

效果图：

(3)相邻兄弟选择器

定义：选择所有紧接着<div>元素之后的第一个<p>元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
div+p
{
	background-color:yellow;
}
</style>
</head>
<body>

<h1>标题</h1>

<p>div上方 第一个段落</p>

<div>
<h2>副标题</h2>
<p>div内 第一个段落</p>
</div>

<p>div外  第一个段落</p>

<p>div外  第二个段落</p>

</body>
</html>

效果图：

(4)通用兄弟选择器

定义：选择所有紧接着<div>元素之后的所有<p>元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
div~p
{
	background-color:yellow;
}
</style>
</head>
<body>

<h1>标题</h1>

<p>div上方 第一个段落</p>

<div>
<h2>副标题</h2>
<p>div内 第一个段落</p>
</div>

<p>div外  第一个段落</p>

<p>div外  第二个段落</p>

<p>div外  第三个段落</p>

<p>div外  第四个段落</p>

</body>
</html>

效果图：

2.结构伪类选择器

特点1：常用的结构伪类选择器的种类：：first-child ：last-child

特点2：匹配某元素的父元素的第一个或是最后一个某元素

特点3：利用特殊字符冒号：模拟类选择器的作用实现第一个或是最后一个元素标签

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title></title> 
	<style>
		p:first-child
		{
			background-color:red;
		}
	</style>
	</head>
	<body>
		<p>body里第一个p</p>
		<p>body里第二个p</p>
		<div>
		<p>在div里第一个p</p>
		<p>在div里第二个p</p>
		</div>
	</body>
</html>

效果图：

3.属性选择器

1.E[attr]

定义：选择匹配具有属性attr的E元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a[target]{
				background: red;
			}
		</style>
	</head>
	<body>
		<a href="" target="_blank" class="ab">1</a>
		<a href="" class="abcf">2</a>
		<a href="" class="acb">3</a>
		<a href="" class="bac">4</a>
		<a href="" target="_self" class="bca">5</a>
		<a href="" class="f">6</a>
	</body>
</html>

效果图：

2.E[attr=val]（attribute：属性 target：目标 value：值）

定义：选择匹配具有属性attr的E元素，并且属性值为val

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a[target=_blank]{
					background:green ;
			    }
		</style>
	</head>
	<body>
		<a href="" target="_blank" class="ab">1</a>
		<a href="" class="abcf">2</a>
		<a href="" class="acb">3</a>
		<a href="" class="bac">4</a>
		<a href="" target="_self" class="bca">5</a>
		<a href="" class="f">6</a>
	</body>
</html>

效果图：

3.E[attr^=val]

定义：选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a[class^="a"]{
				background: red;
			}
			a[class^="b"]{
				background: yellow;
			}

		</style>
	</head>
	<body>
		<a href="" target="_blank" class="ab">1</a>
		<a href="" class="abcf">2</a>
		<a href="" class="acb">3</a>
		<a href="" class="bac">4</a>
		<a href="" target="_self" class="bca">5</a>
		<a href="" class="f">6</a>
	</body>
</html>

效果图：

4.E[attr$=val]

定义：选择匹配元素E，且E元素定义了属性attr，其属性值以val结尾的任意字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a[class$="c"]{
				background: pink;
			}

		</style>
	</head>
	<body>
		<a href="" target="_blank" class="ab">1</a>
		<a href="" class="abcf">2</a>
		<a href="" class="acb">3</a>
		<a href="" class="bac">4</a>
		<a href="" target="_self" class="bca">5</a>
		<a href="" class="f">6</a>
	</body>
</html>

效果图：

5.E[attr*=val]

定义：选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a[class*="f"]{
				background: blue;
			}
		</style>
	</head>
	<body>
		<a href="" target="_blank" class="ab">1</a>
		<a href="" class="abcf">2</a>
		<a href="" class="acb">3</a>
		<a href="" class="bac">4</a>
		<a href="" target="_self" class="bca">5</a>
		<a href="" class="f">6</a>
	</body>
</html>

效果图：