Question

当我写两次时，它对我的CSS类有什么不同，一次只使用类名，一次与另一个类名结合

.User_Profile{
    padding : 10px;
    margin  : 16px;
    background-image : url("images/user.png");
    font-size: 20px;
             }

.User_Profile, .Premium{
    font-family: cursive;
    display: block
    background-image : url("images/P_user.png");
    font-size: 20px;

                       }

当我使用带有class =＆＃34; User_Profile＆＃34;的元素时，浏览器将如何处理HTML元素？并且一次使用class =＆＃34; User_Profile Premium＆＃34;

Answer 1

由于这些booth类具有相同的specificity，因此源文件中的后一个将优先并覆盖这些属性。但是，如果您将规则更改为<style type="text/css"> .tooltip { visibility: hidden; position: fixed; width: 450px; top: 0; left: 0; z-index: 2; color: red; background-color: #ffffe6; font-family: 'B Yekan'; font-size: 20px; text-align: center; padding: 1px; border: solid 1px; border-radius: 5px; overflow:auto; } </style> <script type="text/javascript"> function tooltip_show(tooltipId, inputId) { var inputField = document.getElementById(inputId); var rectObject = inputField.getBoundingClientRect(); var top = rectObject.top, left = rectObject.left; var it = document.getElementById(tooltipId); it.style.left = (left - it.offsetWidth / 2 + inputField.offsetWidth / 2) + 'px'; it.style.top = (top + inputField.offsetHeight + 5) + 'px'; var a = inputField.scrollTop; it.style.visibility = 'visible'; } function tooltip_hide(tooltipId) { var it = document.getElementById(tooltipId); it.style.visibility = 'hidden'; } </script>，则该规则仅适用于.User_Profile.Premium，但您编写的规则适用于<element class="User_Profile Premium">和<element class="User_Profile">。

Answer 2

具有班级User_Profile Premium的div将覆盖User_Profile选择器的所有属性。

.User_Profile {
    padding : 10px;
    margin  : 16px;
    background-image : url("images/user.png"); // <-- overvritten
    font-size: 20px;                           // <-- overvritten
}

.User_Profile, .Premium {
    font-family: cursive;
    display: block
    background-image : url("images/P_user.png");
    font-size: 20px;
}

在您的情况下，这是属性background-image和font-size。为防止这种情况，您可以使用以下代码：

.User_Profile, .Not_Premium {
    padding : 10px;
    margin  : 16px;
    background-image : url("images/user.png");
    font-size: 20px;
}

.User_Profile, .Premium {
    padding : 10px;
    margin  : 16px;
    font-family: cursive;
    display: block
    background-image : url("images/P_user.png");
    font-size: 20px;
}

注意当您使用CSS转换器时，可以从.Premium扩展.User_Profile选择器。

Answer 3

有几种方法可以在声明中编写多个CSS选择器。

当您用逗号分隔两个选择器时，您告诉浏览器将CSS规则应用于所有这些选择器。它与使用自己的声明块分别编写每个选择器相同。

示例：

// This is the same .User_Profile, .Premium { font-size: 20px; color: red; } // As this: .User_Profile { font-size: 20px; color: red; } .Premium { font-size: 20px; color: red; }

如果删除逗号，CSS规则将应用于第一个选择器的子元素。

示例：

＆＃13;
＆＃13;
.User_Profile .Premium { font-size: 20px; color: red; }
＆＃13;
<div class="User_Profile"> <div class="Premium">Applied</div> </div> <div class="Premium">Not Applied</div>
＆＃13;
＆＃13;
＆＃13;

如果您希望CSS规则仅应用于使用两个类的元素，则删除两个选择器之间的空格。

示例：

＆＃13;
＆＃13;
.User_Profile.Premium { font-size: 20px; color: red; }
＆＃13;
<div class="User_Profile Premium"> This div has the rule applied. </div> <div class="User_Profile"> This div does not have the rule applied. </div> <div class="Premium"> This div does not have the rule applied. </div>
＆＃13;
＆＃13;
＆＃13;

您还可以执行更多高级技巧，例如在选择器之间放置＆gt; 符号，仅选择直接后代。

在一个类上编写CSS并将其与另一个类组合编写有什么区别？

3 个答案: