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

Detailed explanation of the order of Mysql query results according to the order of ID in in()

Detailed explanation of the order of Mysql query ...

MySQL extracts Json internal fields and dumps them as numbers

Table of contents background Problem Analysis 1. ...

Solution to Vue data assignment problem

Let me summarize a problem that I have encountere...

Detailed tutorial on installing MySQL 8.0.20 database on CentOS 7

Related reading: MySQL8.0.20 installation tutoria...

How to deploy MySQL master and slave in Docker

Download image Selecting a MySQL Image docker sea...

Implementation of mysql configuration SSL certificate login

Table of contents Preface 1. MySQL enables SSL co...

Solution to uninstalling Python and yum in CentOs system

Background of the accident: A few days ago, due t...

CocosCreator learning modular script

Cocos Creator modular script Cocos Creator allows...

How to start the spring-boot project using the built-in linux system in win10

1. Install the built-in Linux subsystem of win10 ...

TypeScript namespace explanation

Table of contents 1. Definition and Use 1.1 Defin...

A brief analysis of using coredump technology to trace the cause of process crashes in Linux

Recently, a problem occurred in the project. The ...

Linux platform mysql enable remote login

During the development process, I often encounter...

Detailed explanation of vite+ts to quickly build vue3 projects and introduce related features

Table of contents vite Build Configuration vite.c...

ReactJs Basics Tutorial - Essential Edition

Table of contents 1. Introduction to ReactJS 2. U...

Methods and steps for deploying go projects based on Docker images

Dependence on knowledge Go cross-compilation basi...