软件测试基础——CSS（五）_css书写位置测试点-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41260235/article/details/111036512

本文介绍了CSS的优先级规则，包括ID选择器、类选择器和标签选择器的权重对比，以及CSS的三种引入方式及其权重差异。还讨论了后代选择器、并列选择器的概念，并提到了如何通过`!important`提升样式优先级。此外，文章还涵盖了边框属性、盒子模型以及HTML5的新标签如音频和视频的测试要点，特别强调了在不同浏览器版本，尤其是低版本IE中的兼容性测试。

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

一、优先级（权重）

在给同一个标签设置样式的时候，才有所谓的优先级权重对比

id选择器>类选择器>标签选择器

二、CSS的书写位置（引入方式）

1、内嵌式CSS：代码写在style标签中，放在head标签里，title标签下；

2、外链式CSS：CSS代码单独写在CSS文件中，通过link标签里面的href设置的路径选中（实现CSS与HTML的分离，修改代码容易查找）；

3、行内式CSS：CSS代码写在HTML标签上（不推荐使用，修改不方便，造成代码量增多，降低页面打开速度，影响用户体验）

测试点：电商网站首页必须使用内嵌式（外链式打开速度比内嵌式慢），其他页面使用外链式（易修改）

三、后代选择器

div span{}

在CSS选择器中如果出现空格，代表寻找；后代（包括儿子、孙子...）

四、并列、并集选择器

div, span, #idname, .classname{}

使用","连接想要一起设置相同样式的元素

五、引入方式（书写位置）权重对比

（内嵌=外链）< 行内

注意：可以添加“ !important ” 来提高权限

xxx{color: red!important;}

六、高级权重对比

只要是给同一个标签设置的样式，就会根据祖宗的权重大小来定优先级

七、了解边框属性

给页面中的元素添加的外围边框线属性（边框/描边）；

八、盒子模型

边框+内容+内边距（内填充、padding）+外边距（外填充、margin）组合起来叫盒子模型

九、HTML5新标签

音频

<audio src="Taylor Swift - Lover"></audio>

视频

<video width="800" height="">
	<source src="myvideo.mp4" type="video/mp4"></source>
	<source src="myvideo.ogv" type="video/ogg"></source>
	<source src="myvideo.webm" type="video/webm"></source>
	<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
		<param name="movie" value="myvideo.swf" />
		<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
	</object>
	当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>

都有兼容性问题，测试时要打开IE、火狐、谷歌三大浏览器查看是否能正常运行