Question

我正在尝试了解如何在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/。

Answer 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

的所有儿童

Answer 2

.btn *指的是具有“btn”类的标签下面的所有儿童，孙子，孙子女等的标签。语法使用特殊类型的CSS选择器，称为 descendant selector 。

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

如何在CSS中使用*标签？

2 个答案: