CSS中的选择器

最新推荐文章于 2024-07-21 19:13:42 发布

32224047_yw

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量133

点赞数

分类专栏： WEB前端文章标签： css html javascript js

本文链接：https://blog.csdn.net/qq_32224047/article/details/106976009

版权

WEB前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.概述

选择器可以帮助我们在html中选中想要修饰的标签

2.CSS中选择器的分类

下面选择器为自己梳理总结

2.1基本选择器

a.标签名选择器

根据标签的名称选中标签，格式：标签名{css属性}

b.类选择器

在标签上添加class属性，可以根据class的值选中标签，格式： .类名{}

c.id选择器

在标签上添加id属性，根据id的值选中标签，id不能重复，格式：#id值{}

2.2扩展选择器

a.后代选择器

通过父选择器选中指定的后代元素，格式：父选择器后代选择器{}

b.子元素选择器

通过父选择器选中指定的子元素，格式：父选择器>子元素选择器{}

c.分组选择器

将多个选择器选中的元素一起修饰，格式：选择器1，选择器2，…{}

d.属性选择器

根据标签的属性选中标签，格式：选择器[属性]{}

e.相邻兄弟选择器

对于两个相邻的元素，通过前面的元素选中后面的元素，格式：大哥（前面元素）+小弟（后面元素，有相同的父级元素）{}

f.伪元素选择器

不仅选中了元素，还选中了元素的状态

:link 表示未被点击时状态
:hover 表示鼠标移入的状态
:active 表示鼠标点击时状态
:visited 表示点击后状态

优先级：选择器的精确度越高，则优先级越高，如id>class>标签名

示例代码如下

<!DOCTYPE HTML>
<html>
	<head>
		<title>扩展选择器</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css" >
			/* 为了看着方便给所有标签都加上边框 */
			div,span,p,input{border: 1px solid red;}
			
			/* 1.后代选择器 */
			#d1 span{
				background-color: #DDA0DD;
				font-size: 22px;
			}
			/* 2.子元素选择器 */
			#d1>span{
				background-color: #DEB887;
				font-size: 16px;
			}
			/* 3.分组选择器 */
			.c1,.c2,#p1 span{
				background-color: #F4A460;
			}
			/* 4.属性选择器 */
			*[class]{
				border: 2px solid gray;
			}
			
			input[type="text"]{
				background-color: #ff0000;
				text-indent: 10px;
			}

			/* 5.相邻兄弟选择器 */
			#p1+p{
				background-color: #DB7093;
			}

			/* 6.伪元素选择器 */
			a:link{
				font-size:24px;
				text-decoration: none;/* 无下划线 */
			}
			a:hover{
				color:green;
				font-size:36px;
				text-decoration: underline;/* 有下划线 */
			}
			a:active{
				color:#8FBC8F;
				font-size:50px;
				text-decoration: none;/* 无下划线 */
			}
			a:visited{
				color:gray;
				font-size:24px;
			}




			.div1{
				border: 1px solid blue;
				width:100px;
				height:100px;
				margin: 20px;
				display: none;
			}
			.span1{
				display: inline-block;
				border: 1px solid blue;
				width:100px;
				height:100px;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div class="div1">div111</div>
		<div class="div1">div222</div>
		<span class="span1">span111</span>
		<span class="span1">span222</span>

		
		<div id="d1">
			div222
			<span>div下的span</span>
			<font>
				fontxxx
				<span>font下的span</span>
				fontxxx
			</font>
		</div>
		<span class="c1">
			span111
		</span> &nbsp;&nbsp;&nbsp;
		<span class="c2">
			span222
		</span> &nbsp;&nbsp;&nbsp;
		<p id="p1">
			ppp111<span>p1-span1</span>xxxxxx
		</p>
		<p>
			ppp222
		</p>
		<a href="#">
			a1111
		</a> &nbsp;&nbsp;&nbsp;
		<a href="#">
			a2222
		</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		
		<input type="text" name="usename" value="aaaaa" />
		<input type="button" value="按钮" />
		
	</body>
</html>

运行结果：

32224047_yw

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS中的选择器

1.概述选择器可以帮助我们在html中选中想要修饰的标签2.CSS中选择器的分类下面选择器为自己梳理总结2.1基本选择器a.标签名选择器根据标签的名称选中标签，格式：标签名{css属性}b.类选择器在标签上添加class属性，可以根据class的值选中标签，格式： .类名{}c.id选择器在标签上添加id属性，根据id的值选中标签，id不能重复，格式：#id值{}2.2扩展选择器a.后代选择器通过父选择器选中指定的后代元素，格式：父选择器后代选择器{..
复制链接

扫一扫