选择器前的CSS空间 [英] CSS space before selector

问题描述

我一直在努力理解为什么HTML元素没有选择这个简单的CSS类选择器.

.label-hi :before {
    color:green;
    content: "Hi ! ";
}

解决方案

简单选择器之间的空间是后代组合器.如果是两个用空格隔开的普通选择器，则意味着与第二个选择器匹配的元素，放置在与第一个选择器匹配的元素内的任何位置".由于第二个选择器是伪元素，因此整个选择器等效于.label-hi *:before，可能会将某些内容插入到 any 元素内部类别为label-hi的元素中.

I was struggling to understand why this simple CSS class selector was not being picked by my HTML element.

.label-hi :before {
    color:green;
    content: "Hi ! ";
}

解决方案

The space between simple selectors is a descendant combinator in CSS. If it were two ordinary selectors separated with space, it would mean 'element matching the second selector, placed anywhere inside the element matching the first selector'. Since the second selector is a pseudo element, the whole selector is equivalent to .label-hi *:before, potentially inserting something into any element inside the element with class label-hi.

这篇关于选择器前的CSS空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！