css后代选择器有哪些


本文摘自PHP中文网,作者青灯夜游,侵删。

css后代选择器有:1、“父代元素 * {}”,从父代元素中的找到所有子代元素。2、“父代 子代{}”,是从父代 元素中找到指定子代元素;3、“父代 子代1 子代2{}”,从父代中找到子代1,再从子代1找到子代2。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

后代选择器(descendant selector)又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

后代选择器集中形式:

1、父代 * {}从 父代 中的找到 所有子代。

2、父代 子代1{} 是从 父代 中找到 子代1 或者 父代 子代2{} 是从 父代 中找到 子代2 。

3、父代 子代1 子代2{} 这个是从 父代 中找到子代1,再从 子代1 找到 子代2。

第一种形式:虽然是全部选中但是*的优先级较低。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            div{

                padding: 20px;

                background: rgba(255,0,0,0.2);     //这是给它一个红色,透明度为0.2

            }

        .a *{

                border: 2px solid black;  //这里是选中类a的所有后代

            }

        </style>

    </head>

    <body>

        <div class="a">a

            <div class="b">b

                <div class="c">c</div>

            </div>

        </div>

    </body>

</html>

第二种形式:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            div{

                 

                padding: 20px;

                background: rgba(255,0,0,0.2);

            }

             

        .a .b{

                border: 2px solid black; //同理这里选择 .c 也是可以的因为他们都是 .a 的后代。

            }

             

             

        </style>

    </head>

    <body>

        <div class="a">a

            <div class="b">b

                <div class="c">c</div>

            </div>

        </div>

    </body>

</html>

阅读剩余部分

相关阅读 >>

css color属性怎么用

css文件中怎么引用图片不显示

css border属性怎么用

css 实现背景动态渐变效果

css怎么让字体更大

手把手教你css如何实现毛玻璃效果

css怎么写五角星

html5中一些可以优化的细节介绍

css怎么实现平方

css box-direction属性怎么用

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...