关于选择器嵌套问题
本帖最后由 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
但是效果并非想象中的那样，
这是为什么？ .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
里面讲解通俗易懂。
页:
[1]