Question

我正在尝试理解CSS机制，但到目前为止教程并不是一个很好的来源。它们只划伤表面。

我需要了解使用#navlist li #current和#navlist li .current之间的根本区别。

这些名称不是通用的，以便成为一个非常实用的例子。

我认为不同的是：

#navlist li #current

如果应用于父元素li内的#navlist元素，则会绕过任何继承的格式以显示#navlist li #current格式。

另一方面：

#navlist li .current

将应用其格式，但也会继承其他格式。

在这个例子中：

#navlist li a:hover
{
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}

#navlist li .current
{
  color: #000;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

<ul id="navlist">
    <li><a href="#" class="current">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Destinations</a></li>
    <li><a href="#">Discuss</a></li>
</ul>

标签为白色，黑色字体，但会应用悬停。

使用另一个例子：

#navlist li a:hover
{
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}

#navlist li #current
{
  color: #000;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

<ul id="navlist">
        <li><a href="#" id="current">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Destinations</a></li>
        <li><a href="#">Discuss</a></li>
</ul>

#current已应用，没有其他任何内容，即使鼠标悬停在标签上，也会将标签保留为白色。

是吗？

Answer 1

是吗？

烨。这是因为a:hover比.current更具体，但小于#current。因此，您的悬停样式将覆盖您的类样式，但您的ID样式不会受到影响。

a:hover比.current更具体，因为它结合了类型选择器和伪类选择器。由于:hover，这会击败一个类选择器（尽管.current和a具有同等的特异性）。

#current比a:hover更具体，因为ID始终是最具体的，即使您在悬停样式规则的选择器中组合了大量非ID也是如此。

Answer 2

是。（似乎特异性是BoltClock说的原因）

此页面将告诉您浏览器如何阅读您的css选择器：http://www.css-101.org/descendant-selector/go_fetch_yourself.php

记住：id是唯一的，只能用于1个元素;但是类可以用于多个元素和标记

注意：实际上两个规则都选择相同的元素并应用。如果你在#navlist li a：hover中写更多内容，当鼠标悬停在#current上时会出现那些非重叠的繁荣（所以调用'cascading'）

更多：您需要了解的一些关键字/概念：继承/级联，css选择器，css特异性，伪类

P.S。尝试使用jsbin / jsfiddle / cssdesk进行css测试 - 从实践中学习：D

Answer 3

我认为您的问题中存在一些语法错误。这种风格：

#navlist li .current

将定位LI的子元素，如下所示：

<ul id="navlist">
     <li>
          <a href="#" class="current">Foo</a>
     </li>
</ul>

我假设您打算在LI本身上放置“当前”的类或ID。如果是这样，您的规则应该类似于：

#navlist li.current //'li'和'.current'之间没有空格

还要记住，ID比CSS中的Classes更“加权”。因此，如果您有两个结构相同的规则，但一个使用ID而另一个使用一个类，那么ID规则将胜过类规则。它们将同时发布，但ID规则将最后应用。如果您正在进行字体大小调整，这一点很重要，其中规则是累积的，而不是仅仅相互覆盖。

#navlist li #current和#navlist li .current之间的区别

3 个答案: