Master CSS Advanced Web Standard Solutions--chapter I, chapter II (finding application goals for styles)--Selector

2015-04-16 08:49:35

1. "Multi-Class syndrome": Classitis. "Multiple div": disease.

The second chapter finds the application target (selector) for the style

1. An effective and well-structured document provides a framework for the style you want to apply.

2. Selector: 1. Type selector (i.e. element selector)

2. Descendant Selector

3. Class Selector

4.ID Selector

3. Instead of assigning different classes to these elements, you should apply a class item ID to their ancestors and then use the descendant selector to locate them.

4. Sometimes we need to apply a style to an element based on conditions other than the document structure, such as the state of a FORM element or link. This is done using pseudo-class selectors.

/*make tables rows red when hovered over */tr:hover{background:red;}

: Link and: Visited are linked pseudo-classes and can only be applied to anchor elements.

: Hover,:active,:focus becomes a dynamic pseudo-class that can theoretically be applied to any element, and most browsers support this feature. However, IE6 only applies to anchor-connected: active and: hover selectors, completely ignored: focus. IE7 is supported on any element: hover, but ignored: active and: Focus.

By linking pseudo-classes together, you can create more complex behaviors. A:visited:hover{color:olive}

5. Universal Selector. (can be used to apply styles to all descendants of an element)

6. Sub-selector (different from descendant selector): example: #nav >li{...}, the child selector selects only the immediate descendants of the element, that is, the child element.

7. Adjacent sibling selectors can be used to locate elements after an element under the same parent element.

<! DOCTYPE html>
　　
8. Property Selector. You can find an element based on whether a property exists or the value of the property.
<! DOCTYPE Html>
　　
Link-based relationships
The rel attribute is typically used to describe the relationship between links , that is, the destination address (href) and the source (site) relationship. Most people may be very familiar with this attribute because he is often used to describe the link address of the CSS:
<link rel= "stylesheet" type= "text/css" media= "screen" href= "/styles/main.css"/>
In addition, you can use multiple rel values in this tag, as if you could use multiple values in the class attribute.
Reference Link: http://www.jb51.net/css/23550.html
Master CSS Advanced Web Standard Solutions--chapter I, chapter II (finding application goals for styles)--Selector