关于CSS选择器连续性的问题

在html中有以下结构:


<div class="row100">
    <div class="col">
        <div class="inputBox textarea">
            <div>123</div>
        </div>
    </div>
</div>

在CSS文件中修改其样式:


  • 选择器1:
.row100 .inputBox .textarea div{}
  • 选择器2:
.row100 .inputBox div{}
  • 选择器3:
.row100 div{}

选择器2和3是正确的,两者区别在于权重值大小不同。而选择器1是错误的。

  • 因为在选择器1中 .inputBox .textarea两个选择器指向同一个标签:div,所以这个选择器是错误的。

重点:在修改样式时所写的CSS选择器语句中,不能出现一个以上指向同一个标签的选择器。

原文地址:https://www.cnblogs.com/AhuntSun-blog/p/12021763.html