css中“~”(波浪号)、“,”(逗号)、“+”(加号)和“>”(大于号)详解

前言:笔记整理,内容并非原创


例子1:

代码:

p~ul{
   background:#029AFD;
}

段落P

      
  • 列表项1
  •   
  • 列表项2
  •   
  • 列表项3

解说:

p~ul选择前面有

元素的每个

    元素,即选择p之后出现的所有ul,两种元素必须拥有相同的父元素,但ul不必紧随p。
    css中“>”是css3中特有的选择器,A>B表示选择A元素的所有子B元素,与A B不同的是,A B选择所有后代元素,为A>B只选择一代。

    A B{}选择A所有的后代B元素
    A>B{}选择A的一代B元素
    A+B{}这个+是选择相邻兄弟,称作“相邻兄弟选择器”,如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器

    例子2:

    如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

     h1 + p {margin-top:50px;}
    

    这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。};

    例子3:

    实现下面图片这个效果


    1.PNG

    代码:

    ul li+li{
          border-top: 1px solid #ccc;
    }
    

    先不看后面的+li,意思就是选择ul中所有的后代li元素,因为后面使用了li+li,所以选择ul中第一个li之后所有的li标签并设置border-top。
    同理:

    li + li {font-weight:bold;}
    

    上面这个选择器只会把列表中的第二个及后面的li都变为粗体,但第一个列表项不受影响。

    总结


    1. A>B 表示选择A元素的所有子B元素(只选择第一代)
    2. A B 表示选择A元素的所有子B元素(选择在A标签里面所有的B元素,不止第一代)
    3. A+B表示HTML中紧随A的B元素:用一个结合符只能选择两个相邻兄弟中的第二个元素

你可能感兴趣的:(css中“~”(波浪号)、“,”(逗号)、“+”(加号)和“>”(大于号)详解)