CSS selector (top) makes styles all-pervasive

CSS selectors a tool that can choose a style, which applies to files of this type, whether internal or external, abc.css.

1. Basic Selector
   *{} is a simple * that represents the entire application. Not suitable for personalized and meticulous processing of the page, the side effect is that it will overwrite the original style, whether good or bad
   * and inheritance regardless of whether the level of labels, whether sub-labels, all received * impact. (God General)
   p{} element selector, or tag Selector. P can be any other label

   The #123 {} ID selector, such as <a ID = "123" href=http://"> and 123css file-developed Styles </a> ID can be any letter or number. Uniqueness, which is the norm.
   . abc{} There is a CLASS=ABC attribute in the tag, which is called the same class. class CSS is a convenient style for multiple labels.

   p.abc{} qualifies the P tag in the ABC class to take effect

   Example:

   HTML file

   CSS file

   Effect

   All B tags in class=abc are in effect

   One label refers to multiple class styles, separated by a space of two class styles

   
   [href] {} This is a hyperlink to the property selector, all of the properties scoped inside the curly braces

   [Type=password] {} This is a further rule, only the Type property, and the password type type applies css, the other type is invalid

   The [Href^=http] property is an href and the value begins with HTTP, and the CSS is applied.
   The [href$=.cn] property is an href and the value ends in. cn, applying CSS

   [Href*=baidu] Property value contains the character fragment of Baidu, applying CSS for fuzzy search '

   HTML file

   CSS file

   Effect

   Other selectors:

   [Class ~=def] The value of a property contains complex or multiple characters that match the applied CSS to the specified character

   [lang|= "en"] the value of a property that contains a separator symbol-this method looks for a comparison of the provincial performance. The machine is easy to find.

3. Composite Selector
   p,b,span{} multi-element selector. And you can mix and match, common tags, id, and class ....

   P b{} blur specifies a label's child label as a CSS Application object, except for the specified child tags, other parent tags, etc. are unaffected

   P >b {} is exactly the same as the above one, specifying a B sub-label that acts on the bottom of P. If there is a layer of span below p, there is a B under Span, then p>b is changed to P>span>b

   p+b{} matches the P element and the B element next to it

   p~b{} matches all elements of P to B (including P and b), all elements between two points.

5. Pseudo element Selector

   :: first-line{} block-level first line app. Window stretching causes the number of words in the first line to change, but it has been stipulated that first-line to apply CSS, so no matter how the window pulls,
   Red words will be filled with red as the size of the window changes. First-line has an effect on the first line of HTML, or on the first line of <div>, but it has no effect on the inline of span.

   p::first-line{} has an effect on the first line of P.

   The next half of the paragraph is <span>.

   :: First-letter block-level first character apply CSS

   A::before Insert the specified string before the label

   A::afoter inserting the specified string into the label

   HTML file

   CSS file

   Before clicking

   After clicking

CSS selector (top) makes styles all-pervasive