Home > Developer > Web Develop
Universal selector: * Select to all elements
Select child element:> Select to direct descendant of element (first level child element)
Adjacent Sibling selector: + Select to the first element immediately following the target element
Normal sibling selector: ~ Selects all sibling elements immediately following
pseudo element Selector :
:: First-line matches the first line of a text block
:: First-letter Select the first letter of the text block
Pseudo-Class selectors:
: Before,: After adding content (equivalent to inline elements) before and after element content
CSS3 structure Selector
: Nth-child selects child elements at the specified index
Nth-child (n) the nth child element under the parent element
Nth-child (odd) odd child element (same as Nth-child (2n-1))
Nth-child (even) even sub-elements (same as nth-child (2n))
Nth-child (AN+B) formula
(Nth-child start from 1)
: Nth-last-child (n) The penultimate nth child element
: Nth-of-type (N) Sub-elements of the nth specified type under a parent element
: Nth-last-of-type A child of the penultimate nth specified type under the parent element
: First-child selects the first child element under a parent element
: Last-child Select the last child element under the parent element
: Only-child Select the only child element under the parent element
: Only-of-type Select a unique child element of the specified type under the parent element
: Root selects the root folder of the document. return HTML
Div:only-child Note spaces (select only child elements under DIV)
Pseudo class Selector
: Link to an unread page set style
: visited sets the style of links to the visited page
: Hover on mouse hover
: Active is triggered when clicked
: Enabled selects the Enable State element
:d isabled Select the Disable state element
: Checked Select selected INPUT element (radio button or check box)
:d Efault Select a default element
: Valid, invalid select valid or invalid INPUT element based on input validation
: In-range, Out-of-range Select elements that are restricted within or outside the specified range
: repuired, optional based on consent: required attribute Select INPUT Element
Suppose the color of link is set to the same as visited. When the page is open, the style of link is overwritten by the visited style, as above, the font color of the A-label appears green.
However, the assumption is set to a different property and can render an overlay effect.
When you click the a tag. The color of the font is yellow.
Use label to change the style of radio: for example, the following:
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Keywords" content="keyword one." Keyword two "> <meta name="Description" content ="Site description description"> <meta name="Author" content="Liu Yan"> <title></title> <style> input[type= "Radio"]{display: none;} label{display : Inline-block ; width : px ; height : px ; border-radius : 50 % ; border : 1 px Solid #ccc ; margin : 5 px ; : Checked+label{background: #00b3ee;} </style></head><body> <input type="Radio" name = "fruit" id = " check1"/> <label for ="Check1"></label> <input type="Radio" name = "fruit" id = " Check2"/> <label for ="Check2"></label> <input type="Radio" name = "fruit" id = "check3 "/> <label for ="Check3"></label> <input type="Radio" name = "fruit" id = " check4"/> <label for ="Check4"></label></body></html>The effect of the implementation:
:d Efault
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Keywords" content="keyword one." Keyword two "> <meta name="Description" content ="Site description description"> <meta name="Author" content="Liu Yan"> <title></title> <style> :d efault{background: #009FE6;} </style></head><body> <form> <input type="text"> <button>button</button> <input type="Submit" value="Submit"> </form></body></html>The default get focus in form form is Buttonbutton
Property Selector
E[attr] Property name, indeterminate detail property value
E[attr= "value"] Specifies the property name. and specify its corresponding property value
E[attr ~= "value"] Specifies the property name. Found with this property name, separated by a space from the other property names. For example, the following:
E[attr ^= "value"] Specifies the property name. Property value starts with value
E[attr $= "value"] Specifies the property name. Property value ends with value
E[attr *= "value"] Specifies the name of the property, which includes the value
E[attr |= "value"] Specifies the property name, the property value starts with value-, or the value is values
CSS3 selector (full)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
