【问题标题】:Hover syntax difference悬停语法差异
【发布时间】:2011-10-22 13:09:44
【问题描述】:

有什么区别:

a.cvc-formsHelpText:hover {
text-decoration:none;
}

还有:

.cvc-formsHelpText:hover {
text-decoration:none;
}

HTML 是:

<a class="cvc-formsHelpText" href="javascript: void(0)">
<img src="img.gif">
<span>Text.</span>
</a>

第一个有效,第二个无效,但都引用&lt;a&gt;标签。

【问题讨论】:

  • 对不起,我忘了点。但是对于点,第二个块也不起作用。
  • 天啊,所以我们所有的答案现在都无关紧要了。现在这完全是一个特异性问题。

标签: css hover css-selectors


【解决方案1】:

cvc-formsHelpText 是一个类。你需要一个 ”。”如果您想对其进行样式设置,请在其前面。

.cvc-formsHelpText:hover {
text-decoration:none;
}

【讨论】:

    【解决方案2】:

    它根本与悬停无关。

    #id element.class:pseudo-selector {
      property: value;
    }
    

    这是一般语法。第一个选择器之所以有效,是因为它选择了 cvc-formsHelpText 类,而不是试图徒劳无功地定位一个不存在的 cvc-formsHelpText 元素

    【讨论】:

      【解决方案3】:

      cvc-formsHelpText:hover 表示:一个名为cvc-formsHelpText 的元素,悬停在上面。例如&lt;cvc-formsHelpText&gt;,它不存在。

      a.cvc-formsHelpText:hover 表示:&lt;a&gt; 标签,类cvc-formsHelpText,悬停。

      【讨论】:

        【解决方案4】:

        当您说第二个不起作用时,问题是您省略了一个点,正如 BoltClock 指出的那样:.cvc-formsHelpText

        关于这两种语法的区别,前者表示元素必须是类cvc-formsHelpText的锚点。后一个选择器(前提是您包含已省略的点)适用于类cvc-formsHelpTextany 元素。显然,如果只有锚元素包含该类,则您的网站行为方式不会有明显的差异。

        【讨论】:

          【解决方案5】:

          第一个表示找到所有“a”标签,CSS“class”属性具有“cvc-formsHelpHext”。第二个查找名为“cvc-formsHelpHext”的标签,这不是您想要做的。

          【讨论】:

            【解决方案6】:

            a.blah 为锚标签(“a”标签)定义了一个类。 .blah 为任何标签定义了一个类。

            【讨论】:

              猜你喜欢
              • 2013-03-27
              • 1970-01-01
              • 1970-01-01
              • 2015-08-28
              • 1970-01-01
              • 1970-01-01
              • 2012-07-06
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多