css后代选择器，子元素选择器

来源：互联网发布：天狼50软件价格编辑：程序博客网时间：2024/05/16 11:48

一，后代选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>12-css后代选择器.html</title>    <!--        后代选择器,找到指定特定的标签的所有后代,然后设置属性        1,格式:        标签名称1 标签名称2 ...{                属性:值;           }        先找到名称叫做标签名称1的标签,然后在此标签下找到名称是标签名称2的所有标签,最后设置属性值        例如:        div p{            }        2,注意点:        (1),后代选择器必须用空格隔开        (2),后代不一定是儿子,也可以是孙子        (3),后代选择器不仅仅可以使用标签名称,也可以使用其他的选择器(如id、class选择器)    -->    <style>        /*div p{            color: red;        }*/        /*#identtity p{            color: red;        }*/        /*.para p{            color: green;        }*/        .para .lip{            color: greenyellow;        }    </style></head><body><p>我是段落</p><div id="identtity" class="para">    <p>我是段落</p>    <p>我是段落</p>    <ul>        <li>            <p class="lip">我是段落</p>        </li>    </ul></div><p>我是段落</p></body></html>

二，子元素选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>13-css子元素选择器.html</title>    <!--        子元素选择器,找到指定标签中所有特定的直接子元素,设置属性值        1,格式:        标签名称1>标签名称2{            属性:值;        }        2,注意点:        (1),子元素选择器只会选择第一代选择器,不会选择被嵌套的其他标签        (2),子元素两个标签之间是以>号隔开,不是空格        (3),子元素选择器不仅仅可以使用标签的名称,还可以使用其他的选择器(如id、class选择器)    -->    <style>        div>p{            color: red;        }    </style></head><body><p>我是段落</p><div>    <p>我是段落</p>    <p>我是段落</p>    <ul>        <li>            <p>我是谁</p>        </li>    </ul></div><p>我是段落</p></body></html>

三，后代选择器和子元素选择器的区别

<!--        1,后代选择器和子元素选择器的区别        (1),后代选择器利用空格作为连接符号,子元素选择器利用>符号作为链接符号        (2),后代选择器指定的标签中,所有特定的后代标签,不管是儿子还是孙子... 都会被选中            而子元素选择器指定的标签中,所有特定的直接后代标签,不包括孙子以后的标签,只会将直接后代选中        2,共同点        (1),都可以使用id,class,标签选择器名称作为选择器        (2),都可以在使用空格或>连接符号无限的连接下去            例如:选择器1 选择器2 选择器3 ...{}                选择器1>选择器2>选择器3>...{}        3,企业中的开发        (1),如果想选中指定标签的所有特定的标签,就用后代选择器        (2),如果想选中指定标签的所有特定的直接(儿子)标签,就使用子元素选择器    -->

0 0