关于选择器嵌套问题

CSIR · 发表于 2016-5-12 15:25:37

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 CSIR 于 2016-5-12 15:27 编辑

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="a.css" />
</head>
<div class="aa">
<div class="bb">居中啊</div>
</div>
<body>
</body>
</html>

复制代码

这是HTML

.aa{
width: 500px;
height: 500px;
border: blue;
border: 1px solid red;
margin: 0 auto;
}
.aa.bb{
width: 200px;
height: 200px;
background: blue;
margin: 0 auto;
}

复制代码

这是CSS
但是效果并非想象中的那样，
这是为什么？

943339665 · 发表于 2016-5-13 11:09:19

.aa.bb改成.aa .bb就可以了，两个类选择器中间没有空格代表同时满足两个类，有空格代表后一个是前一个类的子孙。
例如： .aa .bb {....}

和 .aa.bb{....}

还有 .aa > .bb {....}
' .aa .bb' 是选择 aa 下面所有 bb,即bb是aa的子孙。
'.aa.bb' 是选择同时拥有aa和bb的类. 这种情况一般在html中会这样写<div class=aa bb>.
'.aa> .bb' 表示取aa下的第一个bb孩子。
你要是学html和css的话强烈推荐一个网站：http://www.w3school.com.cn/h.asp
里面讲解通俗易懂。

账号		自动登录	找回密码
密码			立即注册