揭秘CSS黑魔法：层叠、继承和选择器的奥秘

2023-09-03 07:57:47

CSS层叠、继承和选择器：掌握样式的艺术

CSS层叠

当多个样式规则应用于同一元素时，CSS层叠决定了最终生效的样式。权重和特异性是关键因素。权重是一个数字，表示样式规则的重要性；权重更高的规则优先级更高。特异性则表示选择器的匹配程度，选择器类型和数量越多，特异性就越高。

/* 权重：3 */
p {
  color: red;
}

/* 权重：5 */
#id {
  color: blue;
}

/* 权重：10 */
p#id {
  color: green;
}

在这个例子中，p#id具有最高的权重和特异性，因此它的样式（绿色）将被应用。

CSS继承

元素可以从其父元素继承样式，例如字体、颜色和边框。继承可以简化样式编写，但也要注意样式冲突和难以控制。

/* 父元素 */
div {
  font-size: 16px;
}

/* 子元素 */
p {
  /* 继承父元素的字体大小 */
  font-size: inherit;
}

CSS选择器

CSS选择器用于选择要应用样式的元素。有各种类型，包括元素选择器、类选择器、ID选择器、属性选择器、伪类选择器和伪元素选择器。

/* 元素选择器 */
p {
  color: red;
}

/* 类选择器 */
.my-class {
  background-color: blue;
}

/* ID 选择器 */
#my-id {
  border: 1px solid black;
}

实践应用

利用这些概念，我们可以创建高质量的样式代码。

案例一：美化按钮

button {
  font-family: Arial, sans-serif;
  background-color: #007bff;
  color: #ffffff;
  border: 1px solid #007bff;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
}

.btn-primary {
  background-color: #007bff;
  color: #ffffff;
}

.btn-success {
  background-color: #28a745;
  color: #ffffff;
}

案例二：布局页面

#container {
  width: 1000px;
  border: 1px solid #000;
  margin: 0 auto;
}

#header {
  height: 100px;
  background-color: #000;
  color: #fff;
}

#navigation {
  height: 50px;
  background-color: #fff;
  color: #000;
}

#content {
  width: 800px;
  border: 1px solid #000;
  margin: 0 auto;
}

#footer {
  height: 100px;
  background-color: #000;
  color: #fff;
}