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

This article mainly introduces "what are the selector of css3". In daily operation, I believe many people have doubts about the selector of css3. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the question of "what is the selector of css3?" Next, please follow the editor to study!

CSS3 is the upgraded version of css technology, and the development of CSS3 language is towards modularization. The previous specification as a module is too large and complex, so it is broken down into some small modules, and more new modules are added. These modules include: box model, list module, hyperlink mode, language module, background and frame, text special effects, multi-column layout and so on.

The advantage of css3: CSS3 will be fully backward compatible, so there is no need to modify the current design to keep them working. Web browsers will also continue to support CSS2. For us, the main impact of CSS3 is that it will be possible to use new available selectors and properties, which will allow for new design effects (such as dynamics and gradients), and can easily design the design effects that appear (such as using columns).

Progressive enhancement

Progressive enhancement of progressive enhancement: build pages for low-version browsers to ensure the most basic functions, and then improve and add functions for advanced browsers to achieve a better user experience

Graceful demotion

Progressive enhancement of progressive enhancement: build pages for low-version browsers to ensure the most basic functions, and then improve and add functions for advanced browsers to achieve a better user experience

Gradual Enhancement & elegant degradation

Difference: elegant demotion starts with a complex status quo and attempts to reduce the supply of user experience, while progressive enhancement starts with a very basic, functional version and expands to meet the needs of the future environment. Demotion (functional decay) means looking back, while progressive enhancement means looking forward while ensuring that its roots are in a safe zone.

CSS3 selector

Attribute selector

00001. E [attr]: only attribute names are used, but no attribute values are determined

00002. E [attr= "value"]: specifies the name of the attribute and specifies the attribute value of the attribute

00003. E [attr~= "value"]: specifies the attribute name and has an attribute value, which is a list of words separated by spaces, where the word list contains a value word, and the "~" before the equal sign is required.

00004. E [attr^ = "value"]: a property name is specified and has an attribute value, which begins with value

00005. E [attr$= "value"]: an attribute name is specified and has an attribute value, which ends with value

00006. E [attr*= "value"]: an attribute name is specified and has an attribute value, and the attribute value contains value

00007. E [attr | = "value"]: the property name is specified and the attribute value is only value or a value that begins with "value-" (for example, left-con)

Pseudo class selector

Structural pseudo-class selector

00001. X:first-child matches the first element of the subset. IE7 can support it.

00002. X:last-child matches the last X element in the parent element

00003. X:nth-child (n) is used to match child elements with an index value of n. The index value starts at 1

00004. The pseudo-class X:only-child is generally used less. For example, the above code matches one and only one p under div, that is, if there are more than one p in the div, it will not match.

00005. X:nth-last-child (n) calculates the index from the last one.

00006. X:first-of-type matches the first X element in the sibling element

00007. X:last-of-type matches the last X element in the sibling element

00008. X:nth-of-type (n) matches the nth sibling element X of the same type

00009. X:only-of-type matches the X that belongs to the only sibling element of the same type

00010. X:nth-last-of-type (n) matches the penultimate sibling element X of the same type.

* *: root** matches the root element of the document. In HTML (an application under the standard generic markup language), the root element is always the HTML**X:empty** matching element X that has no child elements (including text)

Target pseudo class

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

UI element state pseudo-class selector

00001. E:enabled matches all available E elements in the user interface (form form)

00002. E:disabled matches all E elements in the unavailable state in the user interface (form form)

00003. E:checked matches all element E selected in the user interface (form form)

00004. E::selection matches the part of the E element that is selected or highlighted by the user

Dynamic pseudo-class selector

00001. The E:link link pseudo-class selector selects the matching E element, and the matching element is defined and the hyperlink is not accessed. Often used on link trace points

00002. The E:visited link pseudo-class selector selects the matching E element, and the matching element is defined with a hyperlink and has been accessed. Often used on link trace points

00003. The E:active user behavior selector selects the matching E element, and the matching element is activated. Often used on link strokes and buttons

00004. The E:hover user behavior selector selects the matching E element, and the user mouse hovers over the element E. IE6 and below browsers only support a:hover

00005. The E:focus user behavior selector selects the matching E element, and the matching element gets the focus

Hierarchical selector

00001. The E > F child selector selects the matching F element, and the matching F element matches the child elements of the E element

00002. The matching F element is selected by the Eforth F neighbor sibling selector, and the matched F element is immediately after the matching E element.

00003. The Ematches F universal selector selects matching F elements and all matching F elements that follow the matched E element

At this point, the study of "what are the selector of css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.