从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
.one.two{ color:blue; },这两个类中间没有空格,表示one和tow在一起的时候起作用…