CSS selectors, weights

Base Selector

First, Tag Selector

p{...   } h1{...} CSS is case-insensitive, recommended lowercase

1, all the tags can be used as a tag selector to use

2, no matter how deep the label is hidden, must be able to be selected

3, choose the page all, but not specific one;

The tag Selector, which selects all of this type of label on the page, often describes "commonality" and cannot describe the "personality" of an element.

Second, ID selector

All tags can have an id attribute to identify the label.

The value of the id attribute:

1) can only be a numeric letter underline, must start with a letter, not the same name as the tag.

2) The same ID cannot appear on a page, even if they are not a type.

Have uniqueness

ID priority is greater than class

Third, class selector

. is the symbol of the class. Class English is called class, and any tag can have a class attribute

1) The class attribute can be repeated, 2) the same tag can belong to more than one class selector, remember that a tag cannot appear in two properties with the same name

1, in the development, try not to try to use a class name, all the style of a tag to finish writing. This tag carries several classes, which together create the style of the label.

2, each class to be as small as possible, there is a "public" concept, to allow more labels to use.

In the end, with ID or class?

Answer: Use the class as much as possible, unless you can use the ID for very special situations.

Reason: The ID is JS used. That is, JS to pass the id attribute to get the label, so we try to avoid the CSS level ID, otherwise JS is very awkward. On another level, we think of an element with an ID that has a dynamic effect.

CSS Advanced Selector

One, descendant selector

The spaces represent descendants, such as: Div1 p{} Select all p for descendants of Div1.

Emphasize that the choice is that the offspring are not necessarily sons.

The descendant selector is a kind of balance: generality, characteristic balance, characteristic in generality. You can use the descendant selector when you want to set a part of the overall style.

The descendant selector describes the ancestor structure

Second, intersection selector

h3.special{

color:red;

}

The selected element satisfies two conditions at the same time: it must be a H3 tag, then special.

The general label is placed in front. The intersection selector has no spaces.

Third, set selector (group selector)

A comma is used to denote the set.

Example: h3,li{

color:red;

}

Iv. Wildcard characters *

* All elements are represented. Not high efficiency, try to use less

Five, son selector

IE7 start compatible, IE6 incompatible

> No.

Six, sequence selector

IE8 start compatible; ie6,7 incompatible

Sequencer selectors refer to First-child and Last-child

UL Li: first-child{

color:red;

}

UL Li: last-child{

Color:blue; }

Seven, the next brother selector

IE7 start compatible, IE6 incompatible

+ means select Next sibling

h3+p{

color:red;

}

The selection is on the first sibling next to the H3 element.

Selectors can be used in combination.

Inheritance of

When you set your own style, your descendants inherit, and this is inheritance.

Which properties can inherit?

Color, text-, beginning with line-, font-.

All of these text styles can be inherited; all the properties of the box, positioning, layout cannot be inherited.

Inheritance is the element that starts from itself until the smallest.

Cascade Sex

Cascading is the ability of CSS to handle conflicts. All weights are calculated without any compatibility problems!

When selecting an element on the selector, the statistic weights are as follows:

Number of IDs, number of classes, number of labels

Hundred 10 digit digit

does not carry, actually can carry (255 tags equals a class name) but no actual meaning!

When the weight of the same, who in the latter to prevail.

If an element cannot be selected directly, by inheriting the weight value of 0,

If the weight value is 0 o'clock, which is inherited, then according to the nearest principle, who describes the near, listen to WHO. The assembly selector right is important to disassemble the calculation,

Weight Problem Big Summary:

1) First to see if there is a check, if selected, then the (ID number, number of classes, the number of tags) to count weights. Who listens to who is big. If all are the same, listen and write whichever is right.

2) if not selected, then the weight is 0. If everyone is 0, the nearest principle.

Weight issues in depth

One tags can carry more than one class name, and the label style is not related to the class name order, but rather to the CSS style writing order,

Two! Important Mark

1)! Important is to add weights to tag attributes (infinity)

font-size:60px !important;

Note: Increase the weight value of the property instead of the selector,

2) Unable to elevate inherited weights

3)!important does not affect the nearest principle

If we are all inherited, it should be said according to the "nearest principle", then important can affect the principle of the nearest?

The answer is: no effect. Far, forever is far. Can not give far to write a important, kill near.

Three, the weight problem summary

CSS selectors, weights