Adjacent sibling selector (+)

Definition: The Adjacent Sibling selector selects the element immediately following another element that has the same parent element.

HTML code:

< p > this is the first p tag < / p > < p > this is the second p tag < / p > < h2 > title h2 < / h2 > < p > this is the third p tag < / p > < p > this is the fourth p tag < / p > < p > this is the fifth p tag < / p > CSS styles: h2 + p {color: red; } the result:Copy the code

<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li>  <li>List item 3</li> </ol> li + li {color:red; } the result:Copy the code

List item 2 and List item 3 are both selected

First, analyze the selector style: li+li{}, which literally selects all the first Li elements after the li tag

  • Obviously the first Li is not going to be selected, because it is not preceded by li
  • The second LI is selected because it is the next li tag to the first li tag
  • The third LI tag is also selected because the previous one to the third LI tag is also li and meets the li+li{} condition: the first LI tag after the li tag

Because the CSS selector is styled li+li{}, the li tag in the code can always apply this “formula”.

Sibling selector (~), also known as match selector

Definition: finds all siblings of a specified element

Results:

In both cases, you can see that while both selectors represent sibling selectors, the ‘+’ selector means that the adjacent siblings of an element, that is, next to each other, are single (special case: loop multiple). The ‘~’ selector represents all the specified elements at the same level after an element, emphasizing all.

Child selector (>)

Definition: You can only select elements that are children of an element (direct children)

Effect:

:first-child

Definition: A specified selector used to select the first child of an element belonging to its parent

Well, at first glance it doesn’t seem very clear, so this selector is very misleading. There are two common misconceptions:

  • Myth # 1: E:first-child selects the first child of E.
  • Myth # 2: E:first-child selects the first E element of the parent element of E.

Select E as long as it is the first child of its parent. It needs both “first child” and “this child happens to be E”.

<style> span:first-child{color: red; } p:first-child{color: blue; } /* The first child of the parent of the p element is a div instead of a p element, so this style does not work */ I :first-child{color: orange; </style> <div class="demo"> <div>. -- The first span element is the first span of its parent P element, colored red --> < P ><span> the first span</span> the first paragraph P<span> the second span</span></ P ><! -- The first I element is the first I of its parent a element, colored orange --> <p> A link < I > the first I element </ I ></p> <! - the second element is its parent I a element of the first I, change the orange color - > < p > < I > a link to the second I elements < / I > < / p > < p > a link < / p > < / div >Copy the code

Effect:

:nth-child(n)

Definition: This selector picks the NTH child of the parent element (it also needs to be an element of that type)

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> </ style> p:nth-child(2) { background:#ff0000; } < / style > < / head > < body > < h1 > this is a title < / h1 > < p > this is the first paragraph. </p> <p> This is the second paragraph. </p> <p> This is paragraph three. </p> <p> This is paragraph four. </p> <p><b> Note :</b> Internet Explorer 8 and earlier browsers do not support the nth-child() selector.</p> </body> </ HTML >Copy the code

Effect:

:nth-child(n)

Nth-child (3) indicates the third element in the selection list.

Nth-child (2n) indicates the even label in the list, that is, select the 2nd, 4th, 6th… The label

Nth-child (2n-1) selects the odd number of labels in the list, that is, the first, third, fifth, seventh… The label

Nth-child (n+3) selects labels from the third to the last in the list (>=3)

Nth-child (-n+3) selects labels from 0 to 3 in the list, i.e. labels less than 3 (<=3)

Nth-last-child (3) indicates the third-to-last label in the selection list

:nth-of-type(n)

Definition: A selector matches the NTH element of a particular type belonging to the parent element

<! DOCTYPE html> <html> <head> <style> p:nth-of-type(2) { background:#ff0000; } </style> </head> <body> <h1> This is the first paragraph of the title </h1> <p>. </p> <p> Second paragraph. </p> <p> Third paragraph. </p> <p> Fourth paragraph. </p> <p> The fifth paragraph. </p> </body> </html>Copy the code

Effect: