CSS面试题复习

最新推荐文章于 2024-07-18 14:29:38 发布

真的不想起床

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量69

点赞数

分类专栏：面经文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_45985175/article/details/120834232

版权

面经专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、选择器的权重和优先级

选择器

●通用选择器 *{属性：属性值}它的作用是匹配 html 中的所有元素标签。
●ID 选择器 #S{...} （S为选择器名）
●类选择器.S{...} （S为选择器名）
●标签选择器S{...} （S为标签名）
●包含选择器 A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式
●子选择器A>B{...}
●兄弟选择器是CSS3.0新增的一个选择器 A~B{...}

权重

● 从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0

优先级

● 权重相同，写在后面的覆盖前面的
● 使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高

总结

● 常用选择器权重优先级：!important > id > class > tag
● !important可以提升样式优先级，但不建议使用。如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被应用上!important。例如：background: blue !important;background里的所有子属性都变成了!important
● 如果两条样式都使用!important，则权重值高的优先级更高
● 在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的
● 样式指向同一元素，权重规则生效，权重大的被应用
● 样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用
● 样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式应用于非目标标签时</title>
		<style>
			div p{color: red};
			#box{color: blue}
		</style>
	</head>
	<body>
		<!-- 选中非目标元素的情况下，离目标越近者优先 -->
		<div id="box">
		  <p>
		    <span>神来之笔</span>
		  </p>
		</div>
	</body>
</html>

● 内联样式的优先级并不一定比外联样式高，因为css样式是单线程，依次从上向下加载的，这也就证明了内联样式和外联样式的优先级和加载顺序有关。

总结一下：!important > 行内样式 > 内联样式 and 外联样式

参考链接

● https://zhuanlan.zhihu.com/p/41604775

2、Flex

● 弹性盒布局，CSS3 的新属性，用于方便布局，比如垂直居中
● flex属性是 flex-grow、flex-shrink 和 flex-basis 的简写

●https://blog.csdn.net/weixin_45985175/article/details/118635880
● https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

真的不想起床

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS面试题复习

1、选择器的权重和优先级选择器●通用选择器 *{属性：属性值}它的作用是匹配 html 中的所有元素标签。●ID 选择器 #S{...} （S为选择器名）●类选择器.S{...} （S为选择器名）●标签选择器S{...} （S为标签名）●包含选择器 A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式●子选择器A>B{...}●兄弟选择器是CSS3.0新增的一个选择器 A~B{...}权重● 从0开
复制链接

扫一扫