Shulou(Shulou.com)06/01 Report--

This article focuses on "what are the selector types of CSS3". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the selector types of CSS3"!

What is a CSS3 selector? First of all, I would like to mention CSS3, which is the latest CSS standard and has some more styling than CSS. So there will be more new content on the CSS3 selector, which will make your web creation more convenient and efficient. The selector is used for one-to-one, one-to-many, or many-to-one effective control of the element, and uses the selector to apply the style in the corresponding element to render the element, so the CSS3 selector is a very important and basic knowledge point.

The following are the various selector attribute types and functions. Click on the selector to go to the tutorial to learn more, and you can also write examples online.

1) basic selector

Selector type functional description * wildcard selector selects all HTML elements in the document E element selector selects specified type HTML element # idID selector selects any type of element whose specified ID attribute value is "id". Class selector selects any number of elements of any type that specify that the class attribute value is "class" the selector1,selectorN group selector merges the set of elements matched by each selector

2) hierarchical selector

The selector type function describes the E F descendant selector (including selector) to select the matching F element, and the matching F element is contained in the matching E element E > F sub-selector selects the matching F element, and the matching F element is selected by the child element of the matched E element EtalF neighboring sibling selector And the matching F element is located immediately after the matching E element, and the matching F element is selected by the matching F universal selector, and all matched F elements are located after the matched E element.

3) dynamic pseudo-class selector

The selector type function describes the E:link link pseudo-class selector to select the matching E element, and the matching element is defined and the hyperlink has not been accessed. The E:visited link pseudo-class selector is often used on link trace points to select matching E elements, and the matching elements are hyperlinked and have been accessed. The E:active user behavior selector is often used to select the matching E element on the link trace point, and the matching element is activated. It is often used to select matching E elements by the E:hover user behavior selector on link strokes and buttons, and the user mouse hovers over element E. IE6 and the following browsers only support the a:hoverE:focus user behavior selector to select matching E elements, and matching elements gain focus

4) Target pseudo-class selector

The selector function describes that E:target selects all elements that match E, and the matching elements are pointed to by the relevant URL

5) language pseudo-class selector

The selector function description E::lang (language) indicates that all elements that match E are selected, and the matching element specifies the lang attribute, and its value is language

6) UI element status pseudo-class selector

Selector type functional description E:checked check state pseudo-class selector matches selected check button or radio button form element E:enabled enabled state pseudo-class selector matches all enabled form elements E:disabled unavailable state pseudo-class selector matches all disabled form elements

7) structural pseudo-class selector

The selector function describes the element E of E:first-child as the first child of the parent element. Is equivalent to the element E of E:last-child as the last child of the parent element with E:nth-child (1). Equivalent to E:nth-last-child (1), E:root selects the root element of the document where element E is located. In a HTML document, the root element is always html, and the selector matches the html type selector with the same content E F:nth-child (n) selects the nth child element F of the parent element E. Where n can be an integer (1), a keyword (even,odd), or a formula (2n+1), and the starting value of n is 1, instead of 0.E F:nth-last-child (n) selects the nth reciprocal child element F of the parent element E. This selector and E:nth-child (n) selector are calculated in the opposite order, but they are all 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 nth penultimate E element with the specified type within the parent element E:first-of-type Select the first E element with the specified type within the parent element Equivalent to E:nth-of-type (1), E:last-of-type selects the last E element of the specified type in the parent element, and is equivalent to E:nth-last-of-type (1). The E:only-child selection parent element contains only one child element, and the child element matches the E element E:only-of-type selection parent element contains only one child element of the same type And the child element matches the E element E:empty selects an element without child elements, and the element does not contain any text nodes

8) negative pseudo-class selector

The selector function description E:not (F) matches all E elements except element F

9) attribute selector

The selector function description [attribute] is used to select elements with specified attributes. [attribute=value] is used to select elements with specified attributes and values. [attribute~=value] is used to select the element that contains the specified term in the attribute value. [attribute | = value] is used to select an element with an attribute value that begins with a specified value, which must be the entire word. [attribute ^ = value] matches each element whose attribute value begins with the specified value. [attribute$=value] matches each element whose attribute value ends with the specified value. [attribute*=value] matches each element that contains the specified value in the attribute value. At this point, I believe you have a deeper understanding of "what are the selector types of CSS3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.