Question

我不明白是否应该在修改标签之前或之后指定课程。

我的样式表中的以下内容适当地修改了div：

div.idea {
  margin: 0.1cm;
  }

以下内容不是：

.idea div {
      margin: 0.1cm;
}

然而，以下不修改我的锚：

a.idea {
      color: Orange;
}

以下是：

.idea a {
      color: Orange;
}

解释

Answer 1

div.idea表示div类idea

.idea div表示具有类div

的元素中的idea

他们瞄准不同的元素。如果没有看到您的HTML，就无法解释为什么您正在目睹您解释为异常的行为。

Answer 2

空间非常重要。空间意味着“孩子”。没有空间意味着“和”。

所以：

div.idea：类idea

的div

<DIV class="idea"></DIV>

div .idea：具有“想法”类的孩子，父母是div（在其上方的任何地方）

<DIV>
  <DIV class="idea"></DIV>
</DIV>

Answer 3

CSS选择器：

div.idea { ...  // a div that has a class="idea"
.idea div { ... // any div, that has a parent (or ancestor) that has a class="idea"
a.idea { ...    // an <a> element which has a class="idea" ( <a class="idea">text</a> )
.idea a { ..    // an <a> element which has a parent (or ancestor) of any element type (not only div) which has a class="idea"

咨询CSS selectors，尤其是class selectors

Answer 4

在使用类选择器之前，你没有需要来指定任何元素 - 它只是增加了一层特异性。

你的第一个例子：

div.idea {
  margin: 0.1cm;
}

这将首先选择所有div元素，然后将它们限制为具有类idea的元素。

你的第二个例子：

.idea div {
      margin: 0.1cm;
}

选择类idea的所有元素，然后选择这些元素的所有子元素。

这两个表达式等同于不同的东西：

div.idea选择具有类想法的div .idea div选择idea元素为div的子元素

实际上，空间会让您选择孩子

Answer 5

你的css选择器假设以下

div.idea {margin：0.1cm;}

<div class="idea" id="iGetStyled">...

.idea div {margin：0.1cm;}

<div class="idea"><div id="iGetStyled">...

a.idea {color：Orange;}

<a class="idea" id="iGetStyled">...

.idea a {color：Orange;}

<div class="idea"><a id="iGetStyled">...

id="iGetStyled"会向您显示要设置样式的项目

之前或之后的css类说明符，没有一致吗？

5 个答案: