zoukankan      html  css  js  c++  java
  • CSS的子选择器与后代选择器的区别

    来源于:http://www.jianshu.com/p/599654ba5f4a

    子选择器:

    一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:

    .food>li{border:1px solid red;}

    这行代码会使class名为food下的子元素(第一子代)li(水果、蔬菜)加入红色实线边框。

    包含(后代)选择器:

    包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:

    .first  span{color:red;}

    这行代码会使class名为first下的(所有后代)span标签内的字体颜色变为红色。

    区别:

    请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

    总结:>作用于元素的第一代后代,空格作用于元素的所有后代

  • 相关阅读:
    【convertio.co】免费在线文档转化神器
    成长需熬过“四苦”
    岁月饶过谁
    致我的未来
    一定要相信自己
    奋斗的意义是什么?
    一生一世一双人,半醉半醒半浮生
    逆境中的自己
    怎样才能让人看到你呢
    2020 遇见更好的自己
  • 原文地址:https://www.cnblogs.com/ys-wuhan/p/6733561.html
Copyright © 2011-2022 走看看