HTML中标签选择的问题（> ~ + 空格）

这两天看了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页改变颜色的时候有所体现，本萌新实在是看不出来，希望有看过该课程的达人，或者大神解惑！

拿不到钥匙的车放不进手机的歌

浏览 2159回答 2

2回答

Kusoku

这也就是css选择器，并不是很复杂的东西，结构化的选择器会涉及到DOM中的标签结构；首先需要搞清楚标签元素之间的层级关系父元素和子元素，单级直接嵌套<div><p></p></div>，属于父元素与后代元素中的一种特例同胞元素，拥有同一父级元素ul的<li></li><li></li>相邻兄弟元素，首先要求是同胞元素，而且还要相邻，中间不能被其他元素间隔父元素和后代元素，也就是标签的包含与被包含的关系父元素祖先元素

刚毅87

<!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>解释我都写在代码中了.望采纳!

随时随地看视频慕课网APP