Home > Developer > Web Develop
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 SelectorIt 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 selected4,e[attr^=val] indicates that the attribute value contains the Val character and is in the " start" position;
/* Start with what * *
[class^= "ABCD"] {
color:red;
}/* 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"] {
color:red;
}/* 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 SelectorE::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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
