css 规则中两个类连在一起和中间有空格的区别

作者: admin 分类: css 发布时间: 2019-02-17 01:01

在前面的文章中其实涉及到了这个问题,但是之前并没有搞清楚这个问题,前面的文章:

1,Bootstrap中元素的padding重写(以超大屏幕Jumbotron为例)

2,CSS 里一个class跟两个类名的问题

今天百度查询了下,通过一个例子终于明白了区别,下面看例子:

<!DOCTYPE html>
<html>    
<head>
<meta charset="utf-8"> 
<title>类选择器</title> 
<style> 
.user.login /* 匹配同时包含user和login的元素 */
{
    font-size: 35px;
}

.user .login{ /* 匹配含user下的含login的元素 */
    background-color:green;
}

</style>
</head>
<body>

<div class='user'>你好。这是一个 DIV 元素,class='user'。
    <div class='login'>你好。这是一个 DIV 元素,class='user login'。</div>    
</div>
<div class='login'>你好。这是一个 DIV 元素,class='login'。</div>
<div class='user login'>你好。这是一个 DIV 元素,class='user login'。</div>

</body>
</html>

运行效果如下:

运行效果图

这个如果两个类之间有冲突会怎么样呢?我们来测试下,代码如下:

<!DOCTYPE html>
<html>    
<head>
<meta charset="utf-8"> 
<title>类选择器</title> 
<style> 

.user.login /* 匹配同时包含user和login的元素 */
{
    background-color:yellow;
}



.user .login{ /* 匹配含user下的含login的元素 */
    background-color:green;
}
.login{
	background-color:red;
}

</style>
</head>
<body>

<div class='user'>你好。这是一个 DIV 元素,class='user'。
    <div class='login'>你好。这是一个 DIV 元素,class='user login'。</div>    
</div>
<div class='login'>你好。这是一个 DIV 元素,class='login'。</div>
<div class='login user'>你好。这是一个 DIV 元素,class='user login'。</div>

</body>
</html>

运行结果如下:

运行结果2截图

从这个图,可以看到.user.login中间没有空格时,优先级依然跟.user .login一样,都是比直接写.login一个类时的定位更准确,优先级更高。并且由于.user.login中间没有空格时代表的含义是一个元素同时包含这两个类才算匹配到,所以当有冲突时,这个的优先级总是更高而如果没有冲突,那么.login里定义的其它属性仍然沿用生效。另外.user.login和.login.user是一样的,都是代表一个元素同时包含这两个类时起作用,没有先后顺序关系,同样的,在元素中<div class='login user'><div class='user login'>效果也是一样的。

相关文章

一条回应:“css 规则中两个类连在一起和中间有空格的区别”

  1. 想进入IT行业做技术大牛说道:

    感谢站长的总结,在网上搜索后,这个解答最清晰易懂,还拓展了冲突情况,最全面。

发表评论

邮箱地址不会被公开。 必填项已用*标注

Powered by 草根站长笔记 © 2015-2020 草根站长笔记 Inc.版权所有,禁止转载