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

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


例子1:

代码:

p~ul{
   background:#029AFD;
}
<p>段落P</p>
<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ul>

解说:

p~ul选择前面有<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元素:用一个结合符只能选择两个相邻兄弟中的第二个元素

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,146评论 1 92
  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 8,447评论 0 13
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 26,276评论 1 45
  • 说在前面 相信大多数人都会有这样的体验。当双手在键盘上一直打字或者写代码的时候,一次鼠标操作会让你崩溃。尤其是频繁...
    黑泥卡阅读 154评论 0 0
  • 洋洋大海中,漂浮着一座又一座的冰山,有大有小,形状各异。在太阳的照射下,冰山们都各自闪出独特的漂亮的光芒。 有一座...
    经典_cj阅读 251评论 2 3
  • centos最小化安装系统不会开机启用网卡,所以你无法使用yum、 wget(最小化安装不会安装)。 1、cd /...
    Martain阅读 221评论 0 0
  • 悦读内容: 《活着》稻盛和夫 绘本《蓝精灵-两个精灵村》 收获: 001 要用未来的能力去迎接挑战。 如果凡事都以...
    moka莫卡阅读 33评论 0 0