【CSS】常用选择器总结

最新推荐文章于 2024-03-09 13:40:17 发布

景谦Nice

最新推荐文章于 2024-03-09 13:40:17 发布

阅读量428

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_43705275/article/details/103362587

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS选择器总结：

标签选择器：用于给指定标签名的所有标签添加样式
id选择器：用于给HTML文件中与指定id值相同的标签添加样式，HTML中id值不允许重复
class选择器：用于给HTML文件中与指定class值相同的所有标签添加样式，HTML中class值可以有多个
后代选择器：用于给某标签的子标签添加样式，父子选择器也可以是分组选择器、标签选择器、id选择器、class选择器等选择器
分组选择器：用于给多个以逗号间隔的选择器添加样式，以逗号间隔的选择器也可以是后代选择器、标签选择器、id选择器、class选择器等选择器
通配符选择器：以"*"匹配所有HTML标签元素，为所有标签元素添加样式
伪类选择器：着重掌握link(未访问)、visited(访问后)、hover(鼠标浮上去)、active(点击的时候)，常用于给超链接标签添加样式

1-6例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS练习</title>
		<style>
			/*标签选择器*/
			div{
				color: red; 
				font-family: '仿宋'; 
				border: red 1px solid;
			}
			/*id选择器*/
			#one{
				color: blue; 
				font-family: "宋体"; 
				border: blue 1px solid;
			}
			/*class选择器*/
			.two{
				font-family: "新宋体"; 
			}
			/*后代选择器*/
			body .two{
				color: green; 
				border: green 1px solid;
			}
			/*分组选择器*/
			p,h6{
				color: pink; 
				font-family: "楷体"; 
				border: pink 1px solid;
			}
			/*通配符选择器*/
			*{
				font-size: 36px;
			}
		</style>
	</head>
	<body>
		<span id="one">CSS选择器总结</span>
		<span class="two">CSS选择器总结</span>
		<span class="two">CSS选择器总结</span>
		<div>CSS选择器总结</div>
		<p>CSS选择器总结</p>
		<h6>CSS选择器总结</h6>
	</body>
</html>

结果如下：
在这里插入图片描述

伪类选择器例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试伪类选择器</title>
		<style type="text/css">
			/*未访问时的样式*/
			a:link{
				text-decoration: none;
				color: black;
			}
			/*访问后的样式*/
			a:visited{
				color: red;
			}
			/*鼠标浮上去*/
			a:hover{
				color: blue;
				text-decoration: underline;
			}
			/*鼠标点击还没松开时的样式*/
			a:active{
				font-size: 36px;
			}
		</style>
	</head>
	<body>
		<a href="###">测试伪类选择器</a>
	</body>
</html>

用浏览器打开后是下面的效果：
在这里插入图片描述
鼠标浮到文字上时下面的效果：

鼠标点击文字时是下面的效果：

鼠标点击过后回到该页面后是如下效果：

景谦Nice

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【CSS】常用选择器总结

CSS选择器总结：标签选择器：用于给指定标签名的所有标签添加样式id选择器：用于给HTML文件中与指定id值相同的标签添加样式，HTML中id值不允许重复class选择器：用于给HTML文件中与指定class值相同的所有标签添加样式，HTML中class值可以有多个后代选择器：用于给某标签的子标签添加样式，父子选择器也可以是分组选择器、标签选择器、id选择器、class选择器等选择器分...
复制链接

扫一扫