CSS高级选择器详解及应用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_56319791/article/details/122351453

后代选择器
语法父级标签子标签 { 样式 } 表示所有父级标签的某类子标签设置指定样式

<!DOCTYPE html>
<html>
<header>
<title>高级选择器</title>
<meta charset="utf-8"/>
<style>
  <!--后代选择器,表示将所有div下的所有p标签的内容设置指定样式-->
  div p{
  		color:red;
  		font-size:26px;
  }
</style>
</header>
<body>
  <div>
  	<p>内容1......</p>
  	<ul>
  		<li>
  		<p>内容2......</p>
  		 </li>
  	</ul>
  </div>
</body>
</html>

儿子选择器
语法父标签>子标签表示将父标签下的指定子标签设置指定样式

 <!DOCTYPE html>
  <html>
  <header>
<title>高级选择器</title>
<meta charset="utf-8"/>
<style>
	<!--儿子选择器,表示将所有div下的所有p标签的内容设置指定样式-->
	div>p{
			color:red;
			font-size:26px;
	}
</style>
</header>
<body>
	<div>
		<p>内容1......</p>
		<ul>
			<li>
			<p>内容2......</p>
			 </li>
		</ul>
	</div>
</body>
  </html>

组合选择器
标签名与标签名之间使用逗号隔开，一般设置多种标签的相同样式

 <!DOCTYPE html>
  <html>
  <header>
<title>高级选择器</title>
<meta charset="utf-8"/>
<style>
	<!--组合选择器,表示将所有div，ul，li，p标签的内容设置指定样式-->
	div,ul,li,p{
			color:red;
			font-size:26px;
	}
</style>
</header>
<body>
	<div>
		<p>内容1......</p>
		<ul>
			<li>
			<p>内容2......</p>
			 </li>
		</ul>
	</div>
</body>
  </html>

兄弟选择器

 <!DOCTYPE html>
  <html>
  <header>
<title>高级选择器</title>
<meta charset="utf-8"/>
<style>
	<!--兄弟选择器,表示将紧随在div标签之后的p标签的内容设置指定样式-->
	div + p{
			color:red;
			font-size:26px;
	}
</style>
</header>
<body>
	<div>
		<p>内容1......</p>
		<ul>
			<li>
			<p>内容2......</p>
			 </li>
		</ul>
	</div>
	<p>...</p>
	<p>...</p>
	<p>...</p>
	<p>...</p>
	<p>...</p>
	<p>...</p>
	<div>...</div>
</body>
  </html>

交集选择器
取多个标签的属性的交集部分，进行设置样式

 <!DOCTYPE html>
  <html>
  <header>
<title>高级选择器</title>
<meta charset="utf-8"/>
<style>
	<!--交集选择器,下面表示即是标签p且类为page的p标签元素内容设置样式-->
	p.page{
			color:red;
			font-size:26px;
	}
</style>
</header>
<body>
	<div class="container">
		<p class="container_content_one page">内容1......</p>
		<ul>
			<li>
			<p class="container_content_two page">内容2......</p>
			 </li>
		</ul>
	</div>
	<p class="page role_one">...</p>
	<p class="page role_two">...</p>
	<p class="page role_three">...</p>
	<p class="page role_four">...</p>
	<p class="page role_five">...</p>
	<p class="page role_six">...</p>
	<div>...</div>
</body>
  </html>

伪类选择器，“爱恨原则”，“LoVe，HAte”

 <!DOCTYPE html>
  <html>
  <header>
<title>高级选择器</title>
<meta charset="utf-8"/>
<style>
	a{
		text-decoration:none;
		}
	<!--link表示链接的样式-->
	a:link{
		color:blue;
	}
	<!--visited表示查看链接之后的样式-->
	a:visited{
		color:red;
	}
	<!--hover表示鼠标悬停在a标签上时的样式，hove还可以运用在div,span等标签上-->
	a:hover{
		color:green;
		font-size:26px;
	}
	<!--active表示鼠标点击a标签没有松开之前的样式-->
	a:active{
		color:yellow;
		font-size:24px;
	}
	<!--匹配每个p元素的首个字母-->
	p::first-letter{
		color:red;
		font-size:26px;
	}
	<!--在p标签之前插入内容,内容只会以字符的形式展示-->
	p::before{
		content:'$';
	}
	<!--在p标签之后插入内容，内容只会以字符的形式展示-->
	p::after{
		content:'&&';
	}
</style>
</header>
<body>
	<div class="container">
		<a href="#">百度一下</a>
	</div>
</body>
  </html>

伪元素

<!DOCTYPE html>
  <html>
  <header>
<title>高级选择器</title>
<meta charset="utf-8"/>
<style>
	<!--匹配每个p元素的首个字母-->
	p::first-letter{
		color:red;
		font-size:26px;
	}
	<!--在p标签之前插入内容,内容只会以字符的形式展示-->
	p::before{
		content:'$';
	}
	<!--在p标签之后插入内容，内容只会以字符的形式展示-->
	p::after{
		content:'&&';
	}
	<!--选择每个p标签的首行-->
	p::first-line{
		color:red;
		font-size:26px;
	}
</style>
</header>
<body>
	<div class="container">
		<a href="#">百度一下</a>
	</div>
</body>
  </html>

组合选择器
所有种类的选择器可以组合在一起使用，如两个后代选择器 div p,ul p
{样式} 像这样中间使用逗号隔开
display 与 visibility 区别

<!DOCTYPE html>
  <html>
  <header>
<title>高级选择器</title>
<meta charset="utf-8"/>
<style>
	a{
		text-decoration:none;
		<!--不显示标签，且不占地方-->
		display:none;
		<!--不现实标签，但是会占地方-->
		visibility:hidden;
		}
</style>
</header>
<body>
	<div class="container">
		<a href="#">百度一下</a>
	</div>
</body>
  </html>

css高级选择器