zoukankan      html  css  js  c++  java
  • CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结:

    1,后代选择器和子选择器区别:

    ①写法不一样:
    后代选择器的标识为:空格
    如:ul li{150px;} 【ul和li之间用空格隔开】
    子选择器的标识为:>
    如:ul>li{150px;}【ul和li之间用>隔开】
    相邻兄弟选择器的标识为:+
    如:h1 + p {margin-top:50px;}h1和p之间用+隔开

    ②功能不一样:
    后代选择器(descendant selector),又称为包含选择器,可以选择某元素后代的元素(子子孙孙元素),如上例,后代选择器是选择ul包围的所有元素中的所有li元素,包括儿子元素、孙子元素、曾孙元素等等等。
    与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素儿子元素的元素,子选择器仅仅选择ul包围的儿子元素中的 li元素,不包括孙元素、曾孙元素等等等。
    相邻兄弟选择器很好理解,即选择紧接在另一元素后的元素,且二者有相同父元素。

    ③兼容性不一样:
    后代选择器主流浏览器都兼容。
    子选择器和相邻兄弟选择器在IE6是不被支持的选择器,会出bug!
    
    

    2,后代选择器,子选择器和相邻兄弟选择器结合使用示例:

    请看下面这个选择器:

    html > body table + ul {margin-top:20px;}

    这个选择器解释为:选择紧接在 table 元素后出现的第一个相邻兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

     
  • 相关阅读:
    在Visual Studio中使用NUnit
    C#调用Exe
    网页用chrome打开为乱码
    ctags最基本用法
    Facebook Connect
    SVM初体验
    python中可恶的回车符
    初识PowerDesigner
    Mysql中文乱码问题解决
    stat函数
  • 原文地址:https://www.cnblogs.com/iceflorence/p/5796537.html
Copyright © 2011-2022 走看看