这两天看了Amy老师的css3平滑效果课程，在里面各种炫酷的动画效果，其中老师用了好几种选择的方法 比如：#st-content > a #st-content ~a #st-content + a #st-content .abc a 其中老师说了~与+的区别， 但是我产生疑问了 比如第一个#st-content > a意思是id 为st-content下的a标签 为什么不用#st-content a呢？ 这其中貌似有一种我不理解的区别 在老师最后写课件2、4页改变颜色的时候有所体现，本萌新 实在是看不出来，希望有看过该课程的达人，或者大神解惑！
2 回答
已采纳
Kusoku
TA贡献14条经验 获得超5个赞
这也就是css选择器，并不是很复杂的东西，结构化的选择器会涉及到DOM中的标签结构；
首先需要搞清楚标签元素之间的层级关系
父元素和子元素，单级直接嵌套<div><p></p></div>，属于父元素与后代元素中的一种特例
同胞元素，拥有同一父级元素ul的<li></li><li></li>
相邻兄弟元素，首先要求是同胞元素，而且还要相邻，中间不能被其他元素间隔
父元素和后代元素，也就是标签的包含与被包含的关系
父元素
祖先元素
刚毅87
TA贡献345条经验 获得超309个赞
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/*空格连接,表示 #div1 下的后代 p, p 包括子代和后代*/
#div1 p {
color: greenyellow;
}
/*大于号连接,只表示#div1 下的子代 p*/
#div1>p {
color: red;
}
/*加号连接,表示#div1的兄弟级 p*/
#div1+p {
color: blue;
}
</style>
</head>
<body>
<div id="div1">
<p>我是 p 标签1</p>
<div id="">
<p>我是 p 标签2</p>
</div>
</div>
<p>我是 p 标签3</p>
</body>
</html>解释我都写在代码中了.
望采纳!
- 2 回答
- 0 关注
- 2268 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消