May 31, 2021 Article blog
What is a CSS3 selector? W hat are its types? W hat does it all do? This article is for you to answer one by one.
What is a CSS3 selector? F irst of all, to mention CSS3, it is the latest CSS standard, more than CSS style settings. S o there will be more new content on the CSS3 selector, making it easier and more efficient for you to create web pages. The selector is used for the effective control of one-to-one, one-to-many, or many-to-one elements, and the selector is used to apply styles to the corresponding elements and render their elements, so the CSS3 selector is a very important and basic knowledge point.
What are the types of CSS3 selectors? W hat does it all do? A s shown below, the selectors are diverse and can choose the one that works best for you according to your needs. The next thing is all about focus, take the little book and write it down.
Here are the various selector property types and roles, click on the selector to go to the tutorial to learn more, you can also write examples online
1) Basic selector
selector | type | Description of the function |
* | The selector is available | Select all HTML elements in the document |
E | Element selector | Select the HTML element of the specified type |
#id | ID selector | Select any type of element that specifies an ID property value of "id" |
.class | Class selector | Select any number of elements of any type that specify a class property value of "class" |
selector1,selectorN | Group Selector | Combine the elements that each selector matches and |
2) Hierarchical selector
selector | type | Description of the function |
E F | Descendant selectors (including selectors) | Select the matching F element, and the matching F element is included in the matching E element |
E>F | The sub-selector | Select the matching F element, and the matching F element matches the child element of the E element |
E+F | Adjacent brother selector | Select the matching F element, and the matching F element is immediately behind the matching E element |
E~F | Universal selector | Select the matching F element and all matching F elements after the matching E element |
3) Dynamic pseudo-class selector
selector | type | Description of the function |
E:link | Link pseudoclass selectors | Select a matching E element, and the matching element is defined as hyperlinks that have not been accessed. Often used on linked strokes |
E:visited | Link pseudoclass selectors | Select the matching E element, and the matching element is defined as hyperlinked and accessed. Often used on linked strokes |
E:active | The user behavior selector | Select the matching E element, and the matching element is activated. Often used on linked strokes and buttons |
E:hover | The user behavior selector | Select the matching E element, and the user mouse rests on element E. IE6 and the following browsers only support a: hover |
E:focus | The user behavior selector | Select the matching E element, and the matching element gets the focus |
4) Target pseudo-class selector
selector | Description of the function |
E:target | Select all elements that match E, and the matching elements are pointed to by the relevant URL |
5) Language pseudo-class selector
selector | Description of the function |
E::lang(language) |
Indicates that all elements that match E are selected, and that the matching element specifies a lang property with a value of language
|
6) UI element state pseudoclass selector
selector | type | Description of the function |
E:checked | Check the status pseudo-class selector | Match the selected check button or radio button form element |
E:enabled | Enable the state pseudoclass selector | Matches all enabled form elements |
E:disabled | The state pseudoclass selector is not available | Matches all disabled form elements |
7) Structural pseudo-class selector
selector | Description of the function |
E:first-child | Element E, which is the first child element of the parent element. Equivalent to E:nth-child(1). |
E:last-child | Element E, which is the last child element of the parent element. Equivalent to E:nth-last-child(1). |
E:root | Select the root element of the document where element E is located. In an HTML document, the root element is always html, at which point the selector matches the html type selector |
E F:nth-child(n) | Select the nth child element F of the parent element E. Where n can be an integer (1,2,3), the keyword (even, odd), can be a formula (2n1), and the n value starts at 1 instead of 0. |
E F:nth-last-child(n) | Select the penultimate child element F of the parent element E. This selector is the exact opposite of the E:nth-child(n) selector calculation order, but is used in the same way, where: nth-last-child(1) always matches the last element, equivalent to last-child |
E:nth-of-type(n) | Select the nth E element with the specified type within the parent element |
E:nth-last-of-type(n) | Select the penultimate N E element with the specified type within the parent element |
E:first-of-type | Select the first E element within the parent element with the specified type, equivalent to E:nth-of-type(1). |
E:last-of-type | Select the last E element within the parent element with the specified type, equivalent to E:nth-last-of-type(1). |
E:only-child | Select the parent element to contain only one child element, and the child element matches the E element |
E:only-of-type | Select the parent element to contain only one child element of the same type, and the child element matches the E element |
E:empty | Select an element that has no child elements, and the element does not contain any text nodes |
8) Deny pseudo-class selectors
selector | Description of the function |
E:not(F) | Matches all E elements except element F |
9) Property selector
selector | Description of the function |
---|---|
[ attribute ] | Used to select an element with the specified property. |
[ attribute = value ] | Used to select elements with specified properties and values. |
[ attribute ~= value ] | The element used to select a property value that contains the specified vocabulary. |
[ attribute |= value ] | Used to select an element with a property value that begins with the specified value, which must be the entire word. |
[ attribute ^= value ] | Match each element whose property value begins with the specified value. |
[ attribute $= value ] | Match each element whose property value ends with the specified value. |
[ attribute *= value ] | The matching property value contains each element of the specified value. |
More pseudo-class selectors can be viewed by clicking on the CSS selector
Recommended featured videos: Getting Started with CSS3 and Actual Combat, HTML5-CSS3 Zero Basic Quick Start