Implementation of new issues of CSS3 selectors

Basic Selector Extensions

1. Child element selector

:tomato: #wrap > .inner {color: pink;} It is also called a direct descendant selector. This type of selector can only match direct descendants, not deep descendant elements. Summary: > acts on the first generation of descendants of an element, and spaces act on all descendants of an element.

2. Adjacent sibling selector

:tomato: #wrap #first + .inner {color: #f00;} It will only match the following sibling element

3. Universal sibling selector

:tomato: #wrap #first ~ div { border: 1px solid;} It will match the second element, provided that it must follow (not necessarily immediately) the first element, and they have a common parent element all sibling elements

4. Selector Grouping

:tomato: h1,h2,h3{color: pink;} The comma here is called a combining character

Attribute Selectors

1. Substring value attribute selector

:tomato: [attr|=val] : Selects elements whose attr attribute value is val (including val) or starts with val-.

:tomato: [attr^=val] : Select elements whose attr attribute value starts with val (including val).

:tomato: [attr$=val] : Selects elements whose attr attribute value ends with val (including val).

:tomato: [attr*=val] : Select elements whose attr attribute value contains the string val. A few browsers support substring selection of elements.

2. Existence and value attribute selectors

:tomato: [attr]: This selector selects all elements that contain the attr attribute, regardless of the value of attr. [attr=val]: This selector selects only those elements whose attr attribute is assigned the value val.

:tomato: [attr~=val]: represents an element with an attribute named attr, which is a space-delimited list of values, at least one of which is val. For example, a class located within multiple classes separated by spaces. For example, name="atguigu_llc atguigu"

:tomato: [name =val]: This selector selects only those elements whose name attribute is assigned the value val.

Pseudo-class and pseudo-element selectors

1. Link Pseudo-Class

:tomato: :link represents all anchors that are hyperlinks and point to an unvisited address

:tomato: :visited represents all anchors that are hyperlinks and point to a visited address

:tomato: :target represents a special element whose id is the fragment identifier of the URI

:exclamation: Note that :link, :visited, and :target act on link elements! The first two can only work on the a tag

*{
                margin: 0;
                padding: 0;
            }
            div{
                width: 300px;
                height: 200px;
                line-height: 200px;
                background: palegreen;
                color: hotpink;
                text-align: center;
                display: none;
            }
            a:visited{
                color:orange;
            }
            :target{
                display: block;
            }

2. Dynamic pseudo-classes

:tomato: :hover means hovering over an element

:tomato: :active matches elements that are activated by the user (click and hold)

:tomato:Since :link and :visited of the a tag can cover the status of all a tags, when :link, :visited, :hover, and :active appear on the a tag at the same time, :link and :visited cannot be placed at the end! ! !

:tomato: Privacy and the :visited selector Only the following attributes can be applied to visited links: color, background-color, border-color

:exclamation: Note that :hover and :active can basically act on all elements!

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
                color: black;
                display: block;
            }
            a:hover{
                font-size:24px;
                /*color: red;*/
            }
            
            a:link{
                font-size:48px;
                /*color: pink;*/
            }
            a:visited{
                /*font-size:96px;*/
                /*color: deeppink;*/    
            }
        </style>

3. Form-related pseudo-classes

①:disable matches disabled forms

②: checked matches the selected form

③:focus matches the focused form

④: enabled matches editable forms

Practical Exercise 1

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        input:enabled{
            background: skyblue;
        }
        input:disabled{
            background: deeppink;
        }
        input:checked{
            width: 200px;
            height: 200px;
        }
        input:focus{
            background: pink;
        }
    </style>
</head>
<body>
    <input type="text" />
    <input type="text" disabled="disabled" />
    <input type="checkbox" />
    <input type="text" />
</body>

Practice Exercise 2 Customizing Radio Buttons

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        label{
            position: relative;
            float:left; /*Convert to block-level element expansion size*/
            width:100px;
            height:100px;
            border:2px solid;
            border-radius: 50%;
            overflow:hidden;
        }
        label > span{
            position: absolute;
            left:0;
            top:0;
            bottom:0;
            right:0;
        }
        input{
            position: absolute;
            left:-50px;
            top:-50px;
        }
        input:checked + span{
            background:pink;
        }
    </style>
</head>
<body>
    <label>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </label>
    <label>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </label>
    <label>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </label>
</body>

4. Pseudo-elements

:tomato: Concept: Pseudo-elements represent some special elements (special positions) in the page that do not really exist.

:tomato: syntax starts with:

:tomato: Categories: ①::first-letter ②::first-line ③::selection ④::before ⑤::after Note: ④ and ⑤ must be used in conjunction with the content attribute

:tomato: Code example:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style type="text/css">
    p:first-letter{
        color: #008000;
        font-size: 2.5rem;
    }
    p:first-line{
        color: aqua;
    }
    p::selection{
        color:red;
    }
    p:before{
        content: ''I will love you forever';
        color:blue;
    }
    p:after{
        content: 'sure are you';
        color:green;
    }
    </style>
</head>
<body>
    <div>Hello are you okay</div>
    <p> I'm still a paragraph. I'm a lot, a lot. Jiefangbei is not bad. Maintain economic stimulus hahahahahahahahahahahahahahahahahahahahahahahahahahahahaha</p>
</body>

5. Structural pseudo-classes (key points)

:tomato: The index value starts counting from 1! ! ! ! index can be variable n (only n) index can be even odd

:tomato: #wrap ele:nth-child(index) means matching the index-th child element in #wrap. These pseudo-classes are sorted according to all child elements. This child element must be ele

:tomato: #wrap ele:nth-of-type(index) means matching the index-th ele child element in #wrap

In addition, there is a very important difference between :nth-child and :nth-of-type! ! nth-of-type is element-centered and sorted within the same type, nth-child (relative to :first-child:last-child or :nth-child(1):nth-last-child(1))

/* even means an even number

odd means odd number

first-of-type: ranked in type p

first-child: all elements are arranged

*/

:tomato::nth-child(index) series

:first-child

:last-child

:nth-last-child(index)

:tomato::nth-of-type(index) series

:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type (as opposed to :first-of-type:last-of-type
 or:nth-of-type(1):nth-last-of-type(1))    
:not        
:empty (the content must be empty, no spaces are allowed, and attr is OK)

Code Sample

*{
            margin: 0;
            padding: 0;
        }
        #wrap li:nth-of-type(1){
            color: pink;
        }
        p:only-of-type{
            border: 1px solid;
        }

6. Pseudo-element selectors

::after

::before

::firstLetter

::firstLine

::selection

#wrap::before{
        content:"";
        display:block;
        width:200px;
        height:200px;
        background: #00FFFF;
    }
    #wrap::after{
        content:"";
        display:block;
        width:200px;
        height:200px;
        background: #0000FF;
    }

This is the end of this article about the implementation of new issues in CSS3 selectors. For more relevant new content on CSS3 selectors, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!