Commissioning and css style precedence

How to view a current tag css styles

As shown in FIG

1. First select a label with the tag selector
2. Then it will automatically find the label elements region
3. Then the whole area of ​​that tag pattern in all styles area on the right, top to bottom priority, are crossed Style display is described another style is covered
4. Move the mouse to the style of style, a box will appear on each style, you can click on the check or uncheck local debugging style
5. But also in his own hand writing on the inside element.style {} style, css style inline style is meant element.style area, is the most advanced style
6. You can still see the style file location, it may be inline style
7. After completion of commissioning local style you want, you can go into the same code

Modify existing styles in two ways

1. One is the original style changed
2. The other is covered with the higher original style selector

First talk about 把原本的样式改了的方式, in debugging Ituri last we can see a red box is a css file, which is the style of the location where the file, go to the style source file, search code label, delete the original style , a new one up on the line

However, if the original style in the public file, you just delete the style will make the entire project are changed, the method can not be used appeal, you need to用更高的选择器盖住原有的样式

Priority css styles are displayed at the same level after the load, that is, your own style to write at the bottom, at the end of linkthe introduction, in fact, as long as the same style selector classes, written in the last load on it, if not, I just want to rank higher than the original, then use the style to beat the original level of style, class of 标签内的style > id > class > tag, and addition operations, such as id + class will be greater than the id, the specific own analysis, not difficult!

Inline style is the strongest, is <style></style>和css文件can not be compared, but, in addition to packaging plug-ins, do not use inline style, because it's really special html tags ugly, smelly and long, multi-class selectors and id selectors

There is also a very strong style called !important, his style is not the same as with the line in the !importantcase, and also advanced than the inline style can be said to exist as a plug-in, usually writing style will not use this only in some external plug-in, you need to modify the style of an external plug-in, and it's time to inline styles, will be used!

In addition id selector, class selector, tag selector, some special selector

Child element selector >, adding only the pattern corresponding to the sub-elements, sub-elements or sub-elements are siblings are not affected

#aa>.aa{  }

The first brother selector +first element of a label behind him only to write the same level of qualifying will be added style

#aa+.aa{  }

All selectors brother ~all label elements only written on his back at the same level of qualifying will be added style

#aa~.aa{  }

Attribute selector, custom properties for line

[disabled]{   }
[checked]{   }
[data-xx]{   }
input[type="text"]{   }

Pseudo class selector

#aa:after{   }
#aa:before{   }

Number option

.list:nth-of-type(2n){   }

priority

• Different levels of priority:! Important> inline style> ID selector> class selector> element> wildcard> inherited> Browser default property
• The same level of priority: inline (inner line) Style> internal stylesheet> Waibuyangshibiao> import styles (@import)