CSS Uncommon problem clean sweep

Pseudo-class and pseudo-element pseudo-class

What is pseudo-class? Like a class is not a class, it is not a class that declares itself (no write style exists).

Understanding of pseudo-elements hyperlinks on earlier web pages. Link (anchor) with the underline, click on the link to purple, the mouse hover to change color.

Link pseudo-Class

css2.1 defines two pseudo-classes that apply only to hyperlinks (all the A elements that have an href attribute).

pseudo-class name	Description
: Link	: Visited
Indicates all anchors as hyperlinks (href) and points to a * not accessible * address (note that not all anchors are not visited, but some browsers may not)	Indicates all the anchors that have been visited

Dynamic Pseudo-Class

pseudo-class name	Description
: Focus	element that currently has focus (tab toggle available), which can accept inputs or elements that can be activated
: hover	The mouse is resting on the element above (not limited to hyperlinks)
: Active	Indicates the element being entered or activated (not limited to hyperlinks)

Dynamic pseudo-classes can be applied to any element and are useful for non-linked style applications.

Select the first child element

There is another static pseudo-class: First_chilid to select the first child element of the element.

So

The first child element of Div:first_child is <p></p>

The first child element of Ul:first_child is <li href= ' abc ' ></li>

Combining Pseudo-Class

In CSS2.1, pseudo-classes can be used together in the same selector.

a:link:hover { }

The order is unimportant and the effect is the same.

Pseudo element pseudo element selector

Just as pseudo-classes specify Phantom classes for anchors, pseudo-elements can enter imaginary elements into a document. And thus get some kind of effect.

CSS2.1 four pseudo elements, set the first letter style (: First-letter), set the first line of (: First-line), set before (: before), after the set (: after).

Speaking,: After,:before, in the content attribute "is essential".

Moreover, in CSS3, the pseudo-element consists of a: L:, intended to be distinguished from pseudo-class, but is still compatible with a single colon, the official recommended two colons.

Property Selector

Select based on specific attribute values

This is a fair match for this simple attribute value.

such as the

Be careful when using it, its properties match no more than a multi-class selection, which is actually a complete string match. So, there's a space for that.

If the use of the inconvenient, you can use the following

Select based on partial attribute values

This can be used for the example above:

I believe you have found that the goods can replace the class selector ah.

Single-class selection is not necessarily so sentimental, for the multi-class choice is very necessary,

You know, in the previous version of IE7, IE was not able to handle multi-class selectors correctly.

It is generally assumed that this selector will only match those p elements that have the class containing warning and help.

However, in the previous version of IE7, P.warning is available, but p.waring.help matches all of the P-elements of the class help, because the last thing that helps in the selector is nothing warning.

So, with the property selector, you can bypass the problem.

The particularity of selectors

The specificity of the selector is determined by the components of the selector itself. The special value is expressed as 4 parts, shaped as 0.0.0.0, although not a number, in number.

The particularity of a selector is as follows:

1. For each # id attribute value given in the selector, add 0,1,0,0;
2. For the given class attribute value (. Class) in the selector, the attribute is selected (XXX [atr= ']) or pseudo-class , plus 0,0,1,0
3. For each element given in the selector (HTM body div span) and pseudo-elements, add 0,0,0,1. According to the document, pseudo-elements are added from CSS2.1 .
4. The binding character (+,,>, and not very familiar at all) and wildcard characters (\*, the contribution value of the particularity is 0,0,0,0).

Say a lot of waste, on the example

Selector

Selector	Special value obtained
H1 {}	0,0,0,1
P EM {}	0,0,0,2
. Grap {}	0,0,1,0
*.grap {}	0,0,1,0
P.bright Em.dark {}	0,0,2,2
#id {}	0,1,0,0
Div#header *[attr] {}	0,1,1,1

I have seen these, the first of the four people have not met, who is so powerful? inline style, written within the HTML line.

This is the ability to see who is capable of competing for the same elements in multiple selectors.

CSS Uncommon problem clean sweep