如何使用 CSS 选择器来设置元素的样式?

cssweb developmentfront end technology更新于 2025/1/7 5:32:17

使用 CSS 选择器，我们可以根据自己的偏好来设置所需元素的样式。在 HTML DOM 中选择元素的方法有很多种。

语法

CSS 选择器的语法如下 −

Selector {
   /*declarations*/
}

以下示例说明了用于样式元素的 CSS 选择器 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
#one {
   filter: invert(85%);
}
</style>
</head>
<body>
<img id="one" src="https://www.cainiaomax.com/hadoop/images/hadoop-mini-logo.jpg">
<img src="https://www.cainiaomax.com/plsql/images/plsql-mini-logo.jpg">
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
div, p {
   margin: 4px;
   float: left;
   height: 200px;
   width: 300px;
   box-shadow: inset 0 2px 4px olive;
   background-image: url("https://www.cainiaomax.com/sas/images/sas-mini-logo.jpg");
}
p {
   background-image: url("https://www.cainiaomax.com/qlikview/images/qlikview-mini-logo.jpg");
   background-position: 50% 50%;
   color: black;
}
</style>
</head>
<body>
<h2>Learning Tutorials</h2>
<div></div>
<p>Tutorials</p>
</body>
</html>