[分享]css取子元素属性值

CSS是前端开发中的一个重要组成部分，它有着众多的属性和方法，其中一个值得关注的就是如何取子元素的属性值，下面我们就来学习一下吧。如何取子元素的属性值： 1、使用“>”符号 使用“>”符号...

CSS是前端开发中的一个重要组成部分，它有着众多的属性和方法，其中一个值得关注的就是如何取子元素的属性值，下面我们就来学习一下吧。

如何取子元素的属性值：
    
1、使用“>”符号
    使用“>”符号可以取子元素的属性值，但是只会匹配直接子元素，而不会匹配其子元素的子元素。例如：
    div>p{
        color: red;
    }
    这样就会在所有div的直接子元素p标签的文本颜色变成红色。

2、使用后代选择器
    后代选择器可以取到所有子元素（不论是直接子元素还是子元素的子元素）的属性值
    div p{
        color: red;
    }
    这样会使所有div中的p标签的文本颜色变成红色

3、使用伪类
    有时候我们需要取到嵌套在父元素中的某个特定的子元素，而这个子元素没有特定的标签或类名，这时候我们可以使用伪类：nth-child，例如：
    div:nth-child(2){
        color: red;
    }
    这样就会选出div中的第二个子元素来修改它的文本颜色。 

以上就是CSS取子元素属性值的三种方法，根据实际情况选择不同的方法来取得想要的效果。让我们一起来熟练使用它吧。