Css--css selector for the front end

Learn the CSS selector this week.

The most commonly used work is the element selector, the ID selector, the class selector, and the descendant selector.

There are some less common but powerful selectors are easy to overlook, this study summarizes.

1. Descendant selector and descendant selector

Descendant selector:element1 element2, finds all element2 that are descendants of Element1

    <style type= "Text/css" >        {                background: green;         }      </style>    <div class= "wrapper" >        <div class= "MyApp" >            <p> changing styles with descendant selectors </p>            <div>                <p> change style via descendant selector 1</p>                <p> change style with descendant selector 2</p>            </div>        </div>    </div>

Descendant selector:element1>element2 to find the Element2 of element1 descendants

    <style type= "Text/css" >        {            background: red;        }     </style>    <div class= "wrapper" >        <div class= "MyApp" >            <p> changing styles with descendant selectors </p>            <div>                <p> cannot change style through descendant selector 1</p>                <p> cannot change style through descendant selector 2</p>            </div>        </div>    </div>

2. Pseudo-class selector: First-child and: First-of-tye

First-child:element:first-child, finds the element, which is the first child of its parent

    <!--the background color of the first and third p can turn red, and the background color of span cannot be red---    <style type=        "Text/css" >{             Background: red;        } {background: red;            }                     </style>    <div class= "wrapper" >        <div class= "MyApp" >            <p> This is the first P element , and also the first sub-element of the first div </p>            <span> This is the first SPAN element </span>            <span> This is the second span element </span>            <p> This is the second P element </span>            <div>                <p> This is the third P element and the first child element of the second Div </p>                <p> This is the fourth P element </p>            </div>        </div>    </div>

First-of-tye:element:first-of-tye, finds element, which is the first child of that type of the parent of the element

    <!--the first third p and the first span of the background color can be red--    <style type= "Text/css" >        {            background : red;        } {background: red;            }                     </style>    <div class= "wrapper" >        <div class= "MyApp" >            <p> This is the first P element , and also the first sub-element of the first div </p>            <span> This is the first SPAN element </span>            <span> This is the second span element </span>            <p> This is the second P element </span>            <div>                <p> This is the third P element and the first child element of the second Div </p>                <p> This is the fourth P element </p>            </div>        </div>    </div>

3. Pseudo-Class selector: Last-child and: Last-of-tye

Just the opposite of 2.

4. Pseudo-Class selector: Nth-child (n) and: Nth-of-type (n)

2 Upgrade, more flexible

Nth-child (N): Element:nth-child (n), finds element, which is the nth child of its parent

Nth-of-type (n): Element:nth-of-type (n), finds element, which is the nth of its parent, the type child element

5. Pseudo-Class selector: Nth-last-child (n) and: Nth-last-of-type (n)

Upgraded version of 3

Css--css selector for the front end