Home > Developer > Web Develop
First, preface
First look at a Ali this issue of the network!
1. Find the following selectors with the same priority level
A. Img.thumb:after b.[data-job= "Frontend"]::first-letter
C. #main:: Before D. [type= "checkbox"]:checked E. ul#shop-list
Second, review selector type
HTML fragment
<body> <div id= "Content" > <div>hello world</div> <div class= "Block-end" >EOF</div> </div></body>
Basic Selector
1. Element (type) Selector
div{ color:red;}2. Class selector
. block-end{ color: #000;}3. ID Selector
#content { color:blue; }4. Universal element Selector, matching any element (IE5.5 not supported)
*{ width:1000px;}Combo Selector
1. Group Selector
/** format * Selector A, selector b{style rule} */div, body{ width:1200px;}Applies the same style to DOM elements obtained by N selectors, reducing duplicate code.
2. Descendant selector (derived selector)
/** format * Parent selector descendant selector {style rule} */body div{ color: #888;}All DIV elements under the body apply the above style.
3. Child element Selector (IE5.5~ie6 not supported)
/** format * Parent selector > child element selector {style rule} */body > div{ color: #111;}Only the body's div child element applies the above style.
4. Adjacent Brother Element Selector (formerly adjacent sibling element selector)(ie5.5~ie6 not supported)
/** Format * Selector A + selector b{style rule} */#content + div{ color: #111;}The above style is applied only to the sibling div immediately following the div#content, if such as <div id= "content" ></div><br/><div id= "Block-end" >eof </div> because Div#block-end is not immediately after div#content, the above style is not applied.
5. Brother Element Selector (formerly Brother selector) (ie5.5~IE6 not supported)
/** format * Selector A ~ selector b{style Rule} */#content ~ div{ color: #222;}The above style is applied to the div#content only sibling Div, such as <div id= "content" ></div><br/><div id= "Block-end" >eof </div>, Div#block-end will apply the above style.
Property Selector
1. Base selector [attr] (eg: Div[id]) (ie5.5~IE6 not supported )
Matches all elements that have this attribute and conform to the underlying selector condition.
2. Base selector [Attr=value] (e.g. div[id=content])(ie5.5~IE6 not supported )
Matches all attr attribute values equal to value and conforms to the elements of the underlying selector condition.
3. base Selector [attr~=value] (e.g. div[val~=content])(ie5.5~IE6 not supported )
Matches elements such as <div val= "Content dir" ></div>, that is, the match attribute value has multiple space-delimited values, where one value equals the element of value.
4. Base selector [Attr|=value] (e.g. div[lang|=en])(ie5.5~IE6 not supported )
Matches an element such as <div lang= "en-us" ></div>, which is the element that matches the value of a property to the beginning of either value or value-.
5. Base selector [Attr^=value] (e.g. Div[id^=cont])(ie5.5~IE6 not supported )
Matches elements such as <div id= "content" ></div> or <div id= "Contdummy" ></div>, which is the element that matches the value of the attribute that begins with value.
6. Base selector [Attr$=value] (e.g. div[id$=tent])(ie5.5~IE6 not supported )
Matches elements such as <div id= "content" ></div> or <div id= "Dummytent" ></div>, which is the element that matches the attribute value ending with value.
7. Base selector [Attr*=value] (e.g. Div[id*=ten])(ie5.5~IE6 not supported )
Matches elements such as <div id= "content" ></div> or <div id= "dummytent" ></div> that match attribute values with value.
Pseudo class Selector
We can subdivide the pseudo-class selector again to remember!
structural pseudo-class selectors
1. E:first-child: When Element E is the first child element under its parent element, the match succeeds. (ie5.5~IE6 not supported )
2. E:root: When element E is the root element of the document (that is, the htmlhtmlelement element), the match succeeds. (ie is not supported)
3. E:nth-child (n): The match succeeds when element E is the nth child element under its parent element. n starting from 1. (IE5.5~IE8 not supported)
4. E:nth-last-child (n): As with the E:nth-child (n) effect, it is just a reverse direction traversal. n starting from 1. (IE5.5~IE8 not supported)
5. E:nth-of-type (n): The match succeeds when element E is the nth of the homogeneous label under its parent element. n starting from 1. (IE5.5~IE8 not supported)
6. E:nth-last-of-type (n): The same as the E:nth-last-of-type (n) effect, except that the reverse direction is traversed. n starting from 1. (IE5.5~IE8 not supported)
7. E:last-child: When the E element is the last child element under its parent element, the match succeeds. (IE5.5~IE8 not supported)
8. E:first-of-type: Same as E:nth-of-type (1). (IE5.5~IE8 not supported)
9. E:last-of-type: Same as E:nth-last-of-type (1). (IE5.5~IE8 not supported)
10.e:only-child: When the E element is the only child element under its parent element, the match succeeds. (IE5.5~IE8 not supported)
11.e:only-of-type: The match succeeds when the E element is the only child element of the label type under its parent element. (IE5.5~IE8 not supported)
12.e:empty: When the E element does not contain any child elements, the match succeeds. Note: Text nodes are also considered child elements. (IE5.5~IE8 not supported)
Note: The legal notation for N in Nth-child (n) is as follows
①. Pure number, specify the position index, index starting from 1;
②.N, specifying that all positional indexes are matched, n will automatically start from 1, and it is unclear when it stops;
③. Pure digit n, such as 2n, specifies the element of the position index of the number of spouses , N will automatically start from 1 to grow, as to when to stop is unknown;
④. Pure Digital n +/-pure digits, such as 2n+1, specify elements that match an odd position index , and n will automatically start from 1, and it is unclear when the stop is.
Dynamic pseudo class selector (E:hover,ie5.5~7 is only supported on element A, ie8+ support is used on other elements)
1. E:link: When element E (a tag) is not clicked, the match succeeds.
2. e:visited: When the element E (a tag) hits obsolete, the match succeeds.
3. E:hover: Must be declared after E:link, e:visited to be valid. The match succeeds when the element E (ie5.5~7 is a tag, ie8+ can be a different label) is being hovered by the mouse.
4. E:active: Must be declared after e:hover to be valid. The match succeeds when the mouse has been pressed on the element e (a label), but the left button is not released.
5. E:focus: The match succeeds when element e (element e must be the element that can receive the keyboard or user input) gets focus. (IE8 Standard mode starts to support)
Language : lang pseudo-class selector (ie5.5~8 not supported)
1. E:lang (c): When the element's lang attribute equals C, the match succeeds.
UI Element State Pseudo-class selector (ie5.5~8 not supported )
1. e:enabled: When element E (E is a FORM element) is available, the match succeeds.
2. E:disabled: Element E (E is a FORM element) is not available, the match succeeds.
3. e:checked: When the element E (E is input[type=radio] or Input[type=checkbox] is hooked, the match succeeds.
negation pseudo class selector (ie5.5~8 not supported )
1. E:not (other types of selectors): When element E does not conform to other types of selector conditions, the match succeeds.
E:target pseudo class selector (ie is not supported at all: Target pseudo class, another small problem is opera does not support the selector when using the forward and Back buttons)
1. E:target: When you use an anchor point (fragment identifier fragment identifier), for example, http://www.smashingmagazine.com/2009/08/02/bauhaus- ninety-years-of-inspiration/#comments, this "#comments" is a fragment identifier, and you can use the: Target pseudo-class to control the object's style.
:: Selection Pseudo-class selector (ie5.5~8 not supported )
1. E::selection: The element part of the user selection
Pseudo element Selector
A pseudo-element is an element that the browser automatically adds before, after a matching match, or as part of the capture of a matching element.
1. E:before (new E::before): Used to add content before element E (IE8 Standard mode start support)
2. E:after (new E::after): Used to add content to element E (IE8 Standard mode start support)
Example:
<style type= "text/css" >div:before{ content: "Beforediv"}div:after{ content: "Afterdiv"}</style ><div>content</div>The effect is: beforedivcontentafterdiv
3. E:first-line (new E::first-line): valid only when Element E is a block-level element. Used to add a special style to the first line of text in element E.
4. E:first-letter (new E::first-letter): To add a special style to the first letter of element E
5. E:input-placeholder: Used to add a special style to the placeholder of element E. Because it is not a specification, you need to add a browser vendor prefix, specifically as follows
/*for old version of ff*/input:-moz-input-placeholder{}input:-ms-input-placeholder{}/*for modern browsers*/input::- webkit-input-placeholder{}input::-moz-input-placeholder{}And only the following properties are available: color, font-size, Font-style, Font-weight, letter-spacing, line-height, padding, text-align, Text-decoration.
Attention:
/* Because the pseudo-element selector must be the last selector, the following CSS styles will fail */div::before div{ width:100px; height:100px; background-color:red; }Iii. priority scoring rules for selectors
The priority is to determine the effect of the same style rule for different selectors on the same element, with high precedence overriding the low-priority style rule. And the priority is influenced by the style source and selector particularity, let's learn the following together.
1. Source
Inline styles > in-page styles > External reference styles > Browser default styles
2. particularity (by four latitude combination)
| Selector type | Latitude (a,b,c,d) |
| inline style | 1,0,0,0 |
| ID Selector | 0,1,0,0 |
| Class Selector, property selector, pseudo class selector | 0,0,1,0 |
| Element (type) selector, pseudo element (type) Selector | 0,0,0,1 |
| Generic element selector, pseudo class: not selector | 0,0,0,0 |
Note: When multiple selector types are available, the same bit overlay will give you a total latitude.
Reference: Http://www.w3.org/TR/CSS21/cascade.html#specificity
3. The process of calculating the priority level
(a). Calculate the total latitude based on the selector type first
(b) If the latitude is the same, the source is compared.
(c) If the previous two are the same, then the higher priority is declared later.
4. Increase priority through!important (Ie5.5~6 not supported)
You can increase the style rule to the highest priority by adding the!important keyword after the style rule.
. test{ color:red!important; Color:blue;}Ie5.5~6, the text of the matching element is blue, while the other browser is the color, and red is displayed under ie7+.
But!important is not an elegant approach, and will make the style difficult to debug, the following is the use of recommendations :
1. Never use in global CSS rules;
2. Never use in a homemade plugin;
3. Use only on specific pages that require CSS rules that override global or external plug-ins (such as ExtJS, Yui plugin styles);
4. First consider using priority to solve the problem instead of!important.
suitable for use in the scene:
When the inline style is extracted, there is a full-site style at this point;
cover!important:
/* Width 200px */e { width:200px;!important width:100px;}/* Width 300px */e { width:200px; important width:100px; width:300px; ImportantReference: Https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
5. Pseudo-class : Not selector latitude is 0,0,0,0
Pseudo-Class: The Not selector itself has a latitude of 0,0,0,0, but the selector latitude inside the brackets is the same as the above table. div:not (. Content) {width:100px;} priority is calculated as follows:
div── Latitude 0,0,0,1
: not── Latitude 0,0,0,0
. content── Latitude 0,0,1,0
Total Latitude ──0,0,1,1
6. Bugs in IE6
Pseudo-Classes in IE6 : hover, : Active, and : The latitude of the visited selector is not 0,0,1,0, but 0,0,2,0.
Latitude is 0,0,2,1.cls1. cls2 a{ color:red;} IE6 under the latitude is 0,0,2,1//ie7+ latitude is 0,0,1,1a:hover{ color:blue;}Reference:
Http://www.cnblogs.com/ddshou/archive/2009/05/05/1449768.html
Http://www.cnblogs.com/ddshou/archive/2009/05/05/1449770.html
Iv. Browser resolution selector sequence--key selector (keyword query)
is to parse the selector from right to left, which makes the efficiency even higher.
Five or one to do the title Wood bar!
A. Img.thumb:after, total latitude is 0,0,1,2
b.[data-job= "Frontend"]::first-letter, the total latitude is 0,0,1,1
C. #main:: Before, total latitude is 0,1,0,1
D. [type= "checkbox"]:checked, total latitude is 0,0,2,0
E. ul#shop-list, total latitude is 0,1,0,1
Because the topic assumes that the styles are from the same source, the same style precedence is C and E.
Vi. references
CSS selector http://www.cnblogs.com/liontone/archive/2010/12/29/1920437.html
Http://www.w3school.com.cn/cssref/css_selectors.asp
Http://blog.163.com/[email protected]/blog/static/1804698120134491240171/
http://blog.csdn.net/stationxp/article/details/38736261
CSS Magic Hall: selector and its priority
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
