html - CSS - 样式颜色在使用省略号时不采用 anchor 标记，但采用与主 div 类相同的颜色

Question

NOTE : CSS Color not taking for anchor tag when using elipsis but taking same color which is using for main div class

JS FIDDLE DEMO HERE :

CSS:

<style type="text/css">
    .oneline {
        text-overflow : ellipsis;
        white-space   : nowrap;
        width         : 50px;
        overflow      : hidden;
        color: #f00;
     }
    a {color:#000;}
</style>
<div class="oneline">

    Testing 123 Testing 456 Testing 789 <br/>
    <a href="">Testing 123 Testing 456 Testing 789</a>
</div>

Answer 1

尝试在文本周围添加一个额外的元素。由于您已将其赋予父元素，因此它会将省略号颜色视为父元素文本颜色。

HTML

<div class="oneline">    
    <span>Testing 123 Testing 456 Testing 789</span> <br/>
    <a href="">Testing 123 Testing 456 Testing 789</a>
</div>

CSS

.oneline span, .oneline a {
        display:block;
        text-overflow : ellipsis;
        white-space   : nowrap;
        width         : 50px;
        overflow      : hidden;
        color:#f00;
     }  
    .oneline a {       
        color:#000
  }

DEMO