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)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

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

  • 相关阅读:
    JavaScript基础初始时期分支(018)
    JavaScript基础尽量少使用全局变量(001)
    linux源码安装nodejs
    js导出excel
    http 状态码
    网站导航固定头部
    gulp编译less简单demo
    mysql设置连接等待时间(wait_timeout)
    mysql视图
    网站用户行为数据挖掘
  • 原文地址:https://www.cnblogs.com/ys-wuhan/p/6733561.html
Copyright © 2011-2022 走看看