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

This article mainly introduces the CSS questions that may be asked during the interview, the article is very detailed, has a certain reference value, interested friends must read it!

Q:

What are the CSS selectors? Which attributes can be inherited? Priority? Which priority is higher, inline or important?

The selector 1 wildcard selector (*) represents the style of all elements in the page * {font-size:12px;margin:0;padding:0;} 2 type selector (body, div, p, span, etc.) the tag type that already exists in the web page as the name selector div {width:10px;height:10px;} 3 group selector (,) makes the same style assignment to a group of objects at the same time } 4 hierarchical selector (space) contains selector # header top {width:100px;} 5id selector (#) id selector is unique, and the # header {width:300px;} 6class selector (.) can be reused in the page. Title {width:300px;} 7IEhack selector (_, *,\ 0,\ 9\ 0) can be reused in the page. ) compatible with different browsers. Title {_ width:50px;*height:30px;} inheritable properties

The code is as follows:

Azimuth, border-collapse, border-spacing

Caption-side, color, cursor, direction, elevation

Empty-cells, font-family, font-size, font-style

Font-variant, font-weight, font, letter-spacing

Line-height, list-style-image, list-style-position

List-style-type, list-style, orphans, pitch-range

Pitch, quotes, richness, speak-header, speaknumeral

Speak-punctuation, speak, speechrate

Stress, text-align, text-indent, texttransform

Visibility, voice-family, volume, whitespace

Widows, word-spacing

Four principles of priority

Principle 1: inherit unspecified cattle B.

Demo1:

The code is as follows:

* {font-size:20px}

.class3 {font-size: 12px;}

What's my size?

Demo2:

The code is as follows:

# id1 # id2 {font-size:20px}

.class3 {font-size:12px}

What's my size?

Principle 2:#ID > .class > tag

Demo1:

The code is as follows:

# id3 {font-size: 25px;}

.class3 {font-size: 18px;}

Span {font-size:12px}

What's my size?

Principle 3: the more specific, the better.

Demo1:

The code is as follows:

.class1. Class2. Class3 {font-size: 25px;}

.class2 .class3 {font-size:18px}

.class3 {font-size: 12px;}

What's my size?

Principle 4: label # ID > label. Class

Demo1:

The code is as follows:

Span#id3 {font-size:18px}

# id3 {font-size:12px}

Span.class3 {font-size:18px}

.class3 {font-size:12px}

What's my size?

What's my size?

Finally: when the principle conflicts before, principle 1 > principle 2 > principle 3 > principle 4

! Important

Does IE6 know him or not?! important???

A: yes, but there is a little bug.

For example:

The code is as follows:

# ida {size:18px}

.classb {font-size: 12px;}

! important test: 18px

Join in! important

The code is as follows:

# ida {font-size:18px}

.classb {font-size: 12px! important;}

! important test: 12px

IE6 BUG:

The code is as follows:

.classb {font-size: 18px! important; font-size: 12px}

! important test: 12px

Reasons and methods:

Here are 12-pixel words in ie6 and 18px words in other browsers.

But when we change the style,! important in the back, that is, .classb {font-size: 12pxbot font important; size: 18px! important;}, then ie6 is the same word as other browsers.

The above is all the contents of the article "what are the CSS questions that may be asked during the interview". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.