Highly recommended: very good style sheet CSS Tutorial (2)

css| Tutorial | style sheet

The attributes of an element can also be used for selector. The following list examples illustrate several patterns:

Attribute Selector Patterns
Mode	Description
E[ATTR]	Attribute selector The property selector, matches any e element that contains the attribute, regardless of its value size
E[attr= "Value"]	Attribute Selector, a property selector that matches any element e with this attribute, if the value of the property must be equal to the set value.
E[attr~= "Value"]	Attribute Selector Property Selector, some element attributes may contain several values (separated by a space). This pattern matches any element E with attribute attr that contains a specific value (which may be a list form)
E.value	Class selector, "classes" selector, only valid for HTML. Matches any element E that has a class class attribute set and is equivalent to e[class ~ = "Value".
E#value	ID Selector ID selector, matching any element e with the id attribute set. For HTML equivalent to E [id = ' value ']

The above selector Setup modes are flexible to use in tagged style rules, such as:

*.highlight {background-color: #ffff00}* #mainTitle {font-size:150%; font-weight:bold;}

*.highlight matches the "any" element of the Set class = "Highlight" . The second rule matches any element of id = "Maintitle" . In most cases the asterisk "*" can be omitted, as follows.

. Highlight {background-color: #ffff00} #mainTitle {font-size:150%; font-weight:bold;}

What isthe more practical and useful way to use classes "class" and "ID"? With the above two examples, let's explore a very interesting question: "ClassVS ID" Class and ID duel

Class vs ID

The id attribute of the HTML tag sets a unique identifier for the tag, and the Class property is a way to allow the user to set the style for the HTML element.

Strictly speaking, in the same document (Web page), no two elements have the same ID. Whenever you set an ID for a tag, you must guarantee that the value of the ID cannot conflict with the IDs of other elements, even if they have different tag names. So, if you set the style with an ID, each ID can only be applied to one element of the page. ( a pair of relations )

Why not use an inline style (inline style) instead of an ID selector? In practical applications, you'll find that it's much easier to define all the styles together than the inline styles that are all over the document. If it is an external style sheet, it can also be used by other document shares.

A class selector can match several elements of a page (a one-to-many relationship ), even if the element uses a different tag name. The same tag can use several "classes" (class) to define a style (specify a column with a space-delimited class name). For example:

h3.warning {color:red}.highlight {background-color:yellow}...

The contents of the H3 tag are red and the background color is yellow. The background color of the H4 tag is yellow, but the content is not displayed in red.

Pseudo-classes and pseudo-elements pseudo classes and pseudo elements

The last selectors pattern is "pseudo class" and "pseudo element", which enables you to set styles for certain elements or elements contained in special conditions



 

 
  
 
   
 
    
Pseudo-class and Pseudo-element Selectors
 
   
 
   
 
    
Mode
 
    
Description
 
   
 
   
 
    
E:first-child
 
    
Pseudo-class, pseudo class, matching element E, if E is the first child ID of its parent identity. Similar to * > E, but matches only the first child tag of an element.
 
   
 
   
 
    
E:first-letter
E:first-line
 
    
pseudo-elements, pseudo element, action with the first character or line in the content contained in the E element (note not all)
 
   
 
   
 
    
E:before
E:after
 
    
pseudo-elements, pseudo element, which can be used to embed content before/after the content of element E
 
   
 
   
 
    
E:link
e:visited
 
    
Link pseudo-classes, linked pseudo class, hyperlink applied to different states (not accessed: link, visited: visited)
 
   
 
   
 
    
E:active
E:hover
E:focus
 
    
Dynamic pseudo-classes, a dynamically pseudo class, applied to a hyperlink or the style of the corresponding user response of a FORM element (activation: Active, mouse hover: hover, input focus: focused)
 
   
 
  

 

First-letter and First-line selectors are called pseudo classes because they are not part of the entire content of the element, but of the content.

Link pseudo classes should be familiar, similar to link = "Color" and Vlink = "Color" attributes previously used for the body tag, similarly, dynamic pseudo class : active equivalent to ALINK = "color" of previous body tags. The purpose of this use is to enable users to visually distinguish between different colors of the link, has been used by CSS.

When defining any : hover Rules for a link: Note that the position of the hover is to be written after the following : visited rule, which is intended to result in the mouse hovering over the hyperlink after the link is accessed (if the order is dropped, write first : hover After writing : visited , there will be no hover effect, because the style arrangement has precedence relationship.

Another dynamic pseudo class : focus can be applied to the style effect when a user uses form input

Language Selectors

Language Selector
There are also language selectors,e[lang|= "CC" and E:lang (cc) that are useful for displaying foreign text and punctuation, and can be consulted on the relevant information.

Chaining selectors

United selectors
In practice, the selectors of some CSS style rules may be composed of several basic patterns, which are more accurate when used, for example:

Div p a.definition {color:green}div p a.definition:hover {color:red}
This rule applies to hyperlinks when the link's class class is "definition", the hyperlink is contained within the P tag, and the P tag is contained within the DIV tag, the hyperlink is green when the user is not accessed, and the mouse hovers red.