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:

demo2:

Copy code

The code is as follows:

Principle 2: #ID > .class > tag

demo1:

Copy code

The code is as follows:

Principle 3: The more specific, the better

demo1:

Copy code

The code is as follows:

Principle 4: Tag#ID > Tag.class

demo1:

Copy code

The code is as follows:

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:

Join!important

Copy code

The code is as follows:

IE6 BUG:

Copy code

The code is as follows:

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

After mybatis-plus paging parameters are passed in, the sql where condition does not have limit paging information operation

Blog

Solution to the problem that order by is not effective in MySQL subquery

Some CSS questions you may be asked during an interview

Selector

Inheritable properties

Four principles of priority

! important

After mybatis-plus paging parameters are passed in, the sql where condition does not have limit paging information operation

Solution to the problem that order by is not effective in MySQL subquery

How to execute Linux shell commands in Docker

Practical tutorial on modifying MySQL character set

Installation and configuration tutorial of MySQL 8.0.16 under Win10

W3C Tutorial (5): W3C XML Activities

How to reduce image size using Docker multi-stage build

MySQL series: Basic concepts of MySQL relational database

How to add sudo permissions to a user in Linux environment

Detailed explanation of MySQL master-slave replication read-write separation construction

Recommend

HTML Form Tag Tutorial (4):

A brief discussion on how to modify/set the environment variable JAVA_HOME under Linux

Docker installs Redis and introduces the visual client for operation

Example analysis of mysql non-primary key self-increment usage

WeChat applet realizes the effect of shaking the sieve

Detailed explanation of nginx forward proxy and reverse proxy

MySQL log trigger implementation code

MySQL explain obtains query instruction information principle and example

4 flexible Scss compilation output styles

Implementation of multi-site configuration of Nginx on Mac M1

Summary of MySQL usage specifications

Detailed explanation of the installation steps of the MySQL decompressed version

How to monitor oracle database using zabbix agent2

A brief summary of my experience in writing HTML pages

Nginx uses Lua+Redis to dynamically block IP