<head>
<title>...</title>
</head>
<body>
<ul>
<li>332</li>
<li>233234</li>
</ul>
<p>...</p>
</body>
</html>
例如上面的html结构:
<html>元素就是<body>和<head>的父元素(上下级,包含关系)
而<body>又是<ul>和<p>的父元素
<ul>又是两个<li>的父元素。
两个<li>就是兄弟元素(平级)
<body>和<head>也是兄弟元素,依此类推。
相应的, ul 和p是body的子元素, 而 li 呢, 是body的后代元素(后代选择符)。
你在dreamweaver里,套用源格式后,代码自动缩进,你很容易就能看出来的。
兄弟组件怎么粘在一起css对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:
可选择紧接在另一个元素后的元素,且二者有相同的父级元素 下面代码中,item2和item3会有效果,而item1不会有
HTML代码:
item1
item2
item3
CSS代码:li+li { font-size: 50px}
1、如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
2、相邻兄弟选择器使用加号“+”做为连接符。
示例
#p1 + p {
margin-top: 50px
}
This is paragraph 1.
This is paragraph 2.
This is paragraph 3.
This is paragraph 4.
元素之间的关系:父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代的元素,父元素也是祖先元素
后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
兄弟元素:拥有相同父元素的元素叫做兄弟元素
兄弟元素选择器