这可能不引入Javascript或添加到HTML？

Question

我的客户想要每个链接列表,即表单的每个列表

<ul>
    <li>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
</ul>

使列表的项目符号与链接文本的颜色相同,但是每个非链接列表,即表单的每个列表

<ul>
     <li>Here's a regular list item</li>   
     <li>Here's a regular list item</li>
     <li>Here's a regular list item</li>
</ul>

应该像往常一样继承子弹和相应的文本.

小提琴:http://jsfiddle.net/0kkc2rz4/

我对不能够添加类到限制HTML,所以像

<ul class='link-list'>
    <li>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
</ul>

---

ul.link-list li { color: #004E98; }

是不可能的,虽然我意识到如果我从头开始编码网站,这显然是最好的方法.我可以添加JS,但不愿意.

Answer 1

这是一个使用伪元素和子弹点的unicode字符的解决方案.基本思想是将a子弹"重叠"在子弹上li,使其具有不同的效果.

ul{
  margin:0em;
  padding:0em;
  list-style:none;
  padding:20px 20px 0px 20px;
  font-family:sans-serif;
}


li{
  margin:0em;
  padding:0em;
  padding-bottom:10px;
}

a{
  color:red;
  text-decoration:none;
}

a:hover{
  color:green;
}

a, li{
  position:relative;
}

a:before, li:before{
  content:'\2022';
  position:absolute;
  left:-0.5em; 
  color:inherit;
}

<ul>
    <li>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        Here's a regular list item       
    </li>
</ul>