CSS Combination Selector

CSS Combination Selector

The combination selector illustrates the direct relationship between two selectors.

CSS combination selectors include various combinations of simple selectors.

There are four combination methods in CSS3:

Descendant selector (separated by spaces)

Child element selector (separated by greater than sign)

Adjacent sibling selectors (separated by plus signs)

Plain sibling selectors (separated by dashes)

Descendant selectors

Descendant selectors match all worthy elements descendant elements.

The following example selects all

elements and inserts them into the

element:

     
  
 
朝辞白帝彩云间
 
千里江陵一日还
 
 
两岸猿声啼不住
 
轻舟已过万重山
  

Child element selector

Compared with descendant selectors, child elements Selectors (Child selectors) can only select elements that are children of an element.

The following example selects all direct child elements

in the

element:

     
  
静夜思
 
 
床前明月光
 
疑是地上霜
 
 
 
举头望明月 
低头思故乡
 
  

Adjacent sibling selector

Adjacent sibling selector (Adjacent sibling selector) can select an element immediately following another element, and both have the same parent element.

If you need to select an element immediately after another element, and both have the same parent element, you can use the Adjacent sibling selector.

The following example selects all the first

elements after the

element:

    
  
清明
 
 
清明时节雨纷纷
 
路上行人欲断魂
 
 
借问酒家何处有
 
牧童遥指杏花村
  

Normal adjacent sibling selector

Normal sibling selection The selector selects all adjacent sibling elements of the specified element.

The following example selects all adjacent sibling elements

of all

elements:

     
  
 
画
 
 
 
远看山有色
 
近听水无声
 
 
春去花还在
 
人来鸟不惊
  

Adjacent refers to the next one, and it has nothing to do with the previous one.

Continuing Learning

||

• new file

清明

清明时节雨纷纷

路上行人欲断魂

借问酒家何处有

牧童遥指杏花村

submit Reset Code

Automatic operation