css选择器的分类与应用

最新推荐文章于 2024-07-22 20:38:06 发布

邓邓邓邓邓邓

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量708

点赞数 1

本文链接：https://blog.csdn.net/qq_38830589/article/details/99622763

版权

本文详细介绍了CSS选择器的六大类别：核心选择器、层次选择器、属性选择器、伪类选择器、伪元素选择器和选择器优先级。涵盖了子元素、状态相关和类型相关等应用场景，并提供了丰富的示例。了解这些选择器能帮助开发者更精准地控制网页样式。

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

文章目录

1、核心选择器

核心选择器基本分为以下六大类：
在这里插入图片描述
示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>核心选择器</title>
	<style>
		/*逗号选择器*/
		body,h1,h2,ul{
    
			margin: 0;
		}
		/*标签选择器*/
		ul{
    
			padding: 0;
			list-style: none;
		}
		/*组合选择器*/
		div#one{
    
			color: pink;
		}
		/*class选择器*/
		#two.second{
    
			color: lightblue;
		}
		/*id选择器*/
		#four {
    
			color: teal;
		}
	</style>
</head>
<body>
	<h1>选择器</h1>
	<h2>核心选择器</h2>
	<ul>
		<li>标签</li>
		<li>id</li>
		<li>class</li>
		<li>逗号</li>
	</ul>
	<div id="one">one</div>
	<div id="two" class="second">two,second</div>
	<div class="second">three</div>
	<div id="four">four</div>
</body>
</html>

在这里插入图片描述

2、层次选择器

子元素选择器
.nav > ul > li {}
后代选择器
.nav li {}
下一个兄弟选择器
.products > li.ios + *{}
之后所有兄弟选择器
.products > li.ios ~ *{}

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层次选择器</title>
	<style>
		/*重置样式*/
		*{
    
			margin: 0;
			padding: 0;
			list-style:none;
		}
		/*导航*/
		/*背景颜色、字体颜色*/
		.nav{
    
			background: #333;
			color: #ededed;
		}
		/*清除浮动*/
		.nav>ul::after{
    
			content: "";
			display: block;
			clear: both;
		}
		/*行高*/
		.nav li{
    
			line-height: 3em;
		}
		/*标题脱离行排列使其排在同一行*/
		.nav>ul>li{
    
			float: left;
			width: 100px;
			text-align: center;
			position: relative;
		}
		/*鼠标移上去改变背景颜色、字体颜色*/
		.nav>ul>li:hover{
    
			background-color: #ededed;
			color: #333;
		}
		/*二级导航容器*/
		/*隐藏二级标题*/
		.nav>ul>li>ul{
    
			display: none;
			position: absolute;
			background-color: #ededed;
			color: #333;
			width: 100%;
		}
		/*显示二级标题*/
		.nav>ul>li:hover>ul{
    
			display: block;
		}
		/* 内容 */
		/* .products>li.ios+* */
		.products>li.ios~*{
    
			color: red;
		}
		/*脚部*/

	</style>
</head>
<body>
	<!--导航开始-->
	<div class="nav">
		<ul>
			<!--一级导航-->
			<li>
				<p>JvaEE</p>
				<!--二级导航-->
				<ul>
					<li>CoreJava</li>
					<li>Linux</li>
					<li>XML</li>
					<li>Oracle</li>
				</ul>
			</li>