CSS里什么是父元素和兄弟元素?

html-css026

CSS里什么是父元素和兄弟元素?,第1张

<html>

    <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里，套用源格式后，代码自动缩进，你很容易就能看出来的。

1、CSS兄弟相邻选择器加号

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

CSS兄弟相邻选择器加号，举例说明

HTML代码

<p>这里是第一个P标签</p><p>这里是第二个P标签</p><h2 class = 'h2'>标题H2</h2><p>这里是第一个P标签</p><p>这里是第二个P标签</p><p>这里是第三个P标签</p><p>这里是第四个P标签</p>

CSS代码

.h2 + p{

    color: red

  }

2、CSS兄弟选择器~(匹配选择器)

'~'匹配所有在指定元素之后的同级某个元素

举例说明一个，CSS的匹配选择器

HTML代码

<p>这里是第一个P标签</p><p>这里是第二个P标签</p><h2 class = 'h2'>标题H2</h2><p>这里是第一个P标签</p><p>这里是第二个P标签</p><p>这里是第三个P标签</p><p>这里是第四个P标签</p>

CSS代码

.h2 ~ p{

    color: red

    }

3、总结：

CSS中的兄弟选择符号‘~’，可以选择指定元素后的，同级的相同的所有元素。比如上面的示例，所以h2标签后的P标签全部被选择，并加入了样式

通过这两个例子，可以发现虽然这两个选择器都表示兄弟选择器，但是‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

其他选择器可参考

把有IMG子标签的的父标签的z-index值设置大于另外一个父标签，这样img就能看到了。自标签的z-index是建立在父标签的基础上的，加入A元素的z-index值低于B元素的，那么A元素下面的子元素的层级也同样都低于B元素里的子元素，即使你将A元素里的子元素设为z-index:9999；同理元素B里的子元素，即使是设的z-index:1它照样比元素A的层级要高；

另外，设置了z-index属性，需要对div标签设置定位才能生效，不管是绝对定位还是相对定位。