Как тег * можно использовать в CSS?

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, называемый селектор потомков .

.btn относится конкретно ко всем тегам, которые имеют класс "btn".