html - 是否有像“>*”这样的通用 css3 选择器来设置该父元素中的每个子元素的样式？

Question

我要完成的工作：

移除嵌套列表项元素的底部边框，但保留其父列表项元素的底部边框。

我试图弄清楚是否可以使用“通用选择器”，例如“>*”来表示：“对于存在于该父项中的所有元素，将边框设为 0”。

问题：

这可能吗？

见小提琴：http: //jsfiddle.net/VnLZH/

HTML：

            <aside>
            <b>What I'm trying to accomplish: </b><br>
            1.) Removing the bottom border on the nested list-item element, but keeping the bottom border of its parent list-item element. <br>

            2.) I'm trying to figure out if I can use a "universal selector", like ">*" to say: "For everything element that lives in this parent, make the border 0". <br><br>

            <b>Question</b><br>
            Is this possible?
        </aside>

        <h1>This works</h1>
        <div class="option1">
                <ul>
                    <li>Category</li>
                    <li>Category</li>
                    <li>Category</li>
                    <li>Category
                        <div>
                            <ul>
                                <li><input type="radio" name="radio" /> Option 1</li>
                                <li><input type="radio" name="radio" /> Option 2</li>
                                <li><input type="radio" name="radio" /> Option 3</li>
                            </ul>
                        </div>
                    </li>
                    <li>Category</li>
                    <li>Category</li>
            </ul>
        </div>


        <h1>What I want to work</h1>
        <div class="option2">
                <ul>
                    <li>Category</li>
                    <li>Category</li>
                    <li>Category</li>
                    <li>Category
                        <div>
                            <ul>
                                <li><input type="radio" name="radio" /> Option 1</li>
                                <li><input type="radio" name="radio" /> Option 2</li>
                                <li><input type="radio" name="radio" /> Option 3</li>
                            </ul>
                        </div>
                    </li>
                    <li>Category</li>
                    <li>Category</li>
            </ul>
        </div>

CSS：

            aside { background: #f2f2f2; margin: 1em 0; padding: .5em; }
        h1 { margin: 1em 0 0; }

        /* This works */
        .option1 {  }
        .option1 ul {  }
        .option1 ul li { border-bottom: 1px solid black; }
        .option1 ul li div ul li { border: none; }

        /* What I want to work */
        .option2 {  }
        .option2 ul {  }
        .option2 ul li { border-bottom: 1px solid black; }
        .option2 ul li div >* { border: none; }

Answer 1

您的代码 ( .option2 ul li div > *) 不起作用，因为列表本身没有边框，但列表项可以。因此，.option2 ul li div ul > *它会起作用，但此外，即使指定.option2 ul li *也会针对嵌套在 option2 列表的列表项中的任何元素。

.option2 ul li { border-bottom: 1px solid black; }
.option2 ul li * { border: none; } //removes border on nested elements of any kind

Answer 2

我误解了

只需删除“>”就可以了

http://jsfiddle.net/VnLZH/9/

.option2 ul li div * { border: none; }