Detailed CSS Selector Selector

To use CSS to implement one-to-one, two-to-many or more-to-many controls on elements in an HTML page, you need a CSS selector. Elements in an HTML page are controlled by a CSS selector. This article mainly introduces the CSS learning notes CSS selector related information, the need for friends can refer to, hope to help everyone.

Selectors defined in the CSS1

Type Selector

Used to select the element of the specified type (in fact he is the HTML tag Selector), the common usage is as follows:

Body {/    * defines a style for the BODY element */}body,p {/    * selects multiple label elements simultaneously */}

ID Selector

The HTML element used to select the specified ID, which is commonly used as follows:

<p id= "NAV" >    </p><style>    #nav {/        * Defines the style of the element with the ID NAV */    }</style>

Because the rendering order of the CSS is rendered from right to left, and the ID is all-unique, the preceding type selector can be omitted.

Class Selector

The HTML elements used to select the specified class name are commonly used as follows:

<p class= "NAV" >    </p><style>    . Nav {/        * Defines the style of the element class is Nav */    }</style>

Include selector

Used to select the elements that are nested at the level, the common use is as follows:

<p class= "NAV" >    <p class= "Nav-tools" >            </p></p><p class= "nav" >    <p>        <p class= "Nav-tools" >                </p>    </p></p><style>    . Nav. nav-tools {        / * The parent element of the definition element class contains the NAV, and the child element class contains the element Nav-tools */    }</style>

It is important to note that the include selector does not care about the hierarchy, as long as the selector is included in the previous element. As the above example, two Nav-tools will be selected by the selector!

Pseudo class Selector

: link--link pseudo-class selector

Used to define the style when the link is not being accessed, the common use is as follows:

<p class= "NAV" >    <p class= "Nav-tools" >        <ul>            <li><a href= "#" ></a> </li>        </ul>    </p></p><style>    a:link {        text-decoration:none;        Color:blue;    } </style>

: visited--link pseudo-class selector

Used to define the link style that has been accessed, the common use is as follows:

<style>    a:visited {        text-decoration:none;        color:red;    } </style>

: active--user Action Pseudo-class selector

Used to define the style of the element being activated, the common use is as follows:

<style>    a:active {        text-decoration:none;        Color:green;    } </style>

: hover--user Action Pseudo-class selector

Used to define the style of passing elements of the mouse, common use is as follows:

<style>    a:hover {        text-decoration:none;        Background-color: #F4F4F4;    } </style>

: focus--user Action Pseudo-class selector

Used to define the style of the element that gets focus, the common use is as follows:

<style>    input:focus {        text-decoration:none;        Background-color: #F4F4F4;    } </style>

:: First-line

The style used to define the first line of text within an element is commonly used as follows:

<p class= "Doc" >    <p> Cascading style sheet (full name: Cascading style Sheets) is a computer language used to represent file styles such as HTML (an application of the standard Universal Markup Language) or XML (a subset of the standard Universal Markup Language). CSS can not only statically modify the Web page, but also with a variety of scripting language dynamically to the elements of the page format. </p></p><style>    . doc {        width:360px;    }    . doc>p::first-line {        color:red;    } </style>

:: =first-letter

The style used to define the first character within an element is commonly used in the following ways:

<style>    . doc {        width:360px;    }    . doc>p::first-letter {        font-size:2em;        color:red;    } </style>

Selectors defined in the CSS2

*--Pass Selector

Used to define common styles for all elements in the DOM, the common use is as follows:

<p class= "NAV" >    <p>        <p class= "Nav-tools" >                </p>    </p></p> <style>    . Nav * {        margin:0;    } </style>

A wildcard selector is not recommended if you want to reset the default style

[attribute]--Property Selector

Used to define the style of an element that contains an element with an attribute of attribute, the common use is as follows:

<p class= "NAV" >    <p>        <p class= "Nav-tools" >            <ul>                <li active>menu</ li>                <li>Index</li>            </ul>        </p>    </p></p><style>    li[active] {        color:red;    } </style>

[attribute= "Value"]--property Selector

The values used to define the attribute of the element are the specified value style, which is commonly used as follows:

<p class= "NAV" >    <p>        <p class= "Nav-tools" >            <ul>                <li active= "Active" >Menu</li>                <li active>index</li>            </ul>        </p>    </p>< /p><style>    li[active= "active"] {        color:red;    } </style>

[attribute~= "Value"]--property Selector

Used to define attributes that contain the specified value and to separate attributes with spaces to be worthwhile, the common use is as follows:

<p class= "NAV" >    <p>        <p class= "Nav-tools" >            <ul>                <li active= "Test Active" >Menu</li>                <li active= "active-test" >Index</li>            </ul>        </p>    < /p></p><style>    li[active~= "active"] {        color:red;    } </style>

As shown above, only the foreground color of the first Li is defined as red!

[attribute|= "Value"]--property Selector

Used to define attribute values that contain a specified value in a property and are linked with a hyphen (-), as follows:

<p class= "NAV" >    <p>        <p class= "Nav-tools" >            <ul>                <li active= "Test Active" >Menu</li>                <li active= "active-test" >Index</li>            </ul>        </p>    < /p></p><style>    li[active|= "active"] {        color:red;    } </style>

As shown above: Only the second Li's foreground color will be defined as red!

: first-child--structure Pseudo-class selector

The style used to define the first element of an element is commonly used in the following ways:

<p class= "NAV" >    <p>        <p class= "Nav-tools" >            <ul>                <li active= "test Active ">Menu</li>                <li active=" active-test ">Index</li>            </ul>        </p >    </p></p><style>    li:first-child {        color:red;    } </style>

Note: First-child is the first element that acts on a sibling and has the same label. As shown above, if you want to define the style of the first Li, you'll need to use li:first-child instead of ul:first-child! for a long time.

: lang (en)

Used to define an element style with a property of lang= "en", which is commonly used as follows:

<p>    <p lang= "en" >hello world</p></p><style>    p:lang (en) {        color:red;    } </style>

:: Before

Used to define the content and style before the element, common use is as follows:

<p>    <a>World</a></p><style>    a::before {        content: "Hello";    } </style>

:: After

Used to define the content and style after the element, the common use is as follows:

<p>    <a>Hello</a></p><style>    a::after {        content: "World";    } </style>

p > P

The style used to define the first-level child elements of an element, common methods are as follows:

<p class= "NAV" >    <p>        <p class= "Nav-tools" >            <ul>                <li active= "Test Active" >Menu</li>                <li active= "active-test" >Index</li>            </ul>        </p>    < /p></p><style>    . Nav-tools > UL {        background-color:red;    }    . Nav-tools > Li {/        * This will not take effect because Li is not a direct sub-element of UL */    }</style>

H1 + P

Used to define element styles that are adjacent to an element, and are commonly used in the following ways:

<p>    
CSS3 new Property Selector

[foo^= "Bar"]

The style used to define elements whose attributes start with bar

<p>    <a href= "http://www.betterde.com" >betterde inc.</a>    <a href= "https:// Www.betterde.com ">betterde inc.</a></p><style>    a[href^=" https "] {        color:green;    } </style>
As shown above, mark the HTTPS link as green.

[foo$= "Bar"]

The style used to define element properties that end with bar

<p>    <a href= "http://www.betterde.com/logo.png" >logo.png</a>    <a href= "/http/ Www.betterde.com/style.css ">style.css</a>    <a href=" Http://www.betterde.com/main.js ">main.js </a></p><style>    a[href$= "png"] {        background:url (system/filetype/png.png) No-repeat left Center;        padding-left:18px;    }        A[href$= "CSS"] {        background:url (system/filetype/css.png) no-repeat left center;        padding-left:18px;    }        a[href$= "JS"] {        background:url (system/filetype/js.png) no-repeat left center;        padding-left:18px;    } </style>
As shown above, identify the linked file format of the hyperlink and add the file type icon in front of it!

[foo*= "Bar"]

To define the style of elements in element properties that contain bar, it is important to note that this is the inclusion, that is to say, whatever the combination, as long as the attribute value and the bar three consecutive letters will be selected!

<p>    

As shown above: three elements in P will be rendered in red font!

Although CSS3 retains the attribute selectors defined in CSS2, it is recommended to use CSS3 's property selector instead!

Structure pseudo-Class selector

: Root

Style used to define HTML tag elements

: Nth-child (N)

The style used to define a child element, and N represents the first child element. n can be a number, or a keyword odd, even, or a formula. Common use methods are as follows:

<table>    <tbody>        <tr>            <td>name</td>            <td>gender</td>            <td>age</td>        </tr>        <tr>            <td>George</td>            <td> male</td>            <td>23</td>        </tr>        <tr>            <td>Kevin</td>            <td>Male</td>            <td>28</td>        </tr>        <tr>            <td> angule</td>            <td>Male</td>            <td>23</td>        </tr>    </tbody ></table><style>    Tr:nth-child (even) {        background-color:red;     } </style>
: Nth-last-child (N)

With: Nth-child (n) usage is the same, just sort the way from back to forward!

: Nth-of-type (N)

A style used to define the nth element of the same element, which is commonly used as follows:

<table>    <tbody>        <tr>            <td>name</td>            <td>gender</td>            <td>age</td>        </tr>        <tr>            <td>George</td>            <td> male</td>            <td>23</td>        </tr>        <tr>            <td>Kevin</td>            <td>Male</td>            <td>28</td>        </tr>        <tr>            <td> angule</td>            <td>Male</td>            <td>23</td>        </tr>    </tbody ></table><style>    Tr:nth-of-type (even) {        background-color:red;     } </style>
: Nth-last-of-type (N)

With: Nth-of-type (n) usage is the same, just sort the way from back to forward!

: Last-child

The style used to define the last element is commonly used as follows:

<table>    <tbody>        <tr>            <td>name</td>            <td>gender</td>            <td>age</td>        </tr>        <tr>            <td>George</td>            <td> male</td>            <td>23</td>        </tr>        <tr>            <td>Kevin</td>            <td>Male</td>            <td>28</td>        </tr>        <tr>            <td> angule</td>            <td>Male</td>            <td>23</td>        </tr>    </tbody ></table><style>    tr:last-child {        background-color:red;     } </style>
: First-of-type

Defines the style of the first element of the same type element as: Nth-of-type (1) Effect

: Last-of-type

Defines the style of the last element of the same type element, which is commonly used as follows:

<table>    <tbody>        <tr>            <td>name</td>            <td>gender</td>            <td>age</td>        </tr>        <tr>            <td>George</td>            <td> male</td>            <td>23</td>        </tr>        <tr>            <td>Kevin</td>            <td>Male</td>            <td>28</td>        </tr>        <tr>            <td> angule</td>            <td>Male</td>            <td>23</td>        </tr>    </tbody ></table><style>    tr:last-of-type {        background-color:red;     } </style>
: Only-child

Used to define only one child element and the same as the development element label, the common use method is as follows:

<p>    
: Only-of-type

Used to define a style that contains only one set of label elements, which is commonly used as follows:

<p>    
: Empty

Used to define a style that does not contain any child elements in an element, and is commonly used in the following ways:

<p>    </p><style>    p:empty {        display:none;    } </style>
CSS3 Additional Selectors

E ~ F

The styles used to define sibling elements are commonly used in the following ways:

<p>    <p>Hello</p></p><p>CSS</p><style>    p ~ p {        color:red;    } </style>
P in the P element is not rendered as a red font, and only P is the same level that is rendered red!

: Not (s)

Used to define the specified element, and to filter the selector element specified by S, the common use method is as follows:

<p>    <p class= "Red" >Hello</p>    <p class= "Blue" >World</p>    <p> Welcome!</p></p><style>    p:not (. Red) {        color:blue;    } </style>
Note: S is a simple structure selector and cannot use a composite selector that matches only the elements of the first compound condition. As shown above, the last P will not be rendered as blue!

: Target

Used to define the style of the anchor cable that is visited, the common use is as follows:

<p>    <p id= "Text-one" >        <p> This is the first text segment </p>    </p>    <p id= "Text-two" >        <p> This is the second text segment </p>    </p></p><style>    p:target {        color:red;    } </style>
Note: When we activate the anchor chain (the URL contains #text-one or #text-two), the corresponding element font in P will be rendered in red!

CSS3 UI element State pseudo class Selector

: Enabled

The style used to define the enabled elements of an element is commonly used in the following ways:

<p>    <input type= "text" ></p><style>    input:enabled {        background: #ffff00;    } </style>
Note: The default state of the element is enabled

:d isabled

Used to define the style when the element is disabled, the common use is as follows:

<p>    <input type= "text" disabled= "disabled"/></p><style>    input:disabled {        Background: #dddddd;    } </style>
: Checked

Used to define the style of the element when it is selected, which is commonly used in the following ways:

<p>    <form>        <input type= "checkbox"/>    </form></p><style>    input:checked {        color:green;    } </style>