Problems encountered with navigation bar layout and workarounds CSS selector precedence

The resulting navigation bar effect

Add #menu ul li{width:30px;}

Effect

Will change the width of the list item and the delimited area at the same time because the ID selector takes precedence over the class selector, you should add an inline style for the list item

To get the following effect

Alternatively, you can use the second method

#menu ul li{
Float:left;
margin-left:10px;text-align:center;padding-left:10px; To center the text of a list item

line-height:28px;
height:28px;
width:40px;
BORDER-LEFT:2PX solid red; add split Line
}

The second problem encountered is the floating dislocation problem of list items

The workaround is to add the attribute font-size:0px to the list of UL's style sheets;

#menu ul{
List-style-type:none;
font-size:0px;
height:28px;
}

The third problem is left and right floating dislocation problem, do not know how to solve, small sadness

Selector type

Strictly speaking, the type of selector can be divided into three kinds: Tag name selector, class selector and ID selector.

The priority level of the Selector

After understanding the various selectors, there is also an important point of knowledge is the CSS selector priority. This is why Polaris will encounter the question at the beginning of the article. To give a simple example

<div class="City">

<span class="Beijing"> Beijing </span> /c6>

<span> Beijing </span>

</div>

If you have already set the font in the span below the. City to Red:

1. . city span {color:red;}

At this point, if you want to change the color of the city is blue, it cannot be achieved with the following command:

1. . city {Color:blue;}

This occurs because the next command has no precedence, two conflicting style settings, and the browser executes only the higher priority .

So what is the priority of a selector?

In general, the more special The selector, the higher its priority. The more accurate the selector is, the higher its priority. Usually we use 1 to indicate the priority of the tag name selector, 10 for the class selector, and 100 to prioritize the ID selector.

For example, in the example above. Polaris span {color:red;} The selector priority is 10 + 1 which is 11; the priority of the. Polaris is 10; The browser will naturally display the red Word.

Div.test1. span var priority 1+10 +10 +1

Span#xxx. Songs Li priority 1+100 + 10 + 1

#xxx-li Priority 100 +1

In the case of what selectors to use, the principle of using different selectors is: first: Accurate selection of the label to be controlled; second: Use the selector with the most reasonable priority; Third: HTML and CSS Code are as concise and beautiful as possible. Usually:

1. The most commonly used selector is the class selector.

2, Li, TD, DD and so on often a large number of consecutive, and the same style or similar label, we adopt the class selector and tag name selector combination of the descendant selector. XX Li/td/dd {} mode selection.

3, very few cases will use the ID selector, of course, many front-end developers like Header,footer,banner,content set to the ID selector, because the same style in a page can not have a second time.

Here we have to mention the use of css in the tag to write CSS, that is:

<div style="color:red">city</div>

The priority at this time is the highest. We give it a priority, which is not recommended, especially for beginners. This also completely violates the idea of the separation of content and display. The merits of div+css can no longer be reflected.

Simple, efficient CSS

The so-called efficient CSS is to allow the browser to find a style matching elements to try to do less search, listed below some of our common write CSS to make some inefficient errors:

Do not use the label signature before the ID selector

General wording: Div#divbox

Better notation: #divBox

Explanation: Because the ID selector is unique, adding a div instead adds an unnecessary match.

Do not use the label signature before the class selector

General wording: span.red

Better notation:. Red

Explanation: Same as the first one, but if you define more than one. Red, and under different elements are not the same style, you can not remove, such as your CSS file defined as follows:

1. p.red{color:red;}
2. Span.red{color: #ff00ff}

If this is defined, do not remove, it will be confused after removal, but it is advisable not to write this

Use hierarchical relationships sparingly

General wording: #divBox P. red{color:red;}

A better notation:. red{..}

Use class instead of hierarchical relationships

General wording: #divBox ul Li A{display:block;}

Problems encountered with navigation bar layout and workarounds CSS selector precedence