软件测试基础-Web前端/CSS基本介绍/简单选择器/复合选择器（三）

鲜衣怒马，仗剑天涯

已于 2022-04-01 14:37:27 修改

阅读量1k

点赞数

分类专栏：前端相关文章标签：功能测试

于 2022-03-27 22:55:17 首次发布

本文链接：https://blog.csdn.net/weixin_42880611/article/details/123722147

版权

前端相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

web标准

所谓的 web标准指的就是用来衡量我们当前网页书写是否规范的一系列要求，这个标准是由W3C组织制定。在web标准中具体的要求就是结构、样式、行为三者分离。
1.结构： 就是指通过HTML 标签来搭建的网页架子。
2.样式： 指通过 CSS语言来对具体的HTML结构进行美化和修饰。
3.行为： 通过JavaScript(js) 让网页可以理解用户的一些操作，让用户与网页之间产生一些交互。

CSS基本介绍

一、定义： CSS（Cascading Style Sheets）在国内称之为级联样式表、层叠样式表、样式表，作用就是修饰当前网页中的HTML元素。
二、基本使用步骤：
1.CSS 和 HTML可以看作是两门相互独立的语言，如果想用 CSS来操作HTML 那么就需要先将二者建立链接。
2.此时 HTML 当中就准备了一个叫style 的标签（双标签），在这个标签对之间就可以用来书写我们的CSS代码。常见的存放位置可以是head 标签里title标签下。
3.依据CSS选择器找到想要操作的元素，给他设置样式，代码都是写在style标签之中。

1.常见的CSS元素属性.width 定义元素宽度单位 px,height 定义高度，background-color设置背景颜色。
2.CSSdiamagnetic书写固定语法：选择器{ CSS代码}
3.建议大家在开发阶段将CSS样式分行写，且每行的结尾用;结束。
CSS选择器：
定义： 所谓的CSS选择器就是CSS中已经定义好的用来选择某些元素的固定语法，他的作用就是选中我们想要设置样式的元素。
CSS选择器分类： 在CSS中有很多选择器，人为的分为两大类：简单选择器和复合选择器。
简单的选择器：
1.标签明选择器：通过具体的HTML标签名称来选择元素。使用标签选择器会将当前标签名
2.类名选择器：通过标签类名来选择元素。
3.id选择器：通过 id 名称选择元素。
类名选择器：
一、为什么使用类名选择器？
一个完整的网页需要很多标签组合在一起进行编写实现，因为HTML标签的种类有限，所以同名的一个标签有可能会子啊一个网页中出现多次，此时如果相对这些同名的标签分别设置不相同的样式，那么直接使用标签选择器就没有办法实现，这种情况就可以使用类名选择器。
二、类名选择器的基本使用步骤：
1.定义HTML 网页结构，然后再向选中的元素身上设置class 属性。
2.在想要一起选中的元素身上设置相同的class属性值（类名）。
3.在style标签中按照固定的语法来调用类名“.类名”；

ID选择器：
一、为什么需要id选择器？
如果想从一堆元素中选中其中的某一个元素，那么就可以使用id选择器，这个id就和人的身份证号一样唯一；
二、Id选择器使用步骤：
1.在想要选中的元素身上设置一个ID属性；
2.给这个ID属性设置一个值，称为ID名；
3.在style中通过固定的语法进行调用： #ID名；
注意：要求在一个网页中不能出现同名的ID值。

简单选择器总结：
1.标签名选择器和类名选择器默认一次性选中多个元素，ID名选择器一次只能选中一个元素。
2.一个标签身上可以具有类名，又具有ID名。
3.允许一个标签身上设置多个类名，多个类名之间要用空格隔开；
4.关于ID选择器，同一个页面当中同一个ID名称只能出现一次。
ID名和类名命名规则：
1.名称不能是纯数字或数字开头（可以已数字结尾）；
2.名称不能是中文，或者包含中文（虽然有效，但不能用）；
3.名称不能以特殊字符开头，或者包含特殊字符~~~!@#$%^&*()~~ “ _，-“除外；
4.名称尽可能的见名知意。

元素展示类型：
在HTML当中本身定义了很多的元素，这些元素在网页中展示的时候存在自己的默认状态。例如有些元素在默认情况下宽高元素不起作用，有些元素默认情况下都独占一行显示。这种现象就称为元素展示类型，大概分为三种：块元素、行内元素和行内块元素。
1.块元素： 当同时存在多个块元素的时候，每个块元素都会独占一行显示，且默认情况下它的宽高属性可以起作用。
2.行内元素： 当同时存在多个行内元素的时候，这些元素都会显示在一行，如果一行放不下自动换行，默认情况下它的宽高属性不起作用。
3.行内块元素： 当同时存在多个行内块元素的时候，这些元素会显示在一行，默认情况下它的宽高属性起作用。

注意：不需要去死记元素类型。
补充：
1.div标签： 它是HTML 当中定义好的一个双标签（DIV+CSS），我们人为的认为他是一个体积最大的标签；
2.span标签： 它是一个双标签，主要用来放文字，体积很小。
3.段落标签不能包裹标题，浏览器不能正常解析。

元素展示类型转换
在进行网页布局过程中往往会遇到一些特殊模块，对于这种模块来说我们之前的一些常见的标签，在使用的时候就会显示”语义“有些不对应，所以我们可以使用相应的标签进行强制的类型转换，从而让它可以展示成设计稿上的样子。在CSS当中有一个display属性，可以设置不同的值来完成元素类型的转换。
1.转成块元素： display：block；
2.转成行内块： display：inline-block
3.转成行内元素： display：inline ; none

简单选择器权重

权重： 不同类型的CSS选择器在对同一个元素进行样式设置的适合，出现的控制能力不同的现象。
对于简单选择器来说：ID选择器 > 类名选择器 > 标签名选择器。
CSS特性：
1.在权重相同的情况下，同一个元素后写的CSS样式会覆盖先写的CSS样式 【覆盖性】 。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单选择器权重</title>
		<style type="text/css">
			#box{
				background-color: pink;
			}			
			.box{
				background-color: #007AFF;
			}			
			div{
				width: 100px;
				height: 100px;
				background-color: #FFD700;				
			}			
		</style>
	</head>	
	<body>
		<!-- 权重：如果使用不同的CSS选择器去选中同一个元素时，这些选择器对元素的控制能力我们称之为权重。 -->
		<div id="box" class="box">我是DIV标签</div>		
	</body>
</html>

2.CSS的定义存在继承特点，子元素会继承父元素的一些样式 【继承性】。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>继承性</title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: seagreen;
			}
			p{
				height: 100px;
				background-color: #007AFF;
			}
			span{
				background-color: #FF0000;
			}
			/* 1.继承性指的就是子元素可以去继承父元素的一些样式
			 2.不是所有的样式都能继承
			 3.不是所有的元素都会有继承的特点*/
		</style>
	</head>
	<body>
		<div id="">
			<p>我是P标签</p>
			<span id="">我是span标签</span>
			
		</div>
	</body>
</html>

3.不同选择器对同一元素的CSS控制能力存在着强弱 【优先级】 。

复合选择器

一、为什么需要复合选择器？
在实际的网页制作过程中往往会出现很多结构层级嵌套很深的现象，而这种结构模块又很多，大家使用的标签模块又一样，所以此时就可以通过复合选择器，将这些简单的选择器进行组合，从而让训责元素变得简单
二、常见的复合选择器
1）.后代选择器： 这种选择器就是以某一个元素为起点，将它作为祖先然后不停的向下进行穿透查找，去选择它下面的后代元素。
语法：起点元素后代元素…{样式设置}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后代选择器</title>
		<style type="text/css">
			/* div span含义：以div为起点，将它作为要给祖先元素，然后查找后代里边标签名字叫span的元素 */
			div span{
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>
				<span>我是孙辈的span</span>
			</p>
			<span>
				我是子辈的span
			</span>			
		</div>
	</body>
</html>

注：

后代选择器当中的每个部分都可以采用任意的简单选择器代替。
不同的层级之间要用空格隔开。
…表示可以不停的向下嵌套。

2）.并列选择器： 就是将多个选择器使用逗号进行连接，表示同时选中这些元素，然后设置相同的样式。
语法：元素1，元素2，…{样式设置}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>并列选择器</title>
		<style type="text/css">
			/* 快捷注释：ctrl + / */
			/* h4,p的含义是将H4和P标签设置成一样的格式 */
			h4,p{
				width: 100px;
				height:100px;
				background-color: #008000;
			}
			/* .one span,p 的含义：将H4下边的span和P标签设置成一样的样式 */
			.one,p{
				width: 200px;
				background-color: #FFC0CB;
			}
		</style>
	</head>
	<body>
		<!-- 将H4和P标签样式设置相同 -->
		<h4 class="one">我是H4标签
			<span>H4里边的span标签</span>		
		</h4>
		<p>我是P标签</p>
		<a href="#">我是a标签</a>
	</body>
</html>

选择器总结

1.简单选择器：ID名 > class名 >element名
2.复合选择器：由多个其它类型选择器组合而成，为了方便比较，人为的给每个简单选择器定义一个数值，分别是ID(100) 、class（10）、 ele(1) 这三个数值称为权重值，只需要将当前选择器中出现的权重值进行相加，最终的结果就是该选择器的权重，数值越大，权重越大。
3.权重比的就是不同选择器对同一个元素的控制比较（区别继承的影响）