class下空格多个类的样式影响总结

最新推荐文章于 2024-05-27 09:00:00 发布

圈点Studio

最新推荐文章于 2024-05-27 09:00:00 发布

阅读量575

点赞数

分类专栏： JavaScript css html 文章标签： javascript css js html css3

本文链接：https://blog.csdn.net/Cml_l/article/details/111308318

版权

JavaScript 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

1.标签属性class

2.class下空格添加多个属性值

3.样式对class下多个属性的影响规律

4.对DOM操作的影响

1.略

选择器有好几个，包括他们各自的优先级，没有了解过的可以先行了解一下。

2.class下可以添加多个值，使用空格隔开，这样就可以分开写css然后共同作用。

<div class="myclass01 myclass02">
	两个class
</div>

3.影响规律。

01.和class值内顺序先后无关

02.和样式先后有关

021.后引入覆盖先引入

022.后书写覆盖先书写

4.对DOM操作的影响

首先我们回顾一下应用样式的3中方式【行内样式表】、【内部样式表】、【外部样式表】

看到名字大家应该就知道了，不做拓展了。

js对dom的操作是作用在行内样式的。

所以我们不做样式修改的尝试了。

我们只做节点获取测试。

<div class="myclass04 myclass05">
			特点性两个class01<br>
			class="myclass04 myclass05"
		</div>
		<!-- 类名先后对样式的作用没有影响 -->
		<div class="myclass05 myclass04">
			特点性两个class02<br>
			class="myclass05 myclass04"
		</div>
<!-- 下面两个用于练习dom -->
		<div class="myclass04">
			单独的myclass04
		</div>
		<div class="myclass05">
			单独的myclass05
		</div>
		<script type="text/javascript">
			var mydiv=document.getElementsByClassName("myclass04");
			console.log(mydiv.innerHTML);//undefined
			console.log(mydiv[0].innerHTML);//第一个含有"myclass04"的标签内容
			console.log(mydiv[1].innerHTML);//第二个含有"myclass04"的标签内容
			console.log(mydiv[2].innerHTML);//第三个含有"myclass04"的标签内容
			
			var mydiv02=document.getElementsByClassName("myclass04 myclass05");
			//和第一个一样
			console.log(mydiv02.innerHTML);//undefined
			console.log(mydiv02[0].innerHTML);//第一个含有"myclass04"的标签内容
			console.log(mydiv02[1].innerHTML);//第二个含有"myclass04"的标签内容
			//console.log(mydiv02[2].innerHTML);报错
			
			var mydiv03=document.getElementsByClassName("myclass05 myclass04");
			//和第一个一样
			console.log(mydiv03.innerHTML);//undefined
			console.log(mydiv03[0].innerHTML);//第一个含有"myclass04"的标签内容
			console.log(mydiv03[1].innerHTML);//第二个含有"myclass04"的标签内容
			//console.log(mydiv03[2].innerHTML);报错
			console.log(mydiv03);//打印出class属性值为"myclass05 myclass04"/"myclass04 myclass05"的两个标签和标签内容
		</script>

01.当js获取单个class名值时，只要class属性值里面含有该值就都会被取到。

02.当js获取多个class名值时，只有class属性值和js获取值相同，但顺序不相同/相同的tag会被获取到。

03.当js获取多个class名值时，只有单个值符合的tag不会被获取到。

代码：

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>class多类学习</title>
		<link rel="stylesheet" type="text/css" href="css/01.css"/>
		<!-- 后引用的会覆盖先引用的 -->
		<link rel="stylesheet" type="text/css" href="css/02.css"/>
	</head>
	<body>
		<div class="myclass01">
			普通的单个class
		</div>
		<div class="myclass02 myclass03">
			普通的两个class
		</div>
		<div class="myclass04 myclass05">
			特点性两个class01<br>
			class="myclass04 myclass05"
		</div>
		<!-- 类名先后对样式的作用没有影响 -->
		<div class="myclass05 myclass04">
			特点性两个class02<br>
			class="myclass05 myclass04"
		</div>
	</body>
</html>

css01

div{
	border: 1px solid #240646;
	width: 300px;
}
.myclass01{
	width: 300px;
	height: 200px;
	background-color: aquamarine;
	}
.myclass02{
	width: 300px;
	height: 200px;
	background-color: aquamarine;
	}
.myclass03{
	font-size: 2em;
	color: brown;
	}

.myclass05{
	width: 300px;
	height: 200px;
	background-color: #FFFF00;
	}
/* 出现相同的属性时,后写的会覆盖先写的 */
.myclass04{
	background-color: #A52A2A;
	}

css02

.myclass04{
	background-color: #A52A2A;
	}
.myclass05{
	width: 300px;
	height: 200px;
	background-color: #FFFF00;
	}

圈点Studio

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
class下空格多个类的样式影响总结

1.标签属性class2.class下空格添加多个属性值3.样式对class下多个属性的影响规律4.对DOM操作的影响1.略选择器有好几个，包括他们各自的优先级，没有了解过的可以先行了解一下。2.class下可以添加多个值，使用空格隔开，这样就可以分开写css然后共同作用。<div class="myclass01 myclass02"> 两个class</div>3.影响规律。01.和class值内顺序先后无关02.和...
复制链接

扫一扫