* 标签如何在 CSS 中使用？答案

【问题标题】：How * tag can be used in CSS?* 标签如何在 CSS 中使用？
【发布时间】：2010-07-13 19:04:38
【问题描述】：

我正在尝试了解如何在 CSS 按钮中使用背景图像。看起来图像比按钮大得多，但角仍然与按钮匹配（导致圆角按钮）。它似乎与.btn * 有关。我找不到任何关于如何使用 * 的参考资料。你能解释一下图像是如何在按钮中呈现的，使用*标签吗？

我假设* 将匹配任何元素。但是我不明白在这种情况下图像是如何呈现的。

.btn {
display: block;
position: relative;
background: #aaa;
padding: 5px;
float: left;
color: #fff;
text-decoration: none;
cursor: pointer;
}

.btn * {
font-style: normal;
background-image: url(btn2.png);
background-repeat: no-repeat;
display: block;
position: relative;
}

此处为完整示例：http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors/。

【问题讨论】：

标签： css css-selectors

【解决方案1】：

来自 btn.html，第 17 行。

.btn span {
  background-position:left bottom;
  left:-5px;
  margin-bottom:-5px;
  padding:0 0 5px 10px;
}

上面的选择器负责圆角。（具体是background-position）
尝试将background-position 的值更改为right bottom 或top left，您将看到变化。

.btn * CSS 定义将适用于 btn 类的所有子类

【讨论】：

:)。此外，您可以为background-position: 10px 10px 赋值

【解决方案2】：

.btn * 指的是具有“btn”类的标签下方的所有标签，即孩子、孙辈、孙辈的孩子等。该语法使用一种特殊类型的 CSS 选择器，称为 descendant selector。

.btn 特指所有具有“btn”类的标签。

【讨论】：