CSS - 用于在ID中选择类的语法

通过类名称在ID中选择标签的选择器语法是什么？例如，为了使内部“li”变红，我需要在下面选择什么？CSS - 用于在ID中选择类的语法

<html> 
<head> 
    <style type="text/css"> 
     #navigation li 
     { 
      color: green; 
     } 

     #navigation li .navigationLevel2 
     { 
      color: red; 
     } 
    </style> 
</head> 
<body> 
    <ul id="navigation"> 
     <li>Level 1 item 
      <ul class="navigationLevel2"> 
       <li>Level 2 item</li> 
      </ul> 
     </li> 
    </ul> 
</body> 
</html>

来源

2009-07-16 Jeremy

#navigation .navigationLevel2 li 
{ 
    color: #f00; 
}

来源

2009-07-16 22:25:12

有不需要的选择器！ – Galen 2009-07-16 23:38:11

.navigationLevel2 li { color: #aa0000 }

来源

2009-07-16 22:24:39 Galen

如果这样做的伎俩，而不把它应用到不需要李：S，那么这是要走的路，因为它有更少的选择，从而更快。至少根据Google的网页效果建议。 – PatrikAkerstrand 2009-07-16 22:59:23

这里有两个选项。我喜欢navigationAlt的选择，因为它涉及到最后更少的工作：

<html> 
 

 
<head> 
 
    <style type="text/css"> 
 
    #navigation li { 
 
     color: green; 
 
    } 
 
    #navigation li .navigationLevel2 { 
 
     color: red; 
 
    } 
 
    #navigationAlt { 
 
     color: green; 
 
    } 
 
    #navigationAlt ul { 
 
     color: red; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ul id="navigation"> 
 
    <li>Level 1 item 
 
     <ul> 
 
     <li class="navigationLevel2">Level 2 item</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul id="navigationAlt"> 
 
    <li>Level 1 item 
 
     <ul> 
 
     <li>Level 2 item</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

来源

2009-07-16 22:30:43 Jason

这也将工作，你不需要额外的类：

#navigation li li {}

如果您有第三级的LI，你可能不得不重置/覆盖他们将从上面的选择器继承的一些样式。您可以针对第三级，像这样：

#navigation li li li {}

来源

2009-07-16 22:39:50

CSS - 用于在ID中选择类的语法

回答

相关问题