Some summary of CSS

1. *

* {margin:0; padding:0;}

The asterisk selector is used to pick all the elements in the page and can be used to quickly clear the margin and padding of all the elements, but it is best to use them only when testing, rather than in a CSS file, which will greatly increase the burden on the browser. In addition, the asterisk selector can also set styles for all child elements of the parent layer, repeating them as sparingly as possible:

#container * {border:1px solid black;}

Compatible with ie6+

2. #X

#container {width:960px; margin:auto;}

The ID selector, one of the most common selector usages, cannot be reused.

Compatible with ie6+

3.. X

. error {color:red;}

Class selector, which is also one of the most common selector usages, differs from the ID selector in that the class selector can select multiple elements at the same time, and the ID selector can only give a unique element style.

Compatible with ie6+

4. X Y

Li a {text-decoration:none;}

Descendant selector (descendant selector), select all Y elements within the X element, such as the above code will pick all the links within the Li tag.

Compatible with ie6+

5. X

a {color:red;} ul {margin-left:0;}

A tag Selector (type selector) for selecting an HTML tag (tag).

Compatible with ie6+

6. X:visited and X:link

a:link {color:red;} a:visted {color:purple;}

: The link pseudo-class selector (pseudo class selector) is used to select all the links that have not been clicked, while: visited is used to select all the links that have been visited.

Compatible with ie6+

7. X + Y

UL + p {color:red;}

Near the selector (adjacent selector), select the first element that appears immediately after the X element, such as the first element that appears when the above code selects a UL element, that is, the P element.

Compatibility ie6+

8. X > Y

Div#container > UL {border:1px solid black;}

In 4th, the descendant selector x y selects all y elements within the parent layer X, and the child selector x > y selects only the Y element that appears directly within the parent layer x. For example, in the following HTML structure, #container > UL Select the UL elements that appear directly within the Div#container, and do not contain the UL elements nested inside Li:

<div id= "Container" > <ul> <li> List Item <ul> <li> child </li> </ul> </li> ; <li> list item </li> <li> list item </li> <li> list item </li> </ul> </DIV> ;

Compatible with ie6+

9. X ~ Y

UL ~ p {color:red;}

Also near the selector, front 7th x + y selects the first element that appears immediately after x, and x ~ y selects all sibling elements that appear after the X element. The above code selects all of the sibling P elements that appear after the UL element, instead of selecting the first P element that appears as a UL + P.

Compatible with ie7+

Ten. X[title]

A[title] {color:green;}

The property selector (attributes selector), which further narrows the selection based on the attributes used by the element, will pick all links using the title attribute, or a[title= "title content"]{color:green} Further narrowing down the selection range.

Compatible with ie7+

X[href= "Foo"]

A[href= "http://net.tutsplus.com" {color: #1f6053;/* nettuts green */}

The above code will pick all the links that jump to http://net.tutsplus.com, which will appear as green, and the other links won't be affected.

It's just that this is strictly not a single character, the more flexible usage will be described below.

Compatible with ie7+

X[href*= "Nettuts"]

A[href*= "tuts" {color: #1f6053;/* nettuts green */}

* Indicates that the selection is satisfied as long as the contents of the attribute value contain double quotes, and this code selects a link to jump to nettuts.com,net.tutsplus.com, or tutsplus.com.

Compatible with ie7+

x[href^= "http"]

a[href^= "http"] {background:url (path/to/external/icon.png) no-repeat; padding-left:10px;}

^ indicates that the selection requirement is satisfied as long as the property value begins with the contents of the double quotation mark, and this code is often used to style all the external connectors in the page.

Compatible with ie7+

x[href$= ". jpg"]

a[href$= ". jpg"] {color:red;}

$ indicates that the selection requirement is satisfied as long as the property value ends in double quotation marks, and this code selects all links that jump to a JPG image.

Compatible with ie7+

X[data-*= "Foo"]

The 14th above mentions how to select all the links to the JPG image, to select all links to the picture can be used in the following way:

a[href$= ". jpg"], a[href$= ". jpeg"], a[href$= ". png"], a[href$= ". gif"] {color:red;}

Or, add the data-attribute to the picture link first (note: HTML5 Custom data Attributes)

<a href= "path/to/image.jpg" data-filetype= "image" > Image Link </a>

Then choose from the property selector:

A[data-filetype= "image"] {color:red;}

Compatible with ie7+

X[foo~= "Bar"]

A[data-info~= "external"] {color:red;} a[data-info~= "image"] {border:1px solid black;}

If there are a series of attribute values in a property value that are separated by spaces, you can select one of the property values, such as:

<a href= "path/to/image.jpg" data-info= "external image" > Click Me, Fool </a>

Select the element that contains the value of the external or image property with ~:

/* Target Data-info attr that contains the value "external" */a[data-info~= "external"] {color:red;}/* and which Conta In the value "image" */a[data-info~= "image"] {border:1px solid black;}

Compatible with ie7+

X:checked.

input[type=radio]:checked {border:1px solid black;}

: The checked pseudo-class selector is used to pick all elements marked as checked, such as a radio box (radio button) or a check box (checkbox).

Compatible with ie9+

X:after.

: Before and: After is two exciting pseudo-class selectors, almost every day someone has invented some new usage, here's a brief introduction to how to use it to clear the float:

. clearfix:after {content: ""; Display:block; Clear:both; Visibility:hidden; font-size:0; height:0; }. clearfix {*display:inline-block; _height:1%;}

This way: After adding an area after the element, and then hiding it, you can make up the Overflow:hidden; The defect.

According to the CSS3 selector standard, the pseudo class selector should theoretically use a double colon, but in fact the browser also supports the form of a single colon, so you can continue to use a single colon.

Compatible with ie8+

X:hover.

div:hover {background: #e3e3e3;}

The most commonly used pseudo-class selectors, not much to explain, just need to note that IE6 does not support the following: hover action on other elements except for a link.

a:hover {border-bottom:1px solid black;}

Another reminder: border-bottom:1px solid black; is more effective than text-decoration:underline; Look good.

Compatible with ie6+ (in IE6: hover can only be used for linking)

X:not (selector)

Div:not (#container) {color:blue;}

: The not pseudo-class selector sometimes plays an important role, assuming that you want to select all DIV elements except #contaienr, you can do so with the code above.

Compatible with ie9+

X::p seudoelement

p::first-line {font-weight:bold; font-size:1.2em;}

A pseudo-element (using double colons::) can set a style for a part of an element, such as the first line, or the first letter. It is important to note that this only takes effect for block level elements (block levels elements).

Tip: Pseudo-elements (pseudo element) use double colons:

Select the first letter of a paragraph

p::first-letter {float:left; font-size:2em; font-weight:bold; font-family:cursive; padding-right:2px;}

This code selects all the P elements in the page and then selects the first letter.

Select the first line of a paragraph

p::first-line {font-weight:bold; font-size:1.2em;}

Similar to the example above, the first row of the page is selected by: First-line.

In order to be compatible with pseudo elements in CSS1 and CSS2 (e.g. First-line,: First-letter,: Before and: After), the browser accepts both single and double colons, but for the newly introduced pseudo-elements in CSS3, double colons must be used.

Compatible with ie6+

X:nth-child (N)

Li:nth-child (3) {color:red;}

: Nth-child (n) is used to select an element in the stack, accept only integers as arguments (the argument starts at 1), and if you want to pick a second LI element, just write Li:nth-child (2).

You can also set variable parameters, such as Li:nth-child (4n) will be selected 4th, 8, 12 ... Elements (4*n, N=1, n++).

Compatible with ie9+

X:nth-last-child (N)

Li:nth-last-child (2) {color:red;}

In addition to the positive sequence (top down) selection, you can also use: Nth-last-child (n) reverse order (from bottom to top) to select the elements, the other usage is exactly the same as the 22nd article.

Compatible with ie9+

X:nth-of-type (N)

Ul:nth-of-type (3) {border:1px solid black;}

: The Role of Nth-of-type (n) is not to select a child element, but rather to select a homogeneous element (type of elements). Imagine that the HTML file contains 5 UL elements, now to select the third one, just use the above code, instead of a separate this UL add ID.

About: The difference between Nth-child and: Nth-of-type, see the explanation of the Css-tricks website, in a nutshell, if the parent layer contains only one element (such as all P elements), the two usages are equivalent if the parent layer contains multiple elements (such as P element and other elements of the same sibling), you need to select the number of P elements that should be used: Nth-of-type.

Compatible with ie9+

X:nth-last-of-type (N)

Ul:nth-last-of-type (3) {border:1px solid black;}

In the same way as the 24th usage, the same elements are selected in reverse.

Compatible with ie9+

X:first-child.

UL li:first-child {border-top:none;}

Select the first child element within the parent layer.

Compatible with ie7+

X:last-child.

ul > Li:last-child {color:green;}

The same as the 26th usage, except that: Last-child selects the last child element within the parent layer element.

: First-child and: Last-child is usually used to clear the border (border), for example, each <li></li> in <ul></ul> uses Border-top and border- Bottom border, as a result, the top of the first element and the bottom of the last element will be a single-sided box effect. This can be used: First-child and: Last-child clears the top and bottom border without adding a id= "first" or adding id= "Last" to the final element.

Compatible with ie9+

X:only-child.

Div p:only-child {color:red;}

This pseudo-class selector is not commonly used, and it can pick a parent layer that contains a uniquely specified child element. For example, the above code will select the following first DIV element instead of the P element in the second Div.

<div><p> My paragraph here. </p></div> <div> <p> paragraphs total. </p> <p> paragraphs total. </p> </div>

Compatible with ie9+

X:only-of-type.

Li:only-of-type {font-weight:bold;}

The selector selects an element, and the element has no other sibling-like element within its parent layer (not necessarily a unique element). For example, how do you choose all UL elements that contain only one LI element? If you use UL li to select all LI elements, you should use Only-of-type.

Compatible with ie9+

X:first-of-type.

The First-of-type pseudo-class can pick the first homogeneous element of an element.

To better understand its usage, now consider how to select list Item 2 in the following HTML structure.

<div> <p> My paragraph here. </p> <ul> <li> list item 1 </li> <li> list item 2 </li> </ul> <ul> <li& Gt List Item 3 </li> <li> list item 4 </li> </ul> </div>

Method One

Ul:first-of-type > Li:nth-child (2) {font-weight:bold;}

This code means: first select the first UL element, and then select all the immediate child elements, namely Li; Finally, select the second child element.

Method Two

P + ul li:last-child {font-weight:bold;}

Locate the first UL element that appears after the P element, and then select the last child element.

Method Three

Ul:first-of-type Li:nth-last-child (1) {font-weight:bold;}

Locate the first UL element, and then select the first child element from the top down.

Compatible with ie9+

31. Pseudo-Class selector stack

Some pseudo-class selectors or pseudo-elements can be stacked, for example:

#post P:nth-of-type (2): first-letter {float:left; margin:0 5px 0 1em; width:1em; height:1em; font-size:2em;}

IE6 IE7 does not support the Display:inline-block solution:

Set the Display:inline-block after setting the *display:inline,*zoom:1

The role of font-size:100%:

When body{font-sizez;12px;}

H1~h6 will not inherit this attribute, to set it to font-size:100%;

Line-height: The best use of plural, when using the singular, the browser display has a difference (different browser resolution)

Style truncation, still using the ellipsis:

width:***;

Text-overflow:ellipsis;

-o-text-overflow:ellipsis;

Overflow:hidden;

Ie6 incompatible with Max-width and min-width: the Workaround:

_width:expression ((document.documentelement.clientwidth| | Document.body.clientWidth) >1000?1000: "")

IE6 Support minimum width to resolve CSS code:
. Yangshi{min-width:1000px;_width:expression ((document.documentelement.clientwidth| | document.body.clientWidth) >1000? " 1000px ":" ");}

Description: min-width:1000px; This is IE6. The maximum range width is supported by other brand browsers. and _width:expression ((document.documentelement.clientwidth| | document.body.clientWidth) >1000? " 1000px ":"); let IE6 support min-width instead of CSS code, but the effect is the same as other versions of the browser.

Let all browsers support Min-width CSS style code, complete:
Min-width:1000px;_width:expression ((document.documentelement.clientwidth| | document.body.clientWidth) >1000? " 1000px ":");
The 1000 and 1000px here are the values you need, note that the 3 values are the same.

Let IE6 support the minimum width and support the maximum width limit setting. In this case we often touch on the picture control, so that the size of the picture, if too wide, can not exceed a certain range of values, small time does not control his method, using the CSS code:

_width:expression (This.scrollwidth > 620?) "620px": (This.scrollwidth < 1?) "1px": "Auto"));

A word that works:

_width:expression (This.offsetwidth > 630?) ' 630px ': true);

CSS Naming conventions:

The "--" is not recommended because IE6 sometimes does not recognize this symbol.

How to differentiate IE6 IE7 Firefox

IE6 identification * and--

IE7 identification * and!important

Firefox recognition!important not recognized *

IE8 * \9

IE6 does not support fixed solutions:

1. position: fixed;
2. _position: absolute;
3. right: 0;
4. _right: -1px;
5. top: 80px;
6. _bottom: auto;
7. z-index: 2147483647;
8. _top: expression (eval (document.documentElement.scrollTop +));
9. _top:expression (Eval ( Document.documentElement.scrollTop | | DOCUMENT.BODY.SCROLLTOP) +eval (document.documentElement.clientHeight | | document.body.clientHeight) -520 + ' px ');

problems with CSS linear gradientsHttp://www.cnblogs.com/lhb25/archive/2013/02/17/css3-linear-gradient.htmlThe problem of Rgba transparent under IE9 (IE9 person filter)

Filter:none;     /* Handle Filter effect */background-color:rgba (0,0,0,0.8) in IE9 browser;

Some summary of CSS