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

html-css021

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

CSS都是写样式的,不涉及动态操作,所以没有寻找父元素的技能,如果你想给某个元素的父元素设样式,直接给它加class或id就好了。js是有可能涉及到运行过程中有dom的动态操作的,所以有这个技能,就是xx.parentNode, 就能直接拿到xx的父元素了。

css中经常会遇到设置了父元素的透明度后,会直接影响到子元素的透明度。

例如:

设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。

即使设置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基础上设置的,因此子元素的opacity还是0.5。

解决方法:

为父元素设置background: rgba(0,0,0,0.5)时设置透明度,不再加opacity属性。