选择器总结_uilqi-CSDN博客

本文链接：https://blog.csdn.net/UilQi/article/details/129867204

本文介绍了CSS中的基本选择器，包括标签、ID、类和通配符选择器，以及它们的优先级。接着讨论了包含选择，如子代和后代选择器，和分组选择器的用法。此外，文章还详细阐述了属性选择器的各种匹配方式，并列举了伪类选择器（如link、visited、hover和active）和伪元素选择器（如::before和::after）的应用。

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

一、基本选择器

基本选择器包括：标签选择器（根据标签的名称获取）、ID选择器（获取的是ID属性）、类选择器（class属性）、通用选择器（通配符）

<head>
	<title>选择器</title>
	<style type="text/css">
		div{
			color: red;
		}
		#one{
			color: blue;
		}
		.two{
			color: yellow;
		}
		*{
			color: green;
		}
	</style>
</head>
<body>
	<div id="one" class="two">
		这是第一个div
	</div>
	<div >
		这是第一个div
	</div>
</body>

注意：id属性是唯一的，class不唯一
优先级：ID > class > 标签 > 通配符

二、包含选择

子代选择器（获取的是某个标签的第一级子标签）
后代选择器（获取的某个标签里面所有的子标签）
分组选择（逗号选择器，可以同时设置多个标签，使用逗号进行分割）

<head>
	<title>选择器</title>
	<style type="text/css">
		/*子代选择器*/
		div.list>ul{
			border: 1px solid red;
		}
		/*后代选择器*/
		.list li{
			border: 1px solid blue;
		}
		/*逗号择器*/
		.one,.two,#first{
			color: green;
			width: 200px;
			height: 200px;
			background: pink;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<div class="one">这是一个div</div>
	<div class="two">这是第二个div</div>
	<p id="first">这是一个段落标签</p>
	<div class="list">
		<ul>
			<li>这是列表1</li>
			<li>这是列表2</li>
			<li>这是列表3</li>
			<li>这是列表4</li>
			<li>这是列表5</li>
		</ul>
	</div>
</body>

三、属性选择器

<head>
	<title>选择器</title>
	<style type="text/css">
		/*选择选中的额标签中存在的某个属性*/
		div[title]{
			border: 1px solid black;
		}
		/*确切的等于某个值*/
		input[type="text"]{
			background: red;
		}
		/*属性值包含某个值*/
		input[type *="e"]{
			background: blue;
		}
		/*属性值以某个值开头*/
		input[type ^="e"]{
			background: green;
		}
		/*属性值以某个值结尾*/
		input[type $="rl"]{
			background: red;
		}
		/*+表示下一个标签*/
		.msg +p{
			border: 1px solid green;
		}
		/*属性等于某个属性值*/
		[title="这是一个标题"]{
			color: red;
		}
	</style>
</head>
<body>
	<div class="container">
		一个div容器
	</div>
	<div title="这是一个标题">第二个div</div>
	<input type="text" name="" id="" value="张三">
	<input type="email" name="" id="" value="李四">
	<input type="url" name="" id="" value="王五">
	<hr>
	<div class="msg">我</div>
	<p id="msg1" ">这是</p>
</body>

四、伪类选择器

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过:进行设置不同的样式（实现伪类选择器）

:link ------ 链接点击之前
:visited ----- 链接点击之后
:hover ------鼠标不点击，停在链接上
:active ------鼠标点击但不松手

四种状态的顺序最好固定，link visited hover active

<head>
	<title></title>
	<style type="text/css">
		/*点击之前的颜色*/
		a:link{
			color: red;
		}
		/*点击之后的颜色*/
		a:visited{
			color: green;
		}
		/*鼠标悬停的颜色*/
		a:hover{
			color: blue;
		}
		a:active{
			color: pink;
		}
	</style>
</head>
<body>
	<a href="#">点一下</a>
</body>

五、伪元素选择器

::before
::after

注意：要使用伪元素选择器一定要加上content属性

<head>
	<title></title>
	<style type="text/css">
		p::before{
			content: "张三";
			color: red;
		}
		p::after{
			content: "李四";
			color: green;
		}
	</style>
</head>
<body>
	<p>一个段落</p>
</body>