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

This article mainly introduces "what are the concepts and advantages of Css3". In daily operation, I believe many people have doubts about what are the concepts and advantages of Css3. Xiaobian consulted all kinds of materials and sorted out simple and easy operation methods. I hope to help you answer the doubts of "what are the concepts and advantages of Css3"! Next, please follow the small series to learn together!

CSS3 is an upgraded version of CSS technology, and CSS3 language development is moving towards modularity. The previous specification was too large and complex as a module, so break it down into smaller modules and more new modules are added. These modules include: box model, list module, hyperlink mode, language module, background and border, text effects, multi-column layout, etc.

CSS3 will be fully backward compatible, so there is no need to modify current designs to keep them working. Web browsers will also continue to support CSS2. For us, the main impact of CSS3 will be the availability of new selectors and properties that allow new design effects (such as dynamics and gradients) to be implemented, and design effects that can appear in very simple designs (such as using columns).

Progressive enhancement and graceful degradation

Progressive enhancement: Build pages for lower browsers to ensure the most basic features, and then improve and add features for advanced browsers to achieve a better user experience.

Graceful degradation: Build full functionality from the start and then work on compatibility with older browsers.

Difference: Elegant degradation 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 accommodate future environments. Degradation means looking back; gradual enhancement means looking forward while keeping its roots safe.

CSS3 selector I. Hierarchy selector

E>F child selector selects matching F element and child element of E element matched by matching F element

the E+F neighbor sibling selector select that matching F element immediately aft the matching E element

E~F universal selector selects all matching F elements after matching E elements

II. Attribute Selector

1. E[attr]: Use only attribute names, but do not determine any attribute values;

2. E[attr="value"]: Specify the attribute name and specify the attribute value of the attribute;

3. E[attr~="value"]: Specify the attribute name and have the attribute value. This attribute value is a word list separated by spaces. The word list contains a value word, and the "~" before the equal sign cannot be omitted.

4. E[attr^="value"]: specifies the attribute name and has an attribute value, and the attribute value starts with value;

5. E[attr$="value"]: specifies the attribute name and has an attribute value, and the attribute value ends with value.

6. E[attr*="value"]: specifies the attribute name and has an attribute value, and the attribute value contains value;

7、E[attr| ="value"]: the attribute name is specified and the attribute value is value or a value starting with "value-"(e.g. zh-cn);

3. Pseudo-class selector 1. Structural pseudo-class selector

X:first-child matches the first element of the subset. IE7 is supported.

X:last-child matches last X element in parent element

X:nth-child(n) is used to match children with index n. Index values start at 1

X:only-child This pseudo-class is generally used less, for example, the above code matches p under div with only one p, that is, if there are multiple p in div, it will not match.

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

X:only-of-type matches an X that is the only sibling of the same type

X:first-of-type matches the first X element in sibling elements

X:nth-last-child(n) Counting indexes from the last.

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

X:root matches the root element of the document. In HTML (an application of the Standard Universal Markup Language), the root element is always HTML

X:empty Matches element X without any children (including text)

2. Target pseudo-class selector

E:target selects all elements that match E, and the matching elements are pointed to by the associated URL

3. UI element state pseudo-class selector

E:enabled Matches all E elements that are available in the user interface (form)

E:disabled Matches all E elements that are unavailable in the user interface (form)

E:checked Matches all selected elements in the user interface (form) E

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

4. Negative pseudo-class selector

E:not(s)(IE6-8 browsers do not support:not() selectors.)

Match all elements E that do not match simple selector s

5. Dynamic pseudo-class selector

E:link

link pseudo-class selector

Select the matching E element, and the matching element has a hyperlink defined that has not been accessed. Often used to link dots

E:visited

link pseudo-class selector

Select the matching E element, and the matching element has a hyperlink defined and has been visited. Often used to link dots

E:active

User Behavior Selector

The matching E element is selected and the matching element is activated. Often used to link dots and buttons

E:hover

user behavior selector

The matching E element is selected and the user mouse hovers over element E. IE6 and the following browsers only support a:hover

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

At this point, the study of "what are the concepts and advantages of Css3" is over, hoping to solve everyone's doubts. Theory and practice can better match to help you learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

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.