Question

我的页面顶部有一个列表<ul> 列表位于div标签中问题是我需要将一些css样式设置为<a>其中一个列表.menu-social-icons，其中类<a>样式位于问题的底部。
但是，当我在页面上添加样式时，所有<div class="full-width top-page-bar"> <div class="row"> <div class="large-12 columns"> <div class="left"> <ul class="right inline-list menu-social-icons show-for-large-up"> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-google-plus"></a></li> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-linkedin"></a></li> <li><a href="#" class="fa fa-youtube"></a></li> </ul> </div> <div class="right"> <ul class="no-bullet inline-list right account-holder"> <li><a id="registerLink" title="Register" class="SkinObject" href="#">Register</a> </li> <li><a id="loginLink" title="Login" class="LoginLink" href="#">Login</a> </li> </ul> </div> </div> </div> </div>标签都会在页面上添加这些样式我不知道它为什么传播到所有链接我的CSS样式有问题吗？
这是我的HTML输出：

.menu-social-icons li a, a:link, a.visited, a.active {
border-radius: 50% 50% 50% 50%;
color: #ff0000;
display: inline-block;
font-size: 20px;
height: 35px;
line-height: 35px;
margin: 0 5px;
padding: 0;
text-align: center;
width: 35px;
background: #f1f1f1;
}

.menu-social-icons li a:hover {
color: #fff;
text-decoration: none;
background: #ff0000;
}

这是引发问题的风格：

{{1}}

Answer 1

这个选择器出了问题：.menu-social-icons li a, a:link, a.visited, a.active 它适用于：link，a.visited和a.active。你也必须将它们作为范围，如下所示：

.menu-social-icons li a, .menu-social-icons li a:link, .menu-social-icons li a.visited, .menu-social-icons li a.active

Answer 2

还要添加.menu-social-icons以保留a：链接a：访问a.active或将适用于所有<a>

   .menu-social-icons li a, a:link, a.visited, a.active {
            border-radius: 50% 50% 50% 50%;
            color: #ff0000;
            display: inline-block;
            font-size: 20px;
            height: 35px;
            line-height: 35px;
            margin: 0 5px;
            padding: 0;
            text-align: center;
            width: 35px;
            background: #f1f1f1;
    }

到这个

    .menu-social-icons li a, .menu-social-icons li a:link, .menu-social-icons a.visited, a.active {
            border-radius: 50% 50% 50% 50%;
            color: #ff0000;
            display: inline-block;
            font-size: 20px;
            height: 35px;
            line-height: 35px;
            margin: 0 5px;
            padding: 0;
            text-align: center;
            width: 35px;
            background: #f1f1f1;
    }

Answer 3

您的css声明没有按照您的想法进行。这一行

.menu-social-icons li a, a:link, a.visited, a.active {

将样式应用于.menu-social-icons li a，以及link，visited或active州的所有链接。

要解决此问题，您需要使用以下内容：

.menu-social-icons li a, .menu-social-icons li a:link,
.menu-social-icons li a.visited, .menu-social-icons li a.active {

Answer 4

不好：.menu-social-icons li a, a:link, a.visited, a.active

好：.menu-social-icons li a, .menu-social-icons li a:link, .menu-social-icons li a.visited, .menu-social-icons li a.active

完整示例：

＆＃13;

.menu-social-icons li a, .menu-social-icons li a:link, .menu-social-icons li  a.visited, .menu-social-icons li a.active {
border-radius: 50% 50% 50% 50%;
color: #ff0000;
display: inline-block;
font-size: 20px;
height: 35px;
line-height: 35px;
margin: 0 5px;
padding: 0;
text-align: center;
width: 35px;
background: #f1f1f1;
}

.menu-social-icons li a:hover {
color: #fff;
text-decoration: none;
background: #ff0000;
}

＆＃13;

<div class="full-width top-page-bar">
    <div class="row">
        <div class="large-12 columns">
            <div class="left">
                <ul class="right inline-list menu-social-icons show-for-large-up">                  
                        <li><a href="#" class="fa fa-twitter"></a></li>
                        <li><a href="#" class="fa fa-google-plus"></a></li>
                        <li><a href="#" class="fa fa-facebook"></a></li>
                        <li><a href="#" class="fa fa-linkedin"></a></li>
                        <li><a href="#" class="fa fa-youtube"></a></li>
                </ul>
            </div>

            <div class="right"> 
              <ul class="no-bullet inline-list right account-holder">

                <li><a id="registerLink" title="Register" class="SkinObject" href="#">Register</a>
</li>
                <li><a id="loginLink" title="Login" class="LoginLink" href="#">Login</a>
</li>
              </ul>
            </div>
        </div>
    </div>
</div>

＆＃13;

当我将样式仅限于列表中的锚点时，为什么所有锚标记都会获得样式？

4 个答案: