CSS3 Advanced -1 CSS complex selector (sibling selector, property selector, Pseudo-class selector, pseudo-element selector)

One, brother selector

Adjacent sibling selector

-Adjacent sibling selector matches adjacent sibling elements of the specified element

-If you need to select an element immediately after another element, and both have the same parent element, you can use the adjacent sibling selector

-Use the plus sign (+) as a binding character

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7D/E1/wKiom1bx-hbx6cOUAAET9U_wJjU354.png "title=" Web.png "alt=" Wkiom1bx-hbx6couaaet9u_wjju354.png "/>

Universal Brotherhood Selector

-The generic sibling selector matches all sibling elements behind an element

-Use the symbol (~) as the binding character, i.e. Element1~element2

-Two elements must have the same parent element, but the Element2 does not have to be directly followed by element1

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7D/DD/wKioL1bx_CrAvEJ5AAEO8MKOQmw202.png "title=" Web.png "alt=" Wkiol1bx_cravej5aaeo8mkoqmw202.png "/>

Second, the attribute selector

Property Selector

-the property selector can use the attributes that accompany the element in the selector to set the style for the element with the specified property

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7D/DE/wKioL1bx_RWS38fyAAEnPZhbCc8663.png "title=" Web.png "alt=" Wkiol1bx_rws38fyaaenpzhbcc8663.png "/>

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7D/E1/wKiom1bx_NPSXLLNAAKMQTxxsH8655.png "title=" Web.png "alt=" Wkiom1bx_npsxllnaakmqtxxsh8655.png "/>

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7D/DE/wKioL1bx_jLDmEaxAAF0Xj8N35c365.png "title=" Web.png "alt=" Wkiol1bx_jldmeaxaaf0xj8n35c365.png "/>

Third, pseudo-class selector

Target Pseudo-Class

-: Target, highlighting the active HTML anchor for selecting the currently active target element

-Syntax for E:target

-Selects all elements that match E, and the matching element is pointed to by the URL

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7D/E1/wKiom1bx_nrwAKUcAALYIpqOSME177.png "title=" Web.png "alt=" Wkiom1bx_nrwakucaalyipqosme177.png "/>

Element State Pseudo-class

-: Enabled, matching each enabled element (mostly on form elements)

-:d isabled, matching each disabled element (mostly on form elements)

-: checked, matches each INPUT element that has been selected (only for radio buttons and check boxes)

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7D/DF/wKioL1byBSOh3kQWAAMs4g4f1zU038.png "title=" Web.png "alt=" Wkiol1bybsoh3kqwaams4g4f1zu038.png "/>

Structure Pseudo-Class

-: First-child, matches the first child element belonging to its parent element

-: Last-child, matching the last child element belonging to its parent element

-: empty, matching every element with no child elements (including text nodes)

-: Only-child, matching unique child elements belonging to its parent element

-Example

-P:first-child Select each <p> element that belongs to the first child element of the parent element

-P:last-child Select each <p> element that belongs to the last child element of the parent element

-P:empty Select each <p> element with no child elements

-P:only-child Select each <p> element that belongs to its parent element's unique child element

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7D/E2/wKiom1byCqehxRrpAAFjFhvBPZM814.png "title=" Web.png "alt=" Wkiom1bycqehxrrpaafjfhvbpzm814.png "/>

Negation pseudo-Class

-: Not (selector), matches each element of a non-specified element/selector

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7D/DF/wKioL1byC6SiEDymAACoPHZrVrc869.png "title=" Web.png "alt=" Wkiol1byc6siedymaacophzrvrc869.png "/>

Four, pseudo-element selector

Pseudo-element: First-letter

-: First-letter selector to select the first letter of the specified selector

-often used for typesetting details such as initials highlighting, sinking, etc.

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7D/E2/wKiom1byC32ysFjHAACGOSu3dec073.png "title=" Web.png "alt=" Wkiom1byc32ysfjhaacgosu3dec073.png "/>

Pseudo-element: First-line

-: First-line selector for selecting the first row of the specified selector

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7D/E0/wKioL1byEMixkPLxAAEIWl_A1n0783.png "title=" Web.png "alt=" Wkiol1byemixkplxaaeiwl_a1n0783.png "/>

Pseudo-element:: Selection

-:: Selection selector matches the part selected by the user

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7D/E0/wKioL1byEdGRb84GAAEbihOOEA0431.png "title=" Web.png "alt=" Wkiol1byedgrb84gaaebihooea0431.png "/>

Summary: This chapter focuses on CSS complex selectors (sibling selectors, attribute selectors, pseudo-class selectors, pseudo-element selectors)

This article from the "Technical Exchange" blog, declined reprint!

CSS3 Advanced -1 CSS complex selector (sibling selector, property selector, Pseudo-class selector, pseudo-element selector)