无法突出显示<div>和<ul>中的文本

时间：2016-08-09 00:26:01

标签： html css

运行代码段以查看我的意思。我不明白为什么我不能使用鼠标选择/突出显示<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>

2 个答案:

答案 0 :(得分：1)

从pointer-events

中删除div.hierarchy li

或更改为全部

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

答案 1 :(得分：1)

就像@joshhunt已经提到的那样删除pointer-events: none并添加：

::selection {
  color:#fc0; background: #000;
}
::-moz-selection {
  color: #fc0; background: #000; 
}
.col {  
  -webkit-user-select: all;
  -moz-user-select: all;  
  user-select: all;            
}

使用::selection属性，您可以为高亮选择功能指定颜色。我选择了黑色和黄色。

user-select启用正常的选择突出显示功能。

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;

}

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;
}
::selection {
  color:#fc0; background: #000;
}
::-moz-selection {
  color: #fc0; background: #000; 
}
.col {  
  -webkit-user-select: all;
  -moz-user-select: all;  
  user-select: all;            
}
<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>

相关问题
最新问题