CSS组合器/组合符详细介绍和用法

2021年3月17日18:12:38 发表评论 629 次浏览

CSS组合符解释了两个选择器之间的关系。CSS选择器是用于出于样式目的选择元素的模式。 CSS选择器可以是简单选择器, 也可以是复杂选择器, 它由多个使用组合器连接的选择器组成。

CSS中有四种组合器, 下面将进行讨论:

  • 通用同级选择器(〜)
  • 辅助同级选择器(+)
  • 子选择器(>)
  • 后代选择器(空格)

常规同级选择器:通用同级选择器用于选择在第一个选择器元素之后的元素, 并且还与第一个选择器元素共享相同的父元素。这可用于选择共享相同父元素的一组元素。

<!DOCTYPE html>
< html >
< head >
     < title >Combinator Property</ title >
     < style >
         div ~ p{
             color: #009900;
             font-size:32px;
             font-weight:bold;
             margin:0px;
             text-align:center;
         }
         div {
             text-align:center;
         }
     </ style >
</ head >
  
< body >
     < div >General sibling selector property</ div >
     < p >lsbin</ p >
     < div >
         < div >child div content</ div >
         < p >G4G</ p >
     </ div >
     < p >Geeks</ p >
     < p >Hello</ p >
</ body >
</ html >

输出如下:

组合器属性

相邻兄弟选择器:相邻同级选择器用于选择相邻元素或指定选择器标记旁边的元素。该组合器仅选择一个紧挨指定标签的标签。

<!DOCTYPE html>
< html >
< head >
     < title >Combinator Property</ title >
     < style >
         div + p{
             color: #009900;
             font-size:32px;
             font-weight:bold;
             margin:0px;
             text-align:center;
         }
         div {
             text-align:center;
         }
         p {
             text-align:center;
         }
     </ style >
</ head >
  
< body >
     < div >Adjacent sibling selector property</ div >
     < p >lsbin</ p >
     < div >
         < div >child div content</ div >
         < p >G4G</ p >
     </ div >
     < p >Geeks</ p >
     < p >Hello</ p >
</ body >
</ html >

输出如下:

组合器属性

子选择器:该选择器用于选择作为指定标签的直接子元素的元素。此组合器比后代选择器严格, 因为如果组合器具有第​​一个选择器元素作为其父级, 则它仅选择第二个选择器。

<!DOCTYPE html>
< html >
< head >
     < title >Combinator Property</ title >
     < style >
         div > p{
             color: #009900;
             font-size:32px;
             font-weight:bold;
             margin:0px;
             text-align:center;
         }
         div {
             text-align:center;
         }
         p {
             text-align:center;
         }
     </ style >
</ head >
  
< body >
     < div >Child selector property</ div >
     < p >lsbin</ p >
     < div >
         < div >child div content</ div >
         < p >G4G</ p >
     </ div >
     < p >Geeks</ p >
     < p >Hello</ p >
</ body >
</ html >

输出如下:

组合器属性

后代选择器:该选择器用于选择指定标签的所有子元素。标签可以是指定标签的直接子级, 也可以位于指定标签的深处。该组合器将两个选择器组合在一起, 以使所选元素的祖先与第一个选择器元素相同。

<!DOCTYPE html>
< html >
< head >
     < title >Combinator Property</ title >
     < style >
         div p{
             color: #009900;
             font-size:32px;
             font-weight:bold;
             margin:0px;
             text-align:center;
         }
         div {
             text-align:center;
         }
         p {
             text-align:center;
         }
     </ style >
</ head >
  
< body >
     < div >Descendant selector property</ div >
     < p >lsbin</ p >
     < div >
         < div >child div content</ div >
         < p >G4G</ p >
         < p >Descendant selector</ p >
     </ div >
     < p >Geeks</ p >
     < p >Hello</ p >
</ body >
</ html >

输出如下:

组合器属性

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: