Some CSS questions you may be asked during an interview

Some CSS questions you may be asked during an interview

This article is just to commemorate those CSS questions that were written and asked 100 times.

ask:

What are the CSS selectors? Which properties are inherited? Priority? Which one has higher priority, inline or important?

Selector

1 Wildcard selector (*) Represents the style of all elements in the page *{font-size:12px;margin:0;padding:0;}
2 Type selectors (body, div, p, span, etc.) The existing tag types in the web page are used as name selectors div{width:10px;height:10px;}
3 Group selector (,) Assign the same style to a group of objects at the same time a:link,a:visited{color:#fff;}
4 Level selector (space) Contains selectors to assign styles to sub-objects within an object #header top{width:100px;}
5 id selector (#) The id selector is unique and cannot be reused in a page. #header{width:300px;}
6 class selector (.) Can be reused in pages .title{width:300px;}
7 IEhack selectors (_, *, \0, \9\0;) Compatible with different browsers .title{_width:50px;*height:30px;}

Inheritable properties


Copy code
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, speak numeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

Four principles of priority

Principle 1 : Inheriting unspecified talents

demo1:


Copy code
The code is as follows:

<style type="text/css">
*{font-size:20px}
.class3{ font-size: 12px; }
</style> </p> <p><span class="class3">What is my font size? </span> <!-- Running result: .class3{ font-size: 12px; }-->

demo2:


Copy code
The code is as follows:

<style type="text/css">
#id1 #id2{font-size:20px}
.class3{font-size:12px}
</style> </p> <p><div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">What is my font size? </span> </p>
</div> <!--Running result: .class3{ font-size: 12px; }-->

Principle 2: #ID > .class > tag

demo1:


Copy code
The code is as follows:

<style type="text/css">
#id3 { font-size: 25px; }
.class3{ font-size: 18px; }
span{font-size:12px}
</style> </p> <p><span id="id3" class="class3">What is my font size? </span> <!--Running result: #id3 { font-size: 25px; }-->

Principle 3: The more specific, the better

demo1:


Copy code
The code is as follows:

<style type="text/css">
.class1 .class2 .class3{font-size: 25px;}
.class2 .class3{font-size:18px}
.class3 { font-size: 12px; }
</style> </p> <p><div class="class1">
<p class="class2"> <span class="class3">What is my font size? </span> </p>
</div> <!--Running result: .class1 .class2 .class3{font-size: 25px;}-->

Principle 4: Tag#ID > Tag.class

demo1:


Copy code
The code is as follows:

<style type="text/css">
span#id3{font-size:18px}
#id3{font-size:12px}
span.class3{font-size:18px}
.class3{font-size:12px}
</style></p> <p><span id="id3">What is my font size? </span>
<span class="class3">What is my font size? </span> <!--Running result: span#id3{font-size:18px} | span.class3{font-size:18px}-->

Finally: When principles conflict, Principle 1 > Principle 2 > Principle 3 > Principle 4

! important

Does IE6 recognize !important? ? ?

Answer: Yes, but there is a small bug.

For example:


Copy code
The code is as follows:

<style>
#ida {size:18px}
.classb { font-size: 12px; }
</style></p> <p><div id="ida" class="classb">!important test: 18px</div>

Join!important


Copy code
The code is as follows:

<style>
#ida{font-size:18px}
.classb{ font-size: 12px !important; }
</style></p> <p><div id="ida" class="classb">!important test: 12px</div>

IE6 BUG:


Copy code
The code is as follows:

<style>
.classb{ font-size: 18px !important; font-size: 12px }
</style></p> <p><div class="classA">!important test: 12px</div>

Reasons and solutions:

Here the text is 12 pixels in IE6, while it is 18 pixels in other browsers.

But when we change the style and put !important at the end, that is, .classb{ font-size: 12px;font-size: 18px !important; }, then IE6 will also display 18px fonts, just like other browsers.

<<:  Nginx source code compilation and installation process record

>>:  A brief discussion on the magical uses of CSS pseudo-elements and pseudo-classes

Recommend

Explore how an LED can get you started with the Linux kernel

Table of contents Preface LED Trigger Start explo...

A line of CSS code that crashes Chrome

General CSS code will only cause minor issues wit...

vue-router hook function implements routing guard

Table of contents Overview Global hook function R...

Some pitfalls of JavaScript deep copy

Preface When I went to an interview at a company ...

Detailed explanation of using Docker to build externally accessible MySQL

Install MySQL 8.0 docker run -p 63306:3306 -e MYS...

HTML+CSS+jQuery imitates the search hot list tab effect with screenshots

Copy code The code is as follows: <!DOCTYPE ht...

MySQL permissions and database design case study

Permissions and database design User Management U...

Personalized and creative website design examples (30)

Therefore, we made a selection of 30 combinations ...

How to Install Xrdp Server (Remote Desktop) on Ubuntu 20.04

Xrdp is an open source implementation of Microsof...

js realizes the magnifying glass function of shopping website

This article shares the specific code of js to re...

Example of how to identify the user using a linux Bash script

It is often necessary to run commands with sudo i...

How to make React components full screen

introduce This article is based on React + antd t...

The implementation code of the CSS3 input box is similar to the animation effect of Google login

Use CSS3 to animate the input box similar to the ...

Detailed explanation of the installation and use of Linux scheduled tasks crontabs

Install crontab yum install crontabs CentOS 7 com...

Guide to Efficient Use of MySQL Indexes

Preface I believe most people have used MySQL and...