通过CSS定位儿童<ul> </ul>

Question

我的评论设计设置如下：

<div class="comment">
    <p>Hello</p>
    <ul><li>
        <div class="comment">
            <p>Hello child</p>
            <ul><li>
                <div class="comment">
                    <p>Hello child 2</p>
                    <ul>...</ul>
                </div>
            </li></ul>
        </div>
    </li></ul>
</div>

是否可以定位第二个<ul>孩子？

jsfiddle如果需要。

Answer 1

例如，没有其他HTML标记：

body > .comment > ul > li > div > ul > li {background: red}

http://jsfiddle.net/3seagmLv/1/

如果在第一个.comment之上有任何父母，那么它将取代body

parent > .comment > ul > li > div > ul > li {background: red}

编辑以下评论：

选择第二个和每个其他UL，

body > .comment > ul > li > div ul {background: red}

Answer 2

你应该可以使用：

ul ul {
 /* Your styling */
}

Answer 3

如果要在嵌套布局中选择，可以使用ul ul：

ul ul { /* set styles */ }

这将选择嵌套在（至少）另一个ul内的所有ul元素。

＆＃13;

＆＃13;

ul ul {
    border: 1px solid;
}

＆＃13;

<div class="comment">
  <p>Hello</p>
  <ul><li>
    <div class="comment">
      <p>Hello child 1</p>
      <ul><li>
        <div class="comment">
          <p>Hello child 2</p>
          <ul><li>
            <div class="comment">
              <p>Hello child 3</p>
              <ul><li>
                <div class="comment">
                  <p>Hello child 4</p>
                </div>
              </li></ul>
            </div>
          </li></ul>
        </div>
      </li></ul>
    </div>
  </li></ul>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您只想影响仅嵌套在ul中的ul元素，

ul ul    { /* set styles   */ }
ul ul ul { /* unset styles */ }

＆＃13;

＆＃13;

ul ul {
    border: 1px solid;
}
ul ul ul {
    border: none;
}

＆＃13;

<div class="comment">
  <p>Hello</p>
  <ul><li>
    <div class="comment">
      <p>Hello child 1</p>
      <ul><li>
        <div class="comment">
          <p>Hello child 2</p>
          <ul><li>
            <div class="comment">
              <p>Hello child 3</p>
              <ul><li>
                <div class="comment">
                  <p>Hello child 4</p>
                </div>
              </li></ul>
            </div>
          </li></ul>
        </div>
      </li></ul>
    </div>
  </li></ul>
</div>

＆＃13;

＆＃13;

＆＃13;

注意这可以概括。例如，您可以影响正好嵌套在1个或2个ul元素中的所有ul：

ul ul       { /* set styles   */ }
ul ul ul ul { /* unset styles */ }

＆＃13;

＆＃13;

ul ul {
    border: 1px solid;
}
ul ul ul ul {
    border: none;
}

＆＃13;

<div class="comment">
  <p>Hello</p>
  <ul><li>
    <div class="comment">
      <p>Hello child 1</p>
      <ul><li>
        <div class="comment">
          <p>Hello child 2</p>
          <ul><li>
            <div class="comment">
              <p>Hello child 3</p>
              <ul><li>
                <div class="comment">
                  <p>Hello child 4</p>
                </div>
              </li></ul>
            </div>
          </li></ul>
        </div>
      </li></ul>
    </div>
  </li></ul>
</div>

＆＃13;

＆＃13;

＆＃13;