phpstudy集成环境

 首页 > CSS中的多类选择器优先级问题

CSS中的多类选择器优先级问题

从w3school看完多类选择器的概念，现在有一个疑问，请大神帮我看看。
我为最后一个段落设定了3个class：one two three，现在我在css部分规定了one和two的样式，最后一个段落的文字颜色就变成了蓝色，然后我又尝试了下只规定three的样式，最后一个段落的文字居然也是蓝色，这里面到底有什么规律呢？是否存在一个优先级问题？

代码1：规定one和two的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .one.two{
        color:blue;
    }
    /*这里虽然没有规定.three的样式，但是class为one two three的段落仍然变为了蓝色*/
    </style>
</head>
<body>
    <h1 class="one">根据css规则，我将变成绿色</h1>
    <p class="one">根据css规则，我将变成黄色</p>
    <h2 class="two">根据css规则，我将变成红色</h2>
    <p class="one two">根据css规则，我将变成蓝色</p>
    <p class="one two three">根据css规则，我将变成蓝色</p>
</body>
</html>

代码2：规定three的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .three{
        color:blue;
    }/*这里只规定了three的样式，但是class为one two three的段落仍然变为了蓝色*/
    </style>
</head>
<body>
    <h1 class="one">根据css规则，我将变成绿色</h1>
    <p class="one">根据css规则，我将变成黄色</p>
    <h2 class="two">根据css规则，我将变成红色</h2>
    <p class="one two">根据css规则，我将变成蓝色</p>
    <p class="one two three">根据css规则，我将变成蓝色</p>
</body>
</html>

w3school多类选择器链接：http://www.w3school.com.cn/css/css_selector_class.asp

举个例子来解释一下楼主遇到的问题，如果我给类a设置了css样式为字体颜色是白色，而类b设置了css样式为背景颜色是蓝色。在html中把这两个类赋给一个p标签

hello world


那么结果就是这个段落的字体颜色会变成白色而且背景颜色变为蓝色，就是说同时应用了两个class的样式。
而楼主所写的第二段代码最后一个p标签相当于有三个类就是one two和three，即使one和two类没有任何样式，但是three有样式，那么将会取三个类样式的并集，所以就显示了蓝色背景。假设我现在给four这个类设置css样式为实线边框，并给最后一个p标签添加这个类，那么最后这个p标签就回马上拥有实线边框这个样式了。

.one.two{ color:blue; },这两个类中间没有空格，表示one和tow在一起的时候起作用…

并不存在css的优先级问题，.one.two 表示当同时拥有两个选择器的时候才应用该样式，所以第一段代码字体显示才会是蓝色，然后第二段代码中只有最后一个p标签采用有three选择器，所以只有他应用。如果想了解选择器的优先级问题可以自己google下，很多资料的

这里不存在任何优先级的问题
.one.two 会选择所有同时含有.one类和.two类的元素应用样式
.three 会选择所有含有.three类的元素应用样式

【热门文章】
【热门文章】