CSS - Syntax to select a class within an id

后端未结

关注

 5  887

What is the selector syntax to select a tag within an id via the class name? For example, what do I need to select below in order to make the inner \"li\" turn red?

相关标签:

5条回答

难免孤独

2021-01-31 01:34
```
.navigationLevel2 li { color: #aa0000 }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
太阳男子

2021-01-31 01:36
```
#navigation .navigationLevel2 li
{
    color: #f00;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
不思量自难忘°

2021-01-31 01:51
Just needed to drill down to the last li.
```
    #navigation li .navigationLevel2 li
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

花落未央

2021-01-31 01:52

Here's two options. I prefer the navigationAlt option since it involves less work in the end:

<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>

0 讨论(0)

清歌不尽

2021-01-31 01:54
This will also work and you don't need the extra class:
```
#navigation li li {}
```
If you have a third level of LI's you may have to reset/override some of the styles they will inherit from the above selector. You can target the third level like so:
```
#navigation li li li {}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...