CSS第四天| 青训营笔记

这是我参与[第五届青训营]伴学笔记创作活动的第5天 其实css里面也有继承，后代选择器就涉及到了这个知识点，比如给定一个p标签，p标签里再放一个p标签，我们只想要最里面的那个p标签发生样式改变，那该怎么办呢？

/* 我想让div的后代，变成红色文字该怎么办？ */ div p { color: red; } /* 只需要把父标签写好，然后跟上空格，再写子标签就好了 语法格式：父选择器+空格+子选择器{} */

这是一个p标签

后代选择器指定了我们要选择的标签，从而缩小了被更改样式的范围，在上面的例子中，body里面的p标签并不会发生任何变化，但div里面的标签被选择器指定了，所以文字变为了红色

交集选择器也是一样的道理
 /* 目标：让第一行class="box"的p变红
        第二行p不能变 */
    p.box {
        color: red;
    }

    /* 语法格式：标签名.类名 + {}
    就可以实现交集选择器，既满足标签，又满足类 */

那假如有三层关系(父级，子级，子级的子级)，该怎么办呢？ /* 我只想选中子代a，不想选中孙子a怎么办？使用>符号就可以了 */ div>a { color: red; }

所以对css中的选择器做一个定义：要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的。 由于对css的解释是自上而下的，所以对一个元素的相同属性的描述，下面的描述会覆盖掉上面的描述。