css选择器

凤凤564

已于 2023-12-07 17:34:37 修改

阅读量316

点赞数 12

分类专栏： css java 标签文章标签： css 前端 java

于 2023-12-07 17:32:16 首次发布

本文链接：https://blog.csdn.net/qq_64253215/article/details/134859408

版权

java 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

标签

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS选择器的分类，包括基本选择器（标签、类、ID），高级选择器（后代、子代、交集、并集）以及伪类选择器。通过实例展示了如何使用这些选择器来精细化控制元素的样式，如对链接状态、列表项和行进行样式设定。文章末尾提出了关于链接标签`<a>`中`target`和`href`属性的问题，邀请读者参与讨论。

摘要由CSDN通过智能技术生成

选择器分类

基本选择器

标签选择器

类选择器

ID选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				color:orange;
			}
			.type1{
				color:green;
			}
			#type2{
				color:blueviolet;
			}
		</style>
	</head>
	<body>
		<span>直接写标签名字代表标签选择器，用标签名{属性名：属性值}</span>
		<span class="type1">加上class属性代表类选择器：用.class名字{属性名：属性值}</span>
		<span id="type2">加上id属性代表ID选择器：用#ID名字{属性名：属性值}</span>
		<p>注：class类选择器一个页面可以使用多次，而ID选择器一个页面只可以使用一次</p>
	</body>
</html>

高级选择器

后代选择器

子代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p .type3{
				color:hotpink
			}
			p #type3{
				color:hotpink
			}
			pBiaoQian #type3{
				color:hotpink
			}
			p>.type4{
				color:gold
			}
			p .nei1{
				color:blue;
			}
			p >nei2{
				color:blue;
			}
		</style>
	</head>
	<body>
		<h3>后代选择器  表示层级关系 形式：祖先选择器 后代选择器</h3>
		<p><span class="type3">后代</span>非后代</p>
		<p><span id="type3">后代</span>非后代</p>
		<p class="pBiaoQian"><span id="type3">后代</span>非后代</p>
		<h3>子代选择器  表示严格层级关系 形式：祖先选择器>后代选择器</h3>
		<p><span class="type4">子代</span>非子代</p>
		<h3>后代和子代区别</h3>
		<p><span class="wai1"><span class="nei1">后代:虽然我隔了一层，但是我是还是后代所以能够显示</span></span></p>
		<p><span class="wai2"><span class="nei2">子代：因为我隔了一层，所以我不是子代，玩笑说是孙子代，所以不能够显示nei2设置的蓝色</span></span></p>
	</body>
</html>

交集选择器

并集选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 交集 */
			p.type5{
				color:yellowgreen
			}
			p#type6{
				color:yellowgreen
			}
			/* 并集 */
			li,div,.type7{
				color: black;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<h3>交集选择器</h3>
		<p>注：最多两个 第一个必须是标签选择器 写法 标签名.类选择器名 或 标签名#ID选择器名  注意注意 两个之间无空格无逗号 直接连一起写</p>
		<p class="type5">交集 标签和类</p>
		<p id="type6">交集 标签和ID</p>
		<h3>并集选择器</h3>
		<p>注：同种类型或不同种类型的标签 设置同一种样式 用逗号分割</p>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<div>456</div>
		<span class="type7">789</span>
	</body>
</html>

伪类选择器

链接标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				font-size: 30px;/* 设置字体大小*/
			}
			a:link{
				color:black;
			}
			a:hover{
				color: blue;
			}
			a:active{
				color:red;
			}
			a:visited{
				color:purple;
			}
		</style>
	</head>
	<body>
		<h3>伪类选择器</h3>
		<P>注：常用链接标签和列表标签  语法标签名后加冒号 如 a:hover</P>
		<!-- 链接标签 -->
		<a target="_self" href="#">链接</a>
		<!-- 
		a:link{
			color:black; //链接未被访问时
		}
		a:hover{
			color: blue; //链接被鼠标悬停
		}
		a:active{
			color:red; //链接被点击不松开
		}
		a:visited{
			color:purple; //链接被访问后
		} 
		 -->
	</body>
</html>

初始

鼠标悬停

鼠标点击不松手

链接被点击后

列表标签

利用:nth-child分别对首行，末行，和个别行设置样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li:first-child{
				color:deeppink
			}
			li:last-child{
				color: greenyellow;
			}
			li:nth-child(3){
				color: coral;
			}
		</style>
	</head>
	<body>
		<!-- 列表标签 -->
		<!-- 
		   li:first-child{
		   	color:deeppink // 第一个
		   }
		   li:last-child{
		   	color: greenyellow; // 最后一个
		   }
		   li:nth-child(3){
		   	color: coral; // 第n个
		   }
		 -->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</body>
</html>

利用:nth-child分别对奇数偶数行设置样式的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* li:nth-child(2n){
				color: red;
			}
			li:nth-child(2n+1){
				color: green;
			} */
			li:nth-child(even){
				color: red;
			}
			li:nth-child(odd){
				color: green;
			}
		</style>
	</head>
	<body>
		<!-- 列表标签 -->
		<!-- 
		   li:nth-child(2n){
		   	color: red;   //(2n) 偶数
		   }
		   li:nth-child(2n+1){
		   	color: green; //(2n+1) 奇数
		   }
		   等价于
		   li:nth-child(even){
		   	color: red;  //even 偶数
		   }
		   li:nth-child(odd){
		   	color: green; // odd 奇数
		   }
		 -->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</body>
</html>