级联

Question

这是html：

<body ng-app="secret">
    <div id="mainBar">
        <div id="mainBarWrapper">
            <div id="siteLogo">
                <img src="images/mimiLogo.png" alt="mimi"/>
            </div>
            <div>
                <ul id="navBar">
                    <li><a ui-sref="login">Login</a></li>
                    <li>&nbsp;|&nbsp;</li>
                    <li><a ui-sref="signUp">Sign Up</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div ui-view></div>
</body>

这是所有相关的css：

ul#navBar {
float: right;
padding: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 10px;
list-style: none;
position: relative;
top:-10px;
z-index: 1000;
color: white;
font-size: 13px;
}

ul#navBar li {
margin-top: 0;
margin-bottom: 0;
margin-left: 1px;
margin-right: 0;
padding-top:20px;
padding-left: -5px;
text-align: center;
position: relative;     /*positions the submenu within the ul*/
float: left;
cursor: pointer;
z-index: 1000;
height: 29px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}

ul#navBar a {
text-decoration: none;
}

ul#navBar a:hover {
color: #000;
}

ul#navBar a:visited {
color: #fff;
}

当我将鼠标悬停在它们上面时，我试图让一个元素具有悬停效果。 ul＃navBar a：hover {color：＃000; }不起作用。我不知道为什么。

Answer 1

CSS中有两件事要注意：Cascades和Specificity。

级联

C ++ CSS中的级联是浏览器用来处理规则的方法。如果我编写2条规则，浏览器将从上到下合并规则处理它们。

/** Rule 1 **/
.paragraph {
    font-size: 18px;
    color: white;
}
/** Rule 2 **/
.paragraph {
    margin-bottom: 20px;
    line-height: 26px;
}

当浏览器读取它们时，它会将它们组合成：

/** Generated Rule **/
final selector {
    font-size:18px;
    color: white;
    margin-bottom:20px;
    line-height:26px;
}

如果在第二个规则中我要添加一个额外的属性来将颜色设置为红色，这就是生成的规则的样子：

/** Generated Rule **/
final selector {
    font-size:18px;
    /* color: white; deleted in favor to the second rule*/
    margin-bottom:20px;
    line-height:26px;
    color:red; /* This rule prevails due to cascades */
}

这是您在代码中遇到的问题，通过在底部放置:visited选择器，您将取消悬停规则。

（如果你需要知道特异性如何工作，我会在这里添加）

特异性

每种类型的选择器都有一个重量。例如，＃id比.class选择重要，类比html标签更重要，依此类推。

选择器的重量会绕过级联效果。

/* Rule 1 */
#paragraph {
    color: red;
}

/* Rule 2 */
.paragraph {
    color: green
}

/* Generated Rule */
selector {
    color:red;
    /* color:green; Deleted in favor of the #id selector */
}

在这种情况下，定义的顺序无关紧要。身份证占了上风。

通过牢记这两条规则，您可以更轻松地处理CSS。

See full post about these rules

我的CSS不工作？谁知道为什么？

1 个答案:

级联

特异性