【问题标题】:How to remove arrows on list item. I only need arrow on 2017如何删除列表项上的箭头。我只需要 2017 年的箭头
【发布时间】:2018-04-26 16:49:57
【问题描述】:

如何删除列表项上的箭头。我只需要 2017 年的箭头。对于列表项,我需要实心正方形。我使用了嵌套无序列表,但只有顶部 UL 我需要箭头而不是第二个 UL

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
ul#ulMeet li:before {
  content: "\e080";
  /*content: "\009B";*/
  font-family: 'Glyphicons Halflings';
  font-size: 10px;
  /*font-weight:bold;*/
  float: left;
  margin-top: 2px;
  margin-left: -14px;
  color: #999999;
}
<ul id="ulMeet" style="list-style:none">
  <li>
    <h4><a id="lnk" href="#" style="text-align:left;" onclick="YearsToggle(event, 'div2017')">2017</a></h4>
    <div id="2017" style="display:none;">
      <center><strong>2017</strong></center><br />
      <ul>
        <li>Test1</li>
        <li>Test2</li>
      </ul>
    </div>
</ul>

【问题讨论】:

  • 也发布您的 HTML 代码 ;)
  • 还添加了 HTML
  • ul#ulMeet &gt; li:before 这仅针对 ulMeet 的孩子 li
  • ul#ulMeet ul li:before.

标签: css


【解决方案1】:

ul#ulMeet li:before替换为ul#ulMeet &gt; li:before这样做,定位ul#ulMeet的直接lichildren

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
ul#ulMeet> li:before {
  content: "\e080";
  /*content: "\009B";*/
  font-family: 'Glyphicons Halflings';
  font-size: 10px;
  /*font-weight:bold;*/
  float: left;
  margin-top: 2px;
  margin-left: -14px;
  color: #999999;
}
<ul id="ulMeet" style="list-style:none">
  <li>
    <h4><a id="lnk" href="#" style="text-align:left;" onclick="YearsToggle(event, 'div2017')">2017</a></h4>
    <div id="2017">
      <center><strong>2017</strong></center><br />
      <ul>
        <li>Test1</li>
        <li>Test2</li>
      </ul>
    </div>
</ul>

【讨论】:

    【解决方案2】:
    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
    ul#ulMeet > li:before {
      content: "\e080";
      /*content: "\009B";*/
      font-family: 'Glyphicons Halflings';
      font-size: 10px;
      /*font-weight:bold;*/
      float: left;
      margin-top: 2px;
      margin-left: -14px;
      color: #999999;
    }
    
    ul li ul, ul li ul li{
      list-style-type: square;
    }
    

    仅当 li 是 #ulMeet 的直接子级时才会应用箭头,然后对于嵌套在另一个 ul 内的每个 ul,它都会有方形项目符号。

    【讨论】:

    • 所有孩子都是直接的
    • @Huangism "第二个选择器匹配的元素必须是第一个选择器匹配的元素的直接子级。" developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
    • 你应该把那个文档作为答案的一部分,我只是告诉你所有的孩子都是直接的,其他的都是后代
    猜你喜欢
    • 1970-01-01
    • 2013-12-08
    • 2020-07-16
    • 1970-01-01
    • 2020-07-04
    • 2013-05-24
    • 2023-03-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多