Web前端选择器的权重&CSS常见文本属性案例

最新推荐文章于 2023-03-29 20:21:14 发布

耍前端

最新推荐文章于 2023-03-29 20:21:14 发布

阅读量366

点赞数

分类专栏： HTMLCSS 文章标签：选择器的权重 Web前端 CSS常见文本属性案例

本文链接：https://blog.csdn.net/weixin_43294317/article/details/102903610

版权

HTMLCSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Web前端选择器的权重&CSS常见文本属性案例

CSS优先级（降序）

1. 行内样式（<...style=" "...>）
 3. 类选择器(.con{...})
 4. 标签选择器(div{...})
 5. 通用选择器(*{...})

当样式发生冲突时，谁的谁的权重值高，谁就生效

通用选择器 * (权重值0)
标签（元素）选择器 div ，p…(权重值1)
类（别）选择器 .act , .nav…(权重值10)
ID选择器 #btn ,#box…（权重值100）
行内样式（权重值1000）
巧妙理解：选择器选择的范围越小越精确优先级就越高
例如：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{color: yellow;} /* 1 */
			div a{color: green;} /* 1+1 */
			.demo a{color: black;} /* 10+1 */
			#demo a{color: orange;}  /* 100+1 */
			div #demo a{color: red;}  /* 1+100+1 */
		</style>
	</head>
	<body>
		<a href="">应该是黄色</a>
		<div class="demo">
			<a href="">应该是黑色</a>
		</div>
		<div id="demo">
			<a href="">应该是红色</a>
		</div>
	</body>
</html>

效果：
在这里插入图片描述

CSS常见文本属性案例

<html>
	<head>
		<meta charset="utf-8"> 
		<title></title>
		<style type="text/css">
			.p1{color: red;} /* 文字颜色 */
			.p2{font-family: "arial black";} /* 字体类型 */
			.p3{font-size:30px;}/* 文字大小 */
			.p4{font-weight: bold;}/* 文字加粗 */
			.p5{font-style: italic;}/* 文字倾斜 */
			.p6{text-indent: 60px;}/* 首行缩进 */
			.p7{text-align: center;}/* 水平对齐方式 */
			.p8{line-height: 100px;}/* 行高 */
			.p9{height: 100px;background-color: gray;line-height: 100px;}/* 垂直居中 */
			.p10{text-decoration: underline;}/* 文本修饰 */
		</style>
	</head>
	<body>
		<ol>
			<li class="p1">北京时间11月4日，湖人在客场以103-96战胜马刺。湖人当家球星勒布朗-詹姆斯首发出场37分钟，23投8中，得到21分、11个篮板和13次助攻。</li>
			<li class="p2">上一场湖人客场击败独行侠，詹姆斯砍下39分，外加12个篮板、16次助攻和4次抢断。</li>
			<li class="p3">今天湖人客场与马刺的上半场结束，詹姆斯就已经交出了一份准三双数据：11分、8个篮板和8次助攻，他在场上无处不在。</li>
			<li class="p4">第一节还剩7分多钟，詹姆斯运球从中路突破，他几乎是碾压着德罗赞完成一个左手上篮。</li>
			<li class="p5">第二节还剩9分多钟，詹姆斯在低位背身单打德罗赞，他拱着德罗赞挤到篮下，并在两位马刺球员的防守下投篮命中。</li>
			<li class="p6">本节还剩5分多钟，詹姆斯无球冲击篮下，接到霍华德的助攻并完成上篮。</li>
			<li class="p7">上半场，詹姆斯送出的8次助攻里有一些非常精彩。特别是在两名马刺球员的中间击地传球给麦基，助攻后者得分。</li>
			<li class="p8">上半场最后阶段，詹姆斯在后场得球之后长传给前场的艾弗里-布拉德利，后者上篮得分，而且获得2+1的机会。</li>
			<li class="p9">第三节开始后，詹姆斯带领湖人队打出一波小高潮，他自己也是频频持球杀向篮下。湖人队的领先优势一度接近20分。</li>
			<li class="p10">第四节还剩24秒，落后6分的马刺无奈之下对詹姆斯犯规，马刺大势已去，湖人取得5连胜。</li>
		</ol>
	</body>
</html>

效果：
在这里插入图片描述

耍前端

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web前端选择器的权重&CSS常见文本属性案例

Web前端选择器的权重&CSS常见文本属性案例CSS优先级（降序）1. 行内样式（<...style=" "...>） 3. 类选择器(.con{...}) 4. 标签选择器(div{...}) 5. 通用选择器(*{...})当样式发生冲突时，谁的谁的权重值高，谁就生效通用选择器 * (权重值0)标签（元素）选择器 div ，p…(权重值1)类（...
复制链接

扫一扫