CSS类选择器

我更喜欢服务器端的人，所以对于下面的css示例，我了解前两组css选择器在做什么。CSS类选择器

我不明白第三。

由于home类只在html中出现一次，所以指定类两次似乎是多余的。这来自网站clearleft.com。最后一组选择器的目的是什么？

在此先感谢。

<ol id="nav"> 
    <li class="home"><a href="/">Home</a></li> 
</ol> 

#nav li.home a, 
#nav li.home a:link, 
#nav li.home a:visited { 
    background-position: 0 0; 
} 

#nav li.home a:hover, 
#nav li.home a:focus, 
#nav li.home a:active { 
    background-position: 0 -119px; 
} 

.home #nav li.home a, 
.home #nav li.home a:link, 
.home #nav li.home a:visited, 
.home #nav li.home a:hover, 
.home #nav li.home a:focus, 
.home #nav li.home a:active { 
    background-position: 0 -238px; 
}

来源

2009-06-09 Steve

大多数人都是对的，我没有发布完整的html。我找出原因。有一个家庭类名称的父母div标签。它用于突出显示给定页面的选定菜单项。对不起，我感到困惑，但是这些回复确实让我检查了我正在使用的页面以外的页面，这导致我找到了答案。

谢谢大家。

来源

2009-06-09 03:43:17 Steve

我不认为这是多余的，它只是错误的。也许一些css清理的结果在代码中丢失了，或者什么？

从你的html代码中，#nav对象永远不会出现在.home类的对象中，所以第三个CSS语句不会匹配任何东西。

来源

2009-06-09 03:07:39

最后一组将只匹配'a'元素，该元素是家庭类元素的子元素，具有家庭类的li元素的导航id元素家的子元素。

为什么你会需要它：

1）有可能是另一种规则的选择，它覆盖#nav li.home在某些情况下的规则。例如：

.home #nav li.home a 
vs 
.interior #nav li.home a

2）你也可以有另一个选择器，这种选择器不那么明确。例如

#nav li a

上面假设有其他html（可能在其他页面上）都使用相同的css文件。

编辑 - 另一个想法：由于三组选择器的背景位置是不同的，我猜他们正在处理#nav三种不同的页面样式。选择器是必需的，所以规则只适用于适当的页面。

来源

2009-06-09 03:08:21

是不是你的＃1错了？ .home出现在问题中的html代码中#nav内，而不是其他方式。 – 2009-06-09 03:10:26

我同意你关于你显示的HTML代码。如果显示的html是任何页面中唯一使用#nav的时间。也可能是页面正在动态生成，有时导航元素位于不同的上下文中。它也可能是来自以前版本网站的css cruft。主要的事情要注意（正如你所知道的），一个类可以在html中多次出现。但每个页面id必须是唯一的（但不是每个站点）。 – 2009-06-09 03:14:28

.home #nav li.home a

它代表：的anchor的list-item这是home类的nav ID，这又是home类的内内内。我认为CSS是错误的。

来源

2009-06-09 03:11:03

如果您将<body class="home">或<div class="home">设置为菜单的父容器，则可以控制该页面上或菜单中该菜单的外观。

<div class="home"> 
    <ol id="nav"> 
    <li class="home"> 
      <a href="/">Home</a> 
    </li> 
    </ol> 
</div>

我在想，它可以应用到级联样式子菜单的;例如

<ol id="nav"> 
    <li class="home"> 
     <a href="/">Home</a> 
     <ul id="nav"> 
      <li><a href="#">SubNav</a></li> 
     </ul> 
    </li> 
</ol>

虽然这并不十分有意义，更监守ID #nav使用了两次，当时的ID只能使用一次，每个文档使用。

来源

2009-06-09 03:12:10 garrow

这组选择会选择在任何状态

链接（<一个>元素）：访问，悬停，突出重点，.....
其中（1）是li元件与class=home
后代元件，其中（2）是一个元件与id=nav
后代元件，其中（3）是一个元件与派生元素class=home

您的示例HTML不包含与这些条件匹配的元素，因此不会选择任何内容。

来源

2009-06-09 03:20:04

我一直这样做，为了突出菜单中的当前页面而不添加“当前”类。例如，如果你有用，这很有用。使用php包含菜单。 clearleft's导航看起来像这样

<ol id="nav"> 
    <li class="home"><a href="/">Home</a></li> 
    <li class="who-we-are"><a href="/is/">Who we are</a></li> 
    <li class="what-we-do"><a href="/does/">What we do</a></li> 
    <li class="stuff-we-made"><a href="/made/">Stuff we made</a></li> 
    <li class="work-with-us"><a href="/canhelp/">Work with us</a></li> 
</ol>

而且body为不同的页面看起来像这样

<body id="index" class="home"> 
<body id="index" class="who-we-are"> 
<body id="index" class="what-we-do"> 
etc.

注 - 刚刚看到您发布的答案自己，而我写的，但我还是会包括这个。

来源

2009-06-09 03:47:40 Eystein

CSS类选择器

回答

相关问题