html - 无法突出显示 和 中的文本

Question

运行代码片段以了解我的意思。我不明白为什么我不能使用鼠标选择/突出显示 <div class="attributes"> 中的任何文本.我可以拖过整个 div 来选择它，但不是文本本身的一部分。我尝试设置一个 z-index，但这并没有改变任何东西，所以我把它去掉了。

此元素层次结构是否导致了问题？

• <div class="hierarchy">
  • <ul>
    • <li class="id ">
      • <div class="attributes">
        • <div class="col description">...等等。

我已经在 Mac 上的 Firefox、Chrome 和 Safari 中尝试过，但没有成功。

div.id_text {
  display: inline-block;
  width: 6em;
}

div.hierarchy ul {
  padding: 0;
  margin: 0.5em;
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
}

div.hierarchy ul ul {
  margin-left: 2em;
}

div.hierarchy li {
  list-style: none;
  padding: 0.5em;
  pointer-events: none;
}

div.hierarchy li:nth-child(even) {
  background-color: #eaeaea;
}

div.hierarchy li:nth-child(odd) {
  background-color: white;
}

div.hierarchy li:before {
  pointer-events: all;
  color: blue;
}

div.hierarchy li.id:before {
  display: inline-block;
  margin-right: 0.5em;
  font-family: FontAwesome;
  content: "\f078";
}

div.hierarchy li.id_collapsed:before {
  transform: rotate(270deg);
}

div.hierarchy li.id_leafNode:before {
  display: inline-block;
  color: black;
}

div.hierarchy li.id_collapsed ul {
  display: none;
}

div.attributes {
  display: inline-table;
  float: right;
  width: calc(100% - 8em);
}

div.col {
  display: table-cell;
  /*! padding-left:  1em; */
  /*! padding-right: 1em; */
  width: 25%;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

<div class="hierarchy">
  <ul>
    <li class="id ">
      <div class="id_text">36205</div>
      <div class="attributes">
        <div class="col description">My Assembly</div>
        <div class="col mpn">555</div>
        <div class="col qty">undefined</div>
        <div class="col refdes">undefined</div>
      </div>
      <ul id="36205">
        <li class="id_leafNode">
          <div class="id_text">36184</div>
          <div class="attributes">
            <div class="col description">mydesc2</div>
            <div class="col mpn">mympn2</div>
            <div class="col qty">1000</div>
            <div class="col refdes">null</div>
          </div>
        </li>
        <li class="id">
          <div class="id_text">36203</div>
          <div class="attributes">
            <div class="col description">Parent part</div>
            <div class="col mpn">1234</div>
            <div class="col qty">10</div>
            <div class="col refdes">2
            </div>
          </div>
          <ul id="36203">
            <li class="id_leafNode">
              <div class="id_text">36184</div>
              <div class="attributes">
                <div class="col description">mydesc2</div>
                <div class="col mpn">mympn2</div>
                <div class="col qty">99</div>
                <div class="col refdes">Test</div>
              </div>
            </li>
            <li class="id_leafNode">
              <div class="id_text">36185</div>
              <div class="attributes">
                <div class="col description">mydesc3</div>
                <div class="col mpn">mympn3</div>
                <div class="col qty">1</div>
                <div class="col refdes">
                </div>
              </div>
            </li>
            <li class="id_leafNode">
              <div class="id_text">36186</div>
              <div class="attributes">
                <div class="col description">mydesc4</div>
                <div class="col mpn">mympn4</div>
                <div class="col qty">1</div>
                <div class="col refdes">
                </div>
              </div>
            </li>
            <li class="id_leafNode">
              <div class="id_text">36187</div>
              <div class="attributes">
                <div class="col description">mydesc5</div>
                <div class="col mpn">mympn5</div>
                <div class="col qty">1</div>
                <div class="col refdes">
                </div>
              </div>
            </li>
            <li class="id_leafNode">
              <div class="id_text">36188</div>
              <div class="attributes">
                <div class="col description">mydesc6</div>
                <div class="col mpn">mympn6</div>
                <div class="col qty">1</div>
                <div class="col refdes">
                </div>
              </div>
            </li>
            <li class="id_leafNode">
              <div class="id_text">36189</div>
              <div class="attributes">
                <div class="col description">mydesc7</div>
                <div class="col mpn">mympn7</div>
                <div class="col qty">1</div>
                <div class="col refdes">
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

从 div.hierarchy li 中删除 pointer-events

或更改为全部

div.hierarchy li {
  list-style: none;
  padding: 0.5em;
  pointer-events: all;
}