我可以在不<li>添加任何带有 CSS 选择器的类的情况下选择它吗？

Question

<div id="accordion2">
<ul>
    <li>
        <h3>Lorem</h3>
        <ul>
            <li><a href="#">Ipsum</a></li>
            **<li><a href="#">SELECT THIS <li> WITH CSS WITHOUT ADDING CLASS TO IT</a>**
            <ul>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Ipsum</a></li>
            </ul>
            </li>
            <li><a href="#">Ipsum</a></li>
        </ul>
    </li>

嗨，我想将背景图像添加到具有较低级别的 li 中，问题是我可以使用 css 选择器选择它吗？我不想使用类，但如果没有其他解决方案，我必须这样做。谢谢

Answer 1

你可以这样做：

#accordion2 > ul > li > ul > li:nth-child(2) {
   background: ...
}

第一个子项的索引为 1。

如果需要支持 IE，第一个支持此功能的版本是 IE9

Answer 2

您可以使用

background-image属性：

#accordion2 > ul > li > ul > li:nth-child(2){
    background-image: url('http://img3.wikia.nocookie.net/__cb20120506145055/disneyjessieseries/images/1/1d/20px-Facebook-icon.png');
    background-repeat: no-repeat;
    list-style-type: none;    
    text-indent: 20px;    
}

小提琴

看看这里背景图像属性

Answer 3

#accordion2 ul li ul li {
   background-color: grey;
}

我不喜欢嵌套这么深，它会让你感到困惑，吓跑你xD！在这种情况下，请创建一个具有不同背景颜色或图像的属性的类，并将该类添加到要标记的特定元素中。

.CSS：

.red-li {
   background-color: red;
}

.HTML

<ul>
  <li class="red-li">Im Red</li>
</ul>

Answer 4

你可以这样做

div#accordion2 ul li ul li:nth-child(2){
    *style here*
}