CSS选择器

最新推荐文章于 2020-06-27 21:44:33 发布

bagpiping

最新推荐文章于 2020-06-27 21:44:33 发布

阅读量117

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/bagpiping/article/details/84370402

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

常用的四种CSS选择器：

ID选择器：HTML页面每个节点都可以用一个ID标识

#tab{
	margin-top:200px;
	collapse:collapse;
	cellspacing:5px;
}

class选择器：HTML页面一群节点，它们拥有同一个class标识

.t{
	border:1px solid red;		 
}

标签选择器：HTML页面上同类型的节点，比如：<td> <p> <span>

td{
	border:1px solid black;
	cellspacing:5px;
}

伪类选择器：常用于和用户交互有关的节点，比如超链接、按钮、输入框

a:LINK {
	text-decoration:none;
}

HTML页面：

<head>
	<title>标题</title>
	<style type="text/css">
		#tab{
			margin-top:200px;
			collapse:collapse;
			cellspacing:5px;
		}
		.t{
			border:1px solid red;		 
		}
		td{
			border:1px solid black;
			cellspacing:5px;
		}
		a:LINK {
			text-decoration:none;
		}
	</style>
</head>
<body>
	<span><a href="http://localhost:8080/main.jsp">返回首页</a></span>
	<table id="tab">
		<tr>
			<td class="t">平台ID</td>
			<td class="t">平台</td>
			<td class="t">提交</td>
		</tr>
	</table>
</body>

选择器的优先级

当多个选择器选择了同一个HTML标签，设置同一属性的时候引发层叠特性，一般来说后面的覆盖前面的

解决CSS选择器样式冲突
规则：id>class>标签>伪类;
哪个有id用哪个；都有id哪个有class用哪个；都有id和class哪个有标签用哪个；优先级一样时后面覆盖前面的

bagpiping

关注

0
点赞
踩
0

收藏

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

常用的四种CSS选择器：ID选择器：HTML页面每个节点都可以用一个ID标识#tab{ margin-top:200px; collapse:collapse; cellspacing:5px;}标签选择器：HTML页面一群节点，它们拥有同一个class标识.t{ border:1px solid red; }标签选择器：HTML页面上同类型的节点，比如：&amp;amp;...
复制链接

扫一扫