[华为云WEB前端全栈成长计划]七、CSS的选择器

举报
TancyJimVonZ 发表于 2020/06/19 16:56:25 2020/06/19
【摘要】 前面我们简单的介绍了CSS，和CSS的基本操作，我们就是选择到要处理的元素，然后对这个元素进行样式的修改。

前面我们简单的介绍了CSS，和CSS的基本操作，我们就是选择到要处理的元素，然后对这个元素进行样式的修改。所以这一张我们学习选择器的相关知。

通配选择符

image.png

格式：*｛属性：属性指；}

我们需要注意的是在编程中几乎所有的编程语言都是用的是英文符号，这里我写成中文是因为看起来比较方便。以下是对比{}和｛｝前面是英文符号，后main是中文符号。

*代表无论什么元素都会被选择到，所以这个会对当前页面所有内容都会作用。

作用：设置公共属性

我们按照视频中的案例来说明。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
	</head>
	<body>
		<div style="background-color: yellow;">华为路由器</div>
		<p>使用5G技术</p>
		<ul>
			<li>5G是下一代通信技术</li>
		</ul>
	</body>
</html>

截图：

image.png

我们可以将鼠标悬停在右边的矩形框，查看margin、padding、border各自的分为是什么，其中margin和padding以后可能用的比较多。

当我们使用CSS样式把margin设置为0时，

如图：

image.png

我们发现与浏览之前的距离消失了，这说明会默认给我们增加一些属性，从开始的图中我们可以看到默认有margin:8px。margin在CSS中是外边距，而padding代表内边距。

我们继续将padding设置为0

image.png

发现列表的效果也不明显了，这是因为内边距没了。

元素选择器

image.png

这个我们前面简单介绍到。

格式：元素(或者标签)｛属性：属性值｝

作用：对某一类元素进行设置样式

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			span{
				color: red;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div style="background-color: yellow;">华为路由器</div>
		<p>使用5G技术</p>
		<div>
			<span>内容内容内容内容内容内容内容内容</span>
		</div>
		<span>容内容内容内容内容内容内容内容</span>
	</body>
</html>

截图：

image.png

尽管内容标签在div内部，但是还是能够被选择到。

id选择器

image.png

我们在代码标签中设置属性id="xxx"，然后就可以使用#xxx｛属性：属性值｝来选择到相应的标签，注意id的属性值不要相同。尽管id相同，也可以正常运行，但是我们使用id就是为了区别不同的元素。

注意设置id时，不能是数字开头，不能有空格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#span1 {
				color: red;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div style="background-color: yellow;">华为路由器</div>
		<p>使用5G技术</p>
		<div>
			<span id = "span1">内容内容内容内容内容内容内容内容</span>
		</div>
		<span id = "span2">容内容内容内容内容内容内容内容</span>
	</body>
</html>

类选择器

image.png

我们在代码标签中设置属性class="xxx"，然后就可以使用.xxx｛属性：属性值｝来选择到相应的标签，class属性值可以相同，它可以代表某一类。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#span1 {
				color: red;
				background-color: yellow;
			}
			.span2{
				color: #0000FF;
				background-color: yellow;
			}
			p.span2{
				color: #FF00FF;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div style="background-color: yellow;">华为路由器</div>
		<p>使用5G技术</p>
		<div>
			<span id = "span1">内容内容内容内容内容内容内容内容</span>
		</div>
		<div class="span2">容内容内容内容内容内容内容内容</div>
		<div class="span2">内容内容内容内容内容内容内容</div>
		<div class="span2">容内容内容内容内容内容内容</span>
		<p class="span2">内容内容内容内容内容内容</span>
	</body>
</html>

效果：

image.png

注意p.span2，这里本来打算叫div1的，请忽略这个细节，p.span2是元素选择器和类选择器连用的样式和效果。

属性选择器

image.png

属性选择器

格式：元素(标签)[被选属性]｛属性：属性值｝

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			div[x]{
				background-color: yellow;
			}
			div[x="def"]{
				background-color: red;
			}
			div[x~= "deff"]{
				background-color: #0000FF;
			}
			div[x |= "daff"]{
				background-color: rgb(128,128,128);
			}
			div[x="def1"]{
				
			}
		</style>
	</head>
	<body>
		<div x = "def">函数函数函数函数函数函数函数函数函数函数</div>
		<div x = "def1">函数函数函数函数函数函数函数函数函数</div>
		<div x = "def2  deff">数函数函数函数函数函数函数函数函数</div>
		<div x = "daff-xyz">数函数函数函数函数函数函数函数</div>
	</body>
</html>

效果：

image.png

这里注意一下，第三和第四个div里面x属性的赋值分别为def2 deff和daff-xyz，这就是包含和前缀的一般格式。

def1作为整个css样式的对照组

另外细看style中对颜色的赋值方式：

  1. 直接写英文

  2. 使用#加6位16进制的数字

  3. 使用rgb函数

伪类选择器

image.png

我们经常会发现一个a标签我们点击后和未点击他会呈现出两种颜色。这是两种状态点击前和点击后，那么我们能不能用css样式来改变呢。

image.png

请看代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			a:link{
				color: blue;
			}
			a:visited{
				color: black;
			}
			a:hover{
				color: red;
			}
			a:active{
				color: orange;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com">百度</a>
	</body>
</html>

效果图：因为涉及到动态操作，截图过多，所以可以自己查看效果

需要注意：以上顺序不要更改，因为涉及到存在多个状态。LoVe，HAte

派生选择器

image.png

image.png

image.png

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			/*元素选择器*/
			span{
				color: blue;
			}
			/*子代选择器*/
			/*p span{
				color: red;
			}*/
			
			/*子元素选择器*/
			/*p > span{
				color: pink;
			}*/
			
			/*相邻兄弟选择器*/
			span + span{
				color: orange;
			}
		</style>
	</head>
	<body>
		<div>华为云：<span>HCIA认证</span></div>
		<p>
			<span>HCIP认证<span>孙子span</span></span>
			<span>HCIE认证</span>
		</p>
	</body>
</html>

效果：

image.png

注意的是，子代选择器和子元素选择器的区别：可以这么理解，子代选择器会选中爷爷，爸爸，儿子。而子元素选择器会选择爷爷、爸爸或者爸爸、儿子，只会选择一代，这也取决于你对选择器的写法。

权重

当对一个标签的某一个属性指进行了多次赋值，最终呈现出来取决于权重最高的那个值。你可以理解为说话的权威性，你总会觉得书上印的比起别人告诉你的更具有准确性。(当然这个例子并不绝对)

image.png

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			div{
				color: green;
				color: blue;
			}
			.test{
				color: yellow;
			}
			#test{
				color: orange;
			}
		</style>
	</head>
	<body>
		<div id = "test" class="test" style="color: red;">权重测试权重测试权重测试权重测试权重测试</div>
	</body>
</html>

效果：

image.png

这里说明内联的权重就要高于其他的选择器。

注意！important

image.png

代码：

只是将!important写成了元素选择器color：green ！important；

最后还要注意：

div#test表示的意思

这个表示元素选择器和id选择器的权重进行相加为101，因此它的作用大于test。当两个都存在时，会是101权重的产生效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<style>
			div{
				color: green;
				color: blue;
			}
			.test{
				color: yellow;
			}
			#test{
				color: orange;
			}
			div#test{
			        color: pink;
			}
		</style>
	</head>
	<body>
		<div id = "test" class="test" >权重测试权重测试权重测试权重测试权重测试</div>
	</body>
</html>


【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
web前端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入