jquery - 如何将嵌套列表中的子 li 元素设置为普通字体

Question

我有一个嵌套列表，我只想让子元素使用普通字体，例如父元素应该是粗体 20，子元素应该是粗体 17，子元素应该是普通字体 17px。

在我的例子中，我尝试了子子项也显示为粗体，我尝试了几种不同的方法，但它破坏了其中的一件事。

我想让父元素加粗 20，如果它有嵌套列表，那么第二级将是 bold 17 否则它应该是 normal 17 一个 child 不会有子元素

https://jsfiddle.net/mk0d3jw8/3/

• 列出第 1 项(粗体 20)
  • 子元素 1(粗体 18)
    • 子元素 1
    • 子元素 2
    • 子元素 3
    • 子元素 2
  • 子元素 2
    • 子元素 1
    • 子元素 2
    • 子元素 3
    • 子元素 2
• 列出第 2 项(粗体 20)
  • 子元素 1
  • 子元素 2
  • 子元素 3
  • 子元素 2
• 列表列表 3(粗体 20)
  • 子元素 1
  • 子元素 2
  • 子元素 3
  • 子元素 2

CSS

.directory-w ul
{
list-style-type: none;
margin: 0;
padding: 5px;
margin-left:30px;
}
.directory-w ul li{ color:#757575; font-size:20px;}
@media (min-width:768px){
.directory-w > ul {
    columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  }
  }
.directory-w > ul > li > ul > li {font-weight:bold;}
.directory-w ul ul li {list-style-type: disc; font-weight:normal;   font-size:15px;}
.directory-w ul  li li {list-style-type: disc;font-weight:normal; font-size:15px;}
.directory-w  ul > li > ul > li  > ul > li {font-weight:normal !important;}

Answer 1

如果你可以添加一个额外的包装器(例如一个 span 元素)，你可以使用 :only-child 选择器(或 :first-child:last-child )

^{我只保留了演示的相关样式}

.directory-w ul {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  margin-left: 30px;
}

.directory-w ul li {
  color: #757575;
  font-size: 20px;
}

.directory-w ul li span:only-child {
  font-weight:normal;
  font-size:17xp;
}

.directory-w>ul>li>ul>li {
  font-weight: bold;
}

.directory-w ul ul li {
  font-weight: normal;
  font-size: 15px;
}

<div class="directory-w">
  <ul>

    <li>List item 1 (BOLD 20)
      <ul>
        <li><span>Subitem 1 (BOLD 18)</span>
          <ul>
            <li>Sub Subitem 1</li>
            <li>Sub Subitem 2</li>
            <li>Sub Subitem 3</li>
            <li>Sub Subitem 2</li>
          </ul>
        </li>

        <li><span>Subitem 2</span>
          <ul>
            <li>Sub Subitem 1</li>
            <li>Sub Subitem 2</li>
            <li>Sub Subitem 3</li>
            <li>Sub Subitem 2</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>List item 2 (BOLD 20)
      <ul>
        <li><span>Subitem 1</span></li>
        <li><span>Subitem 2</span></li>
      </ul>
    </li>
    <li>List list 3 (BOLD 20)
      <ul>
        <li><span>Subitem 1</span></li>
        <li><span>Subitem 2</span></li>
      </ul>
    </li>
  </ul>
</div>

这是一个自动添加额外包装器的小 jQuery 代码:

$('ul > li > ul > li:has(ul)').each(function() {
  $(this).contents().eq(0).wrap('<span></span >')
})

.directory-w ul {
  list-style-type: none;
  margin: 0;
  padding: 5px;
  margin-left: 30px;
}

.directory-w ul li {
  color: #757575;
  font-size: 20px;
}

.directory-w ul li ul span {
  font-weight:bold;
  font-size:17xp;
}


.directory-w ul ul li {
  font-weight: normal;
  font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="directory-w">
  <ul>

    <li>List item 1 (BOLD 20)
      <ul>
        <li>Subitem 1 (BOLD 18)
          <ul>
            <li>Sub Subitem 1</li>
            <li>Sub Subitem 2</li>
            <li>Sub Subitem 3</li>
            <li>Sub Subitem 2</li>
          </ul>
        </li>

        <li>Subitem 2
          <ul>
            <li>Sub Subitem 1</li>
            <li>Sub Subitem 2</li>
            <li>Sub Subitem 3</li>
            <li>Sub Subitem 2</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>List item 2 (BOLD 20)
      <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
      </ul>
    </li>
    <li>List list 3 (BOLD 20)
      <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
      </ul>
    </li>
  </ul>
</div>