Preface : When we code , There is often a need to add or remove styles to the first or last element , Some of the more special is to select the first few elements to add or remove styles , Here's the record css Common selectors in selectors : Adjacent Sibling Selectors (+)、 Child selectors (>)、 Brother selector (~)、first-child、:last-child、:nth-child()、:nth-last-child() Usage of .

Adjacent Sibling Selectors (+)

The adjacent sibling selector selects the element immediately after another element , And they have the same father element . notes : The same as the child Union , There can be a blank sign next to the adjacent brother union sign .
device .

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> Adjacent Sibling Selectors </title>
    <style type="text/css">
        h1+p{
            color:red;
        }
    </style>
</head>
 
<body>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
</body>
</html>

The renderings are as follows :

 Insert picture description here

Neighboring brothers will only affect the following p Style of label , It doesn't affect the style of the brothers above .

Notice the ’+’ The meaning of ’and’ The meaning is different , The style of the sibling selector is applied to sibling elements , It has nothing to do with the element style of reference , As the above example only affects p Style of element , Without affecting h1 Style of label .

Of course, this will also loop through , That is, when two sibling elements are the same , It's going to loop through :

Example :

<style type="text/css">
    li + li {
        color:red;
    }
</style>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>

![ Picture description ][1]

You can see the first one li The font doesn't turn red , The second and third elements turn red , That's because of the third li It's the second one. li Brother element of , So it also applies styles .

Brother selector (~)

The function is to find all the siblings behind a specified element .
Sample code :

<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>
</head>
<body>
    <p>1</p>
    <h1>2</h1>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>

Effect display :
![ Picture description ][2]

Descendant selector ( Descendant Selectors )

You can choose the elements that are the descendants of an element ( Elements of children and grandchildren )

Child selectors (>)

You can only choose elements that are the children of an element , Sun element is not included 、 Great grandson element, etc .

Descendant selector , Example of using a sub selector in combination with an adjacent sibling selector :

Look at the selector below :

html > body table + ul {margin-top:20px;}

This selector is interpreted as : The choice is right next to table The first sibling after the element ul Elements , The table The element is contained in a body In the elements ,body The element itself is html Child element of element .

:first-child Selectors

li:first-child
{
background:yellow;
}
<ul>
  <li> coffee </li>
  <li> tea </li>
  <li> Coca Cola </li>
</ul>
<ol>
  <li> coffee </li>
  <li> tea </li>
  <li> Coca Cola </li>
</ol>

design sketch
[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-LraweVjq-1597820882615)(/img/bVbhEOE)]

It is worth noting that , If the first element of its parent element (p) It's not time to specify type elements (li), Then the first element will not have a style

li:first-child
{
background:yellow;
}
<ol>
  <p> test </p>
  <li> coffee </li>
  <li> tea </li>
  <li> Coca Cola </li>
</ol>

design sketch
[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-i0WfhykI-1597820882618)(/img/bVbhESX)]

:last-child Selectors

:last-child The selector matches each element that belongs to the last child of its parent element .

Tips :p:last-child Equate to p:nth-last-child(1).

eg: Specifies the... That belongs to the last child of its parent element p The background color of the element :

p:last-child
{ 
background:#ff0000;
}
<body>
<h1> This is a title, </h1>
<p> The first paragraph .</p>
<p> The second paragraph .</p>
<p> The third paragraph .</p>
<p> The fourth paragraph .</p>
<p> The fifth paragraph .</p>
</body>

effect :

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-I1Nly7iw-1597820882628)(/img/bVbhEUp)]

explain :p The parent element of the tag is body,body The last one on the label p The element is the fifth paragraph

:nth-child()

:nth-child() Selectors , This selector selects the first... Of the parent element N Sub elements , It's not about type .

p:nth-child(2)
{
background:#ff0000;
}
<body>
<h1> This is a title, </h1>
<p> The first paragraph .</p>
<p> The second paragraph .</p>
<p> The third paragraph .</p>
<p> The fourth paragraph .</p>
<p><b> notes :</b>Internet Explorer  I won't support it  :nth-child()  Selectors .</p>
</body>

:nth-child() Detailed usage

nth-child(3) Represents the third element in the selection list .

nth-child(2n) Represents an even tag in the list , Choose the 2、 The first 4、 The first 6…… label

nth-child(2n-1) Represents an odd tag in the selection list , Namely choice The first 1、 The first 3、 The first 5、 The first 7…… label

nth-child(n+3) Indicates the label in the selection list from 3 From the beginning to the end (>=3)

nth-child(-n+3) Indicates the label in the selection list from 0 To 3, That is less than 3 The label of (<=3)

A combination of the two , You can limit the selection of a range , Select the first 6 One to the first 9 individual :nth-child(n+6):nth-child(-n+9)

nth-last-child(3) Represents the last... In the selection list 3 A label

CSS3 Selectors :nth-child() Usage of

:nth-of-type(n)

:nth-of-type(n) The selector matches the second... Of a specific type that belongs to the parent element N Each element of a child element .

n It could be a number 、 Key words or formulas .

p:nth-of-type(2)
{
background:#ff0000;
}
<body>
<h1> This is a title, </h1>
<p> The first paragraph .</p>
<div> test </div>
<p> The second paragraph .</p>
<p> The third paragraph .</p>
<p> The fourth paragraph .</p>
<p> The fifth paragraph .</p>
</body>

design sketch :

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-KCl1bOki-1597820882636)(/img/bVbhEYD)]

:nth-last-child() Selectors

:nth-last-child(n) Selector matching belongs to the N Each element of a child element , Regardless of the type of element , Count from last child .

n It could be a number 、 Key words or formulas .

Tips : see also :nth-last-of-type() Selectors , This selector selects the first... Of the parent element N Child elements of the specified type , Count from last child .

CSS3 :not Selectors

:not(selector) Selector matches unspecified elements / Every element of the selector .

more css Please refer to :CSS Selector reference manual
http://www.w3school.com.cn/c***ef/css_selectors.asp

csss Attribute selector

Selectors Example example
[attribute] [target] Choose all with target Attribute element
[attribute=value] [target=-blank] Choose all to use target="-blank" The elements of
[attribute~=value] [title~=flower] Select that the title property contains independent words "flower" All elements of
[attribute ^= language] [lang ^= en] [lang ^= en] Select a lang The starting value of the property ="EN" All elements of
[attribute $= language] [lang $= en] Select a lang The end value of the property ="EN" All elements of
[attribute *= language] [lang *= en] Select a lang Inclusion of attributes "EN" All elements of

About CSS In the property selector “~=” and “*=” The difference between

"value It's the whole word " Type comparison symbol :  ~=  ,  |=

"value It's a concatenated string " Type comparison symbol :  *=  ,  ^=  ,  $=

[attribute~=value]  The independent word in the attribute is value
[title~=flower]  
<img src="/i/eg_tulip.jpg" title="tulip flower" />
[attribute*=value]  Attribute to do string splitting , As long as it can be disassembled value This word will do
[title~=flower]  
<img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

Pseudo class selector

 Insert picture description here

Pseudo element selector

 Insert picture description here

The difference between pseudo class and pseudo element

  • Pseudo elements and pseudo classes are designed to style special needs , Basically the same definition .
  • Pseudo classes add extra styles to an existing element like class selectors ; Pseudo elements add styles to their own virtual elements .

Reference resources :https://segmentfault.com/a/1190000013737796

Expand

![ Picture description ][3]

There are many ways to realize the right border of the menu bar , Combined with the selector described above , The implementation methods are as follows :

One 、 Conventional methods :

.nav li{
    border-right:1px solid #fff;
}
.nav li:last-child{
    border-right-width:0px;
}

Two : Combine adjacent brother selectors (+)

.nav li + li{
    border-left:1px solid #fff;
}

3、 ... and 、 Combine brother selector (~)

.nav li:first-child ~ li{
    border-left:1px solid #fff;
}

Four 、 combination :not() Selectors

.nav li:not(:last-child){
    border-right:1px solid #fff;
}