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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.