Shulou(Shulou.com)06/03 Report--

This article is about how to replace styles in bootstrap. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Change the default style of bootstrap

I haven't used bootstrap for a long time, and I forgot to modify the style according to my own needs.

A new class class was added at the beginning, and the css style was rewritten to override the original style, which didn't actually work. Because the priority of the selector is not considered. Some of this question will be asked during the interview, but there has been no connection between theory and practice.

My solution is to increase the weight through sub-selectors, see that others are also useful id, I do not like to add id selectors.

Recall a wave of selectors and their priorities.

1. Css selector

1. Tag selector (e. G. body,div,p,ul,li)

two。 Class selector (e. G. class)

3.ID selector (e.g. id)

4. Global selector (e. G. * sign)

5. Combination selector (e.g. .head .head _ logo, note that the two selectors are separated by the spacebar)

6. Descendant selector (for example: # head. Nav ul li selector from parent set to descendant set)

7. Group selector div,span,img {color:Red} is a grouped display of tags with the same style

8. Inheritance selector (e.g. div p, note that the two selectors are separated by the spacebar)

9. Pseudo-class selector (for example: link style, pseudo-class of an element, 4 different states: link, visited, active, hover.)

10. Attribute selectors for string matching (^ $*, corresponding to the beginning, the end, and the include, respectively)

11. Sub-selector (such as: div > p with a greater than sign >)

12.CSS neighbor sibling selector (e. G.: h _ 2roomp, with plus sign +)

II. Priority

When using the! important rule on a style declaration, the style declaration overrides any other declaration in the CSS. This attribute is not supported by ie6

Inline stylesheets have a weight of up to 1000; that is, tag elements with style in html, that is, inline styles. This method makes css difficult to manage, so it is not recommended.

The weight of the ID selector is 100; it is defined by one or more id selectors. For example, the # id {margin:0;} id selector overrides the class selector .classname {margin:3pxl}

The weight of the Class class selector is 10; it is defined by one or more class selectors, property selectors, and pseudo-class selectors. For example, .classname {margin:3px} will overwrite div {margin:6px;}

The tag selector weight is 1: defined by one or more type selectors. For example, div {marigin:6px;} overrides * {margin:10px;}

Wildcard selector: for example, * {marigin:6px;}

Browser customization or inheritance weight is 0.1

Summary sort:! important > inline style > ID selector > Class selector > tag > wildcard > inheritance > browser default properties

Three! Important

Using! important is a bad habit and should be avoided because it interrupts the cascading rules inherent in stylesheets and makes it more difficult for debugging to find bug. When two conflicting declarations with! important rules are applied to the same element, a declaration with a higher priority will be adopted.

Experience of inquiry:

Never use it on a site-wide css! important

Use important only on specific pages that need to cover site-wide or external css (such as referenced ExtJs or YUI)

Never use it in your plugin! important

To optimize consider the priority of using style rules to solve the problem instead of! important

Thank you for reading! This is the end of the article on "how to replace the style in bootstrap". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.