Question

＆＃13;

while(!kbhit());

＆＃13;

@charset "utf-8";

html, body {
	margin: 0px;
	font-family: Helvetica, sans-serif;
	min-height: 100%;
	height: 100%;
}

.center-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	/*height: 500px;*/
}

.main-container {
	/*height: 100%;*/
	
}


	
.darktitle {
	color: #000000;
	background: grey;
	font-size: 25px;
}

.titlebar {
	text-align: center; 
	color: #FF0000;
	background: blue;
	font-size: 40px;
}



button {
	padding: 00px;
	font-weight: bold;
	
	font-size:1em;
	font
	
	color: #000000;
	height: 40px;
	width: 200px;
}

＆＃13;

嘿，地球人，

我开始学习HTML和CSS。目前我正在处理样式类。我创建了一个简单的例子。我想要达到的是，如果单击button1，标题栏会更改字体颜色，字体大小和背景颜色。

最初标题栏附加了标题栏类，单击button1后，还应添加darktitle-class并覆盖某些属性。但是在这种配置中它并没有发生。如果在css文件中更改.darktitle和.titlebar类的顺序，它就可以工作。我想知道为什么。

CSS样式应该处于相同的优先级，所以我希望稍后分配的样式会覆盖属性。

TNX

Answer 1

@charset "utf-8";

html, body {
	margin: 0px;
	font-family: Helvetica, sans-serif;
	min-height: 100%;
	height: 100%;
}

.center-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	/*height: 500px;*/
}

.main-container {
	/*height: 100%;*/
	
}

.titlebar {
	text-align: center; 
	color: #FF0000;
	background: blue;
	font-size: 40px;
}

.darktitle {
	color: #000000;
	background: grey;
	font-size: 25px;
}


button {
	padding: 00px;
	font-weight: bold;
	
	font-size:1em;
	font
	
	color: #000000;
	height: 40px;
	width: 200px;
}

<!DOCTYPE html>
<html lang="de">
<head>
	<link href="styles/styles.css" rel="stylesheet"/>
	<meta charset="utf-8">

</head>
	<body>
		<div class="main-container">
			<h1 id="titlebar" class="titlebar"> Titlebar</h1>
			<div class="center-container" >
					<button id="button1">Button1</button>
					<button id="button2">Button2</button>
					<button id="button3">Button3</button>
			</div>
		</div>
		<script>
			var titlebar = document.querySelector('h1#titlebar');
			var button1 = document.querySelector('#button1');
			var button2 = document.querySelector('#button2');
			var button3 = document.querySelector('#button3');

			button1.addEventListener('click', function() {
				titlebar.innerHTML = 'Button1';

				var result = titlebar.classList.contains('darktitle');
				console.log(result);
				titlebar.classList.add('darktitle');
				var result = titlebar.classList.contains('darktitle');
				console.log(result);

			});
		</script>
	</body>
</html>

当两个选择器应用于同一元素时，css选择器的顺序很重要。将“.darktitle”移动到“.titlebar”下面，如本例所示。然后，当按钮应用时，“。darktitle”sstyles将覆盖“.titlebar”中的相同属性。

请查看有关CSS特异性的链接，在那里您将了解您的问题以及为何不使用！重要声明。

Specificity at MDN

Answer 2

你可以使用！important覆盖这样的样式

.darktitle {
    color: #000000!important;
    background: grey!important;
    font-size: 25px!important;
}

添加CSS类以更改HTML元素的样式

2 个答案: