0

私が達成しようとしていること:

ネストされた list-item 要素の下枠を削除しますが、親の list-item 要素の下枠は保持します。

">*" のような "ユニバーサル セレクター" を使用して、"この親に存在するすべての要素について、境界線を 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; }
4

2 に答える 2

-1

誤解した

">"を削除するだけで問題ありません

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

.option2 ul li div * { border: none; }
于 2013-06-28T20:54:38.207 に答える