常用选择器

最新推荐文章于 2024-05-11 17:07:54 发布

黄晶谛

最新推荐文章于 2024-05-11 17:07:54 发布

阅读量105

点赞数

分类专栏： # HTML&CSS

本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/114156595

版权

HTML&CSS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		span {
			font-size: 150px;
		}
		.g {
			color: skyblue;
		}
		.o {
			color: red;
		}
	</style>
</head>
<body>
	<span class="g">G</span>
	<span class="o">o</span>
	<span>o</span>
	<span class="g">g</span>
	<span>l</span>
	<span>e</span>
</body>
</html>

多类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多类名选择器</title>
	<style>
		.red {
			color:red;
		}
		
		.font50 {
			font-size: 30px;
			color: blue;
		}
	</style>
</head>
<body>
	<div class="red">你好</div>
	<div>你好</div>
	<div>你好</div>
	<div class="red font50">你好</div>
	<div>你好</div>
</body>
</html>

二、id选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>id选择器</title>
	<style type="text/css">
		#hello {
			color: red;
		}
	</style>
</head>
<body>
	<div id="hello">你好</div>
	<div>你好</div>
	<div>你好</div>
	<div>你好</div>
	<div>你好</div>
</body>
</html>

三、通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通配符选择器</title>
	<style type="text/css">
		* {
			color: red;
		}
	</style>
</head>
<body>
	<div>nh</div>
	<p>hello</p>
	<a>haha</a>
</body>
</html>

四、后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<style type="text/css">
		div p {
			color: red;
		}

		ul li {
			color: #daa520;
		}
	</style>
</head>
<body>
	<div>中国</div>
	<div>中国</div>
	<div>中国</div>
	<div>
		<p>中国</p>
	</div>
	<div>
		<p>中国</p>
	</div>
	<div>
		<p>中国</p>
	</div>
	<div>
		<p>中国</p>
	</div>
	<p>中国</p>
	<p>中国</p>
	<p>中国</p>

	<ul>
	    <li>苹果</li>
	    <li>梨子</li>
	    <li>香蕉</li>
	    <li>橘子</li>
	</ul>

	<ol>
	    <li>苹果</li>
	    <li>梨子</li>
	    <li>香蕉</li>
	    <li>橘子</li>
	</ol>
</body>
</html>

五、子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>子代选择器</title>

	<style type="text/css">
		/* ul li a {  后代选择器，选择所有的后代
			color: red;
		}
		
		ul li > a { 子代选择器，选择一级子代
			color: blue;
		} */

		.father > li > a {
			color: yellow;
		}
	</style>
</head>
<body>
	<ul class="father">
	    <li>
	    	<a href="#">一级菜单</a>
			<ul>
				<li>
					<a href="#">二级菜单</a>
				</li>
				<li>
					<a href="#">二级菜单</a>
				</li>
				<li>
					<a href="#">二级菜单</a>
				</li>
			</ul>
	    </li>	
	</ul>
</body>
</html>

六、交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>交集选择器</title>
	<style type="text/css">
		div.red {
			color: red;
		}
	</style>
</head>
<body>
	<div>交集选择器</div>
	<div class="red">交集选择器</div>
	<div>交集选择器</div>
	<p class="red">交集选择器</p>
	<p>交集选择器</p>
	<p>交集选择器</p>
</body>
</html>

七、并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>并集选择器</title>
	<style type="text/css">
		div, p, span {
			color: red;
		}
	</style>
</head>
<body>
	<div>并集选择器</div>
	<div>并集选择器</div>
	<div>并集选择器</div>
	<p>并集选择器</p>
	<p>并集选择器</p>
	<span>并集选择器</span>
	<span>并集选择器</span>
	<a href="#">并集选择器</a>
</body>
</html>

八、伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类链接选择器</title>
	<style type="text/css">
		/* 未访问时链接的样式 */
		a:link {
			color: red;
			font-size: 25px;
			text-decoration: none;
			font-weight: 700;
		}
		/* 链接访问后的样式 */
		a:visited {
			color: green;
		}
		/* 鼠标经过时的样式 */
		a:hover {
			color: #f10215;
		}
		/* 鼠标按下时的样式 */
		a:active {
			color: blue;
		}

		
	</style>
</head>
<body>
	<a href="http://www.giserdev.com" target="_blank">晶谛</a>
</body>
</html>

伪类选择器的常用方法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		a {
			color: #3C3C3C;
			text-decoration: none;
			font-size: 25px;
		}

		a:hover {
			color: #f10215;
		}
	</style>
</head>
<body>
	<a href="http://www.giserdev.com" target="_blank">晶谛</a>
</body>
</html>