在CSS li中仅选择没有数字的文本

时间:2015-02-14 10:27:59

标签: javascript jquery html css css3

如何修改此现有CSS代码以仅选择文本而不是与数字一起复制。

CSS

.snippet-wrap {position:relative; width:640px;}
.snippet-wrap li { text-shadow:none;}
.snippet-wrap .snippet-num {list-style:none;counter-reset:paragraph;}
.snippet-wrap .snippet-num li {color:#333;border-left:1px solid #BDC3C7;margin-left:22px;} 
.snippet-wrap .snippet-num li:before {color:#999;margin-left:-24px;margin-right:10px; counter-increment:paragraph;  content:counter(paragraph);
    display:inline-block; text-align:right; width:20px;}

HTML

<ol class="snippet-num">
<li><span>Vegetables</span></li> 
<li><span>Soya</span></li> 
<li><span>Wheat Grass</span></li> 
<li><span>Cheque</span></li> 
</ol>   

当前

Result

渴望

Desired

1 个答案:

答案 0 :(得分:1)

添加-webkit-user-select: none;

到您的.snippet-wrap .snippet-num li:before CSS,以便:

.snippet-wrap .snippet-num li:before {
  -webkit-user-select: none;

  /* rest of your CSS properties */ 
  ....
}

详细了解user-select以保持浏览器兼容性: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select