简单的CSS只适用于锚点上的背景颜色

问题描述：

我想仅将背景颜色应用于我的锚点标签而不是字体图标。我嵌套了< span>，因为我需要该图标也是可点击的。简单的CSS只适用于锚点上的背景颜色

如果我将该跨度fa-fa-angle-down类放到锚点之外，一切看起来都不错（这就是我想要的），但它不可点击。

<span class='http_method'> 

      <a href='test' class="toggleOperation"> <span class="fa fa-angle-down"></span> method</a> 
      </span>

span { 
    margin: 0; 
    margin-left: 10px; 
    padding: 0; 
} 

.http_method a{ background: linear-gradient(#4c99d7,#1a66a3); 
    border: 1px solid #1a66a3; 
    height: 25px; 
    line-height: 10px; 
    vertical-align: middle; 
} 

.http_method span{ 
font-size: 30px; 
    margin-right: 10px; 
    padding-left: 10px; 
    vertical-align: middle; 
    color: #686b6d; 
}

https://jsfiddle.net/c2Ln1cab/1/

检查你拨弄链接伴侣吗？ –

我的坏我更新了它 – Angular

我重新读你的问题几次，不明白你的问题是什么。你能改述一下吗？ – IronWilliamCash

答

为什么不添加跨度你想在渐变什么，然后你可以有两种锚点？

span { 
 
    margin: 0; 
 
    margin-left: 10px; 
 
    padding: 0; 
 
} 
 

 
.http_method a { 
 
    height: 25px; 
 
    line-height: 10px; 
 
    vertical-align: middle; 
 
} 
 
.http_method a span.gradient{ 
 
    background: linear-gradient(#4c99d7, #1a66a3); 
 
    border: 1px solid #1a66a3; 
 
} 
 
.http_method span { 
 
    font-size: 30px; 
 
    margin-right: 10px; 
 
    padding-left: 10px; 
 
    vertical-align: middle; 
 
    color: #686b6d; 
 
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 

 
<span class='http_method'> 
 
    
 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 

 
<span class='http_method'> 
 
    
 
<a href='test' class="toggleOperation"> 
 
<span class="fa fa-angle-down"></span><span class="gradient">method</span> 
 
</a> 
 
</span> 
 

 
</span>

为什么有一个小旁边的方法？ – Angular

有一个空间。如果你摆脱它，它会消失 – Chizzle

答

而不是给锚标记，造型，想想这种风格创建一个新类，并在需要的地方应用该类。

这样你就不依赖于标签，并且不会用样式（CSS）来限制构造（HTML）。

span { 
 
    margin: 0; 
 
    margin-left: 10px; 
 
    padding: 0; 
 
} 
 

 
.http_method .link{ background: linear-gradient(#4c99d7,#1a66a3); 
 
    border: 1px solid #1a66a3; 
 
    height: 25px; 
 
    line-height: 10px; 
 
    vertical-align: middle; 
 
} 
 

 
.http_method span{ 
 
font-size: 30px; 
 
    margin-right: 10px; 
 
    padding-left: 10px; 
 
    vertical-align: middle; 
 
    color: #686b6d; 
 
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 
    
 

 
<span class='http_method'> 
 
<a href='test' class="toggleOperation"><span class="link">method</span> 
 
<span class="fa fa-angle-down"></span> 
 
</a>

https://jsfiddle.net/c2Ln1cab/4/

答

只要把跨度锚内，一个他们从那里工作：

例子：

HTML：

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 

<a href='test' class="toggleOperation"> 

<span class="fa fa-angle-down"></span><span class="span-colored">method</span> 

</a>

CSS：

span { 
    margin: 0; 
    margin-left: 10px; 
    padding: 0; 
} 

.http_method a:not(span){ background: linear-gradient(#4c99d7,#1a66a3); 
    border: 1px solid #1a66a3; 
    height: 25px; 
    line-height: 10px; 
    vertical-align: middle; 

} 

.http_method span{ 
font-size: 30px; 
    margin-right: 10px; 
    padding-left: 10px; 
    vertical-align: middle; 
    color: #686b6d; 
}

https://jsfiddle.net/c2Ln1cab/5/

简单的CSS只适用于锚点上的背景颜色

相关推荐