CSS3 Common Selector Summary

Source: Internet
Author: User

CSS3 Selector

Lunch with colleagues at noon for a simple chat with the next H5 and C3 for our convenience, after work in the evening after a simple arrangement of the next CSS3 selector, here to share with you.

CSS3 has added many ways to find elements flexibly, greatly improving the efficiency and accuracy of our search elements. CSS3 selector and JQuery Most of the selectors provided are compatible.

1. Property Selector

It is characterized by the selection of elements through attributes, specifically the following 5 forms (E is The first letter of element, the following are abbreviated, programmers are always lazy, ha haha ) :

1, e[attr] indicates the existence of attr attribute can be;

        /* exists */        [class]{/* selected is all div*/            color:red;        }

2, E[attr=val] indicates that the attribute value is exactly equal to Val;

        /* congruent */        [class= "ABCD"]{/* selected is div2*/            color:red;        }

3,e[attr*=val] indicates that the attribute value contains the Val character and is in " any" position;

        /* CONTAINS (anywhere) */        [class*= "ABCD"]{            color:red;        } /* The Div2 and div3,div4*/are selected

4,e[attr^=val] indicates that the attribute value contains the Val character and is in the " start" position;

/* Start with what * *
[class^= "ABCD"] {
}/* selected Div2 and div3*/.

5,e[attr$=val] indicates that the attribute value contains the Val character and is in the " end" position;

/* END */
[class$= "ABCD"] {
}/* selected Div2 and div4*/.

<Body>    <Div><ahref="#"class= "ABC">Div1</a></Div>    <Div><ahref="#"class= "ABCD">Div2</a></Div>    <Div><ahref="#"class= "ABCdef">Div3</a></Div>    <Div><ahref="#"class= "AABCD">Div4</a></Div>    <Div><ahref="#"class= "ABC">Div5</a></Div>    <Div><ahref="#"class= "ABC">Div6</a></Div>    <Div><ahref="#"class= "ABC">Div7</a></Div>    <Div><ahref="#"class= "ABC">Div8</a></Div></Body>

2. Pseudo class Selector

In addition to the previously learned: Link,: Active,: Visited,: hover(I am generally referred to as LV, HA can be understood as, I bought a LV bag today, so very happy, hahaha ),CSS3 added another pseudo-class selector.

2.1The structure pseudo-class of an element with respect to its position relative to its parent element or sibling element .

The point is to understand that the parent element of an element is determined by E.

E:first-child First child element

E:last-child Last child element

E:nth-child (n) the nth child element, which is The entire sibling element of the E element;

E:nth-last-child (n) is similar to e:nth-child (n) , but calculates backwards;

N follows a linear change, its value 0 Span style= "font-family: the song Body;" >, 1 , 2 3 , 4 , ... but when n<=0

N is a variety of forms:nth-child (2n), which means that even-numbered items are selected, although even-numbered entries can be written nth-child (even),nth-child (2n +1) To select odd items, of course, selected odd items can also be written as nth-child (odd),nth-last-child (-n+5) is selected as the fifth element of the bottom;

E:empty the E element with No child nodes selected ; (not very widely used)

2.2. Target pseudo-class

E:target is used in conjunction with the anchor point, the element at the current anchor point is selected;

3. pseudo element Selector

E::first-letter The first word or word of the text (such as Chinese, Japanese, Korean, etc.);

E::first-line the first line of text;

Note:e::before,e::after(more commonly used, very convenient)

is an inline element that needs to be converted into a block element

E:after,e:before in the old version is pseudo-class, in the new version is a pseudo-element, the new version of e:after,e:before will be automatically recognized as E::after , E::before , which is treated as pseudo-elements, is intended to be used for compatibility processing.

E::selection can change the style of the selected text (text color, back color, etc.);

Note: The difference between ":" and "::" is to differentiate between pseudo-classes and pseudo-elements

CSS3 Common Selector Summary

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.