[CSS mastery]chapter 2:getting Your Styles to hits the Target

A valid and well-structured document provides the foundations to which your styles is applied. To being able to style a particular the HTML element using CSS, you need to the targeting that element of some. In CSS, the part of a style rule, that does this is called the selector.

In this chapter, you'll learn about

• Common Selectors

• Advanced Selectors

• New CSS 3 Selectors

• The wonderful world of specificity and the Cascade

• Planning and maintaining your style sheets

• How to comment your code

How do I correctly position (target) to the corresponding element in the DOM tree? Using CSS SELECTOR can easily locate them. In this section, we will learn the following points of knowledge:

1. Common selectors

2. Advanced Selectors

3. CSS3 Selectors

4. Specificity and stacking (cascade) Magic

5. Plan and maintain style sheets

6. How to add comments to your code

Common Selectors

The most common kinds of selectors is type and descendant selectors. Type selectors is used to target a particular type of element, such as a paragraph or a heading element. Simply specifying the name of the element you wish to style. Type selectors is sometimes also referred to as element or simple selectors. (element or type selector)

p {color:black;} (<p></p>)

h1 {Font-weight:bold;} (

Descendant selectors allow you to target the descendants (descendant) of a particular element or group of elements. (descendant selector)

BLOCKQUOTE p {padding-left:2em;} (<blockquote><p></p></blockquote>)

pseudo-classes

: Linkand: Visitedis known asLink pseudo-classesand canOnly being applied to anchor elements.: hover,: Active, And:focusis known asDynamic pseudo-classesAnd can theoretically be appliedto any element.Most modern browsers the functionality. Unsurprisingly, IE 6 Only pays attention to the:active and:hover pseudo-classes when applied to an anchor link, and Ignores:focus completely .IE7Supports:hover on arbitrary elements but ignores:active and:focus.      

Last, it's worth pointing out this pseudo-classes can be strung together(strung together) to the create more complex behaviors, such as styling the hover effect on visited links different from those on unvisited links.

/* Makes links red when hovered or activated. Focus is added-keyboard support */

a:hover, A:focus, a:active {color:red;}

/* makes all visited linkes olive on hover */

a:visited:hover {color:olive;}

　The universal selector (common type)

　

The Universal selector is possibly one of the most powerful and least used of all the selectors.

　

*{
padding:0;margin:0;

}

Child and adjacent sibling selectors

The first of these advanced selectors are the child selector. Whereas a descendant selector would select all the descendants of an element, a child selector only targets the element ' s I Mmediate descendants, or children. In the following example, the list items in the outer list would be is given a custom icon while list items in the nested list would remain unaffected

Sometimes, want to style a element based on its proximity to another element. The adjacent sibling selector allows you to target a element that's preceded by another element that shares the same par Ent.

Attribute Selectors

PlaceHolder

The Cascade and specificity

      with even a moderately complicated style sheet, it's likely that's or more rules would target th E same element. CSS handles such conflicts through a process known as the cascade. The cascade works by assigning a importance to each rule. Author style sheets is those written by the site developers and is considered the most important. Users can apply their own styles via the browser and these is considered the next most important. Finally, the default style sheets used by your browser or user agent is given the least importance so you can always over Ride them. To give users + control, they can override any rule by specifying it as!important even a rule flagged as!important by The author. The IS-to-allow-specific accessibility needs such as using a medium contrast user style sheet If you have a certain F Orms of dyslexia. 

The Cascade works in the following order of importance:

User Styles flagged as!important

Author Styles flagged as!important

Author Styles
User Styles

Styles applied by the Browser/user agent

Rules are and then ordered by what specific the selectoris. Rules with more specific (1) selectorsoverride Those with less specific ones. If the rules is equally specific, the last one defined takesprecedence.

specificity

The specificity of a selector is broken down to four constituent levels:a, B, C, and D. (The difference between pseudo-class and pseudo-elements: Http://segmentfault. com/a/1190000000484493)

• If the style is an inline style, a equals 1.

• b equals the total number of ID selectors.

• C equals the number of class, Pseudo-class, and attribute selectors.

• D equals the number of type selectors and pseudo-element selectors.

[CSS mastery]chapter 2:getting Your Styles to hits the Target