Câu hỏi phỏng vấn CSS
Câu hỏi

Explain the basic rul...

Câu trả lời

CSS specificity is a fundamental concept in web development that determines which CSS rule applies to an element when multiple rules could apply. Here's a detailed explanation of the basic rules of CSS specificity:

1. Specificity Hierarchy

CSS specificity is based on a hierarchy of selector types. The specificity of a selector determines which style rules are applied to an element when conflicting rules are present. The hierarchy from highest to lowest specificity is as follows:

  • Inline styles: An inline style, added directly within an HTML tag using the style attribute, has the highest specificity. For example, <div style="color: red;"> directly applies styles to the element[1][2][3][4].
  • IDs: An ID selector, denoted with a # prefix, has the next highest specificity. For example, #navbar targets the element with the ID "navbar"[1][2][3][4].
  • Classes, attributes, and pseudo-classes: These selectors have equal specificity and are next in the hierarchy. Class selectors are denoted with a . prefix, attributes selectors use brackets like [type="text"], and pseudo-classes begin with a colon, such as :hover[1][2][3][4].
  • Elements and pseudo-elements: These have the lowest specificity. Element selectors target HTML tags directly like div, and pseudo-elements are used for styling specific parts of an element, indicated by ::, such as ::after[1][2][3][4].

2. Calculating Specificity

Specificity is calculated on a per-selector basis and can be thought of as a score or rank. When multiple selectors target the same element, the one with the highest specificity score is applied. Specificity can be visualized as a series of numbers:

  • Inline styles count as (1,0,0,0)
  • Each ID counts as (0,1,0,0)
  • Each class, attribute, and p...
senior

senior

Gợi ý câu hỏi phỏng vấn

junior

What is the difference between classe s and ID s in CSS?

junior

Explain the CSS box model and the layout components that it consists of

middle

What's the difference between SCSS and Sass?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào