Zhaohuaxishi "Mastering the CSS" two selector & laminate

One, background

---

Pulls out "Mastering CSS" I see a book four years ago, but did not finish the habit of reading notes, recently rarely write front-end, then a lot of things, knowledge forgotten, just css and now also some change and progress, then packaged with finishing output into several blog series to give a bonus himself.

Second, the selector

---

1, the basic selector

(1) tag selector -elementname

(2) category selector -.elementname

(3) ID selector -#elementname

(4) universal selector -*

2, the combination of the selector

symbol	Explanation
A > B	Descendant selector
A B	Descendant selectors
A + B	Adjacent Sibling Selector
A ~ B	Brothers selector

3, attribute selector

Attribute selector allows the user to custom property name .

Code	Explanation
[attribute]	Element has attributeattributes.
[attribute="value"]	Property attributein avalue
[attribute*="value"]	Attribute attributecontainsvalue
[attribute~="value"]	Attribute attributestring in the use of a separate blank which is invalue
[attribute|="value"]	Property attributein that valueor in the value-beginning of the string
[attribute^="value"]	Attribute attributemost of that beforevalue
[attribute$="value"]	Properties attributein the final isvalue

3, pseudo-class / pseudo-element selector

The official definition of a document: css introducing the concept of pseudo-classes and pseudo elements for formatting information other than the document tree .

(1) pseudo-class

:first-child, :last-childReferred to as pseudo structural class.

:link, :visitedCalled a link pseudo-classes.

:hover, :activeAnd :focuscalled dynamic pseudo-classes.

:enabled, :disabled, :checkedCalled pseudo-type form.

:not()Unselected called pseudo-class.

:target Called pseudo target class.

Pseudo class selector can be superimposed, for example:a:visited:hover {color:olive;}

(2) pseudo-element

:before - insert new content in front of the content of the element.

:after - Insert a new content after content element.

:first-letter - set up a special style to the first letter of the text.

:first-line - set up a special style to the first line of text.

Pseudo-element features:

1, pseudo-elements do not belong to the document DOM node.

2, pseudo-elements are part of the main elements, so click pseudo-element trigger the click event is the main element.

In particular, he said lower :beforeand :after:

Can be used with contentattributes, add the string as an output.

The default is to add the contents of inline elements, and simply string does not support html.

---

Pseudo-classes and pseudo-elements of 区别that: there are no elements other than create a document tree .

Three, CSS stacking

---

1, the concept of the laminated

Remember the aforementioned, CSS full Shi Cascading Style Sheets, here Cascading(层叠)meaning, including two types:

1, the right style of weight

2, style inheritance

2, style weight

Right style leads to weight: the weight of high style cover low weight style .

(1) different sources

First, we look at the definition of styles from different sources:

1, the user style

Although there are normative, but chrome 33 onwards does not support, but rather recommended to use extensions to implement.

2, the inline style

3, internal style

4, direct external style

html introduced <link rel="stylesheet" type="text/css" href="index.css"/> -->

5, indirect external style

The css <style>in with @importthe introduction of

6, the browser (default) style

---

note:

Below it is consistent with both the wording:

<style> 
      #main {
        background-color: red;
      }
      @import "index.css";
</style>

<style> 
            @import "index.css";
      #main {
        background-color: red;
      } 
</style>

Because it will automatically @importadvance, a similar statement can be pre-var js in (but let not work).

---

(2) the priority value selector

Element may have a plurality of sources, a plurality of matching selector (inline, internal or external [Direct / Indirect]) style. And for these selectors, there will be a corresponding calculated 优先级值.

Selector priority value is A, B, C, Dfour parameters determined, the following calculation rules:

1. If there are inline styles, then A = 1, or else A = 0;
2. BIt is equal to ID选择器the total number of occurrences;
3. CIt is equal to 类选择器and 属性选择器and the 伪类total number of occurrences;
4. DThe value is equal 标签选择器and 伪元素the total number of occurrences.

E.g. #nav-global > ul > li > a.nav-linkcalculated priority value (0, 1, 1, 3).

After calculating the priority value for each selector, calculating weights according to the rules:

The priority value from left to right comparison, the larger the winner, if they are equal, then continue right to move a comparison.

If the full equal, then follow the principles come from behind .

Therefore, calculated in accordance with the priority value style selector weights, in addition to the right to the highest inline weight, other sources of different weights no effect .

(3) !important

rule:

1, !importantthe right weight with selector priority value weight than the "one-vote veto."

2, !importantright between weight compared with the same priority value rule selector:

Look Source: Inline> internal / external [Direct / Indirect]

Look order of introduction: from behind.

Therefore, calculated in accordance with the priority value style selector weights, in addition to the right to the highest inline weight, other sources of different weights no effect .

note:

Try to avoid using!important .

Do not use inline styles !important.

Do not write in the plug-in that you define !important.

! Important C-like language of goto keyword, with a cool moment, but in reality hidden infinity.

3, style inheritance

(1) natural inheritance rules

Some CSS properties can be inherited:

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing。

Some properties are not inherited:

display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。 

And inline elements, block elements, list elements, table of elements of inheritance rules are not the same, very complicated .

If you rely on a large number of natural and inheritance rules, determine the source of the style will be difficult.

(2) manual control inheritance rules

• inherit: Inherit the parent element.
• initial : Inheritance browser's default style.
• unset:default. If the element of natural succession, the value inherit; otherwise, the value initial.
• revert : If there is a user-defined style sheets, then restore this setting; otherwise, become unset.