day04权重计算以及css基础属性

最新推荐文章于 2024-06-17 19:23:30 发布

GT.Lee

最新推荐文章于 2024-06-17 19:23:30 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

分类专栏：日志文章标签： IT

本文链接：https://blog.youkuaiyun.com/LGT970116/article/details/82750040

日志专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了CSS中各种选择器的使用方法及其优先级计算原则，并探讨了不同类型的HTML元素及其显示行为。此外，还分享了一些实用的开发经验和技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

day04
前一天学习了基础与部分复杂选择器以及优先级，而选择器设计到权重计算问题。

选择器	权重
！important	Infinity
行间样式	1000
id	100
class\属性\伪类	10
标签\伪元素	1
通配符	0

当css涉及到父子、并列等复杂选择器时，需比较权重大小，权重大的覆盖小的，权重相同时，后面覆盖前面。
伪类选择器
html

<a href="https://www.taobao.com">www.taobao.com</a>

css

a:hover{
	background-color:orange;
	text-decoration:none;
}

一、元素
1、行级元素、内联元素 inline
feature：内容决定元素所占位置，不可以通过css改变宽高
span strong em a del

2、块级元素 block
feature：独占一行，可以通过css改变宽高
div p ul li ol form address

3、行级块元素 inline-block
feature：内容决定大小可以改变宽高
img src=""

二、元素可以改属性
例如：

span{
	display:block;
	width:100px;
	height:100px;
	background-color: red;
}

使span表现为block,即可通过css改变宽高。

三、css可以修改标签样式

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<em>123</em>

<a href="https://www.baidu.com/" target="_blank">www.baidu.com</a>

css

ul{
	list-style: none;
	padding: 0;
	margin: 0;
	 }

em{
	font-style: normal;
	}

a{
	text-decoration: none;
	 }

可去掉标签自带的样式。如去除ul的圆点、em的斜体效果以及a标签的下划线。

四、开发小经验

1、凡是带inline的元素，都有文字特性，有间距。
如img，css写好需要打包压缩，如果用margin嵌入方法处理，会造成图片效果达不到要求。img标签之间应该不留空隙。

<img src="a.jpg" alt=""><img src="b.jpg" alt=""><img src="c.jpg" alt="">

2、在开发过程中，很多部分可选择先写css,再写html。
css

.green{
	background-color: green;
}

.red{
	background-color: red;
}

.gray{
	background-color: gray;
}

.size1{
	width:100px;
	height:100px;
}

.size2{
	width:200px;
	height:200px;
}
.size3{
	width:300px;
	height:300px;
}

html

<div class="green size1">1</div>
<div class="green size2">2</div>
<div class="green size3">3</div>
<div class="red size3">4</div>
<div class="gray size2">5</div>
<div class="red size1">6</div>

由于class具有多对多的属性，因此可自由选择嵌套，简化代码量。

                                                                2018.8.17