欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

css中“~”(波浪号)波浪线、“,”(逗号)、 “ + ”(加号)和 “ > ”(大于号)是什么意思? 有大用

  为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景:

   
  1. p~ul{
  2.        background:#ff0000;
  3. }
  4. <p>快乐生活</p>                
  5. <ul>                
  6.       <li>生活</li>                
  7.       <li>生活</li>                
  8.       <li>生活</li>                
  9. </ul>                

 

p~ul 选择前面有 <p> 元素的每个 <ul> 元素。

 

       ~的定义和用法    

  p~ul选择器 p之后出现的所有ul。    

  两种元素必须拥有相同的父元素,但是 ul不必直接紧随 p。    

       css中“>”是css3特有的选择器,A>B 表示选择A元素的所有子B元素。    

  与A B的区别在于,A B选择所有后代元素,而A>B只选择一代。    

       .a,.b{逗号指相同的css样式};    

       .a .b{空格指后代元素};    

       .a>.b{大于号指子代元素};    

       .a+.b{这个“+”是选择相邻兄弟,叫做“相邻兄弟选择器”
  如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
  例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
  h1 + p {margin-top:50px;}
  这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。};
   


来自  https://blog.csdn.net/suoyasong/article/details/80528218


“〜”(波浪号/波浪形/旋转)CSS选择器是什么意思?
What does the “~” (tilde/squiggle/twiddle) CSS selector mean?


温馨提示:将鼠标放在语句上可以显示对应的英文。   或者   

搜索~字符并不容易。 我查看了一些CSS,发现了这个

.check:checked ~ .content {
}

这是什么意思?

  


~选择器实际上是通用同级组合器 (在选择器级别4中重命名为后续同级组合 ):

通用同级组合器由分隔两个简单选择器序列的“波浪号”(U + 007E,〜)字符组成。 这两个序列所表示的元素在文档树中共享相同的父对象,而第一个序列所表示的元素在第二个所表示的元素之前(不一定紧接)。    

考虑以下示例:


 .a ~ .b { background-color: powderblue; }

 <ul> <li>1st</li> <li>2nd</li> <li>3rd</li> <li>4th</li> <li>5th</li> </ul>


.a ~ .b与第4个和第5个列表项匹配,因为它们:

  • .b元素

  • .a兄弟姐妹

  • 按HTML源顺序显示在.a之后。

同样, .check:checked ~ .content.check:checked同级项的所有.content元素匹配,并出现在其后。

===============>>#2 票数:170

通用同级组合器

通用的同级组合器选择器与相邻的同级组合器选择器非常相似。 不同之处在于,被选择的元素不需要立即在第一个元素之后,而是可以出现在其后的任何位置。    


还可以检查该家族中的其他组合器 ,然后回到这个特定的组合器。

  • ul li

  • ul > li

  • ul + ul

  • ul ~ ul

清单示例:

  • ul li - 寻找内部 -选择所有li放置(任意位置)的内部元件ul ; 后代选择器

  • ul > li 向内看 - 选择ul 的直接 li元素; 即它将只选择ul直子li ; 子选择器子组合器选择器

  • ul + ul 向外看 -在ul立即选择ul ; 它不是在寻找内部,而是在寻找紧随其后的元素。 相邻兄弟选择器

  • ul ~ ul - 向外看 -选择所有ul后面的ul不要紧,它在哪里,但两者ul应具有相同父节点; 通用兄弟选择器


我们在这里看到的是通用兄弟选择器

===============>>#4 票数:27

它是General sibling combinator并在@Salaman的答案中作了很好的解释。

我错过的是+且与~密切相关的Adjacent sibling combinator 。

例子是

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li>1st</li>
  <li>2nd</li>
  <li>3rd</li>
  <li>4th</li>
  <li>5th</li>
</ul>

  • 匹配.b元素

  • .a相邻

  • 在HTML中的.a之后

在上面的示例中,它将标记为2nd li而不是4th。


  .a + .b { background-color: #ff0000; }

 <ul> <li>1st</li> <li>2nd</li> <li>3rd</li> <li>4th</li> <li>5th</li> </ul>


JSFiddle

===============>>#5 票数:6

请注意,在属性选择器(例如[attr~=value] )中,波浪号

表示一个属性名称为attr的元素,其值是一个用空格分隔的单词列表,其中之一就是value 。    

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors


来自  https://stackoom.com/question/jEu6/%E6%B3%A2%E6%B5%AA%E5%8F%B7-%E6%B3%A2%E6%B5%AA%E5%BD%A2-%E6%97%8B%E8%BD%AC-CSS%E9%80%89%E6%8B%A9%E5%99%A8%E6%98%AF%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D

普通分类: