Front-end interview CSS series-selector, weight calculation (1)

Interview

Q: What are the types of CSS selectors?

Answer: The types of CSS selectors are: type selector, universal selector, attribute selector, class selector, ID selector, pseudo-class selector, and pseudo-element selector. Before the selector, you can use a comma "," for grouping, or use a space, plus "+", right angle bracket ">", and tilde "~" for grouping.

Introduction

The content of this article is relatively simple and basic. It mainly introduces some content related to selectors. I originally planned to put the content related to selectors and selector weight calculations together, but this is too long and not easy to read. So this part of the content will be split into two pieces of content, this one will talk about selectors, and the next one will talk about the calculation of selector weights. A picture is placed at the end of the article, which can be regarded as an introduction to the weight calculation.

Selector

In CSS, selectors are used to specify the HTML elements on the web page that we want to format. CSS provides us with a variety of selector methods, allowing us to format the styles of our selected elements very finely; in use, CSS selectors are case-insensitive DIV{font-size:18px} and div{font-size:18px} effect is the same.

selector group (list)
If there are multiple selectors that use the same style, then these individual selectors can be combined into a "selector group" or "selector list" using a comma ",", for example:

// 相同样式的选择器
h1 {font-family:'苹方'}
h2 {font-family:'苹方'}
h3 {font-family:'苹方'}

// 使用逗号分割，合成选择器组
h1, h2, h3{font-family:'苹方'}

PS: In the selector group, if one of the selectors is invalid, the entire selector group is invalid, for example:
h1, ..h2, .h3 {font-family:'Ping Fang'} The selector ..h2 is invalid, CSS will delete the entire selector group according to the rules

Simple selector

Simple selectors include: type selection, universal selector, attribute selector, class selector, ID selector and pseudo-class selector. As a front-end developer, we must have used all these simple selectors. Here is a brief explanation.

Type selector

According to the given node name, select all matching HTML elements.

Syntax : elementname
example :

// 匹配所有的h1标签
h1 { font-size:18px }

// 匹配所有的input标签
input{ font-size:18px }

Universal selector

Select all HTML elements, indicated by an asterisk (*)
Syntax : *
example :

// 把所有元素的内外边距都设置为0
* {
  padding: 0;
  margin: 0;
}

// 匹配所有div标签的子元素
div *{ font-size:18px }

Attribute selector

According to the given attributes, select all matching elements
syntax : [attr] [attr = value] [attr ~ = value] [! Attr = value] [attr ^ = value] [attr $ = value] [ attr*=value]

example :

[attr]

Represents an element with the attr attribute, regardless of the value of the attribute.

// 匹配具有title属性的所有a元素
a[title] {
  color: yellow;
}

[attr = value]

Represents an element whose attr attribute value happens to be "value".

// 匹配target属性值为blank的所有a元素
a[target="blank"] {
  color: yellow;
}

[attr ~= value]

Represents an element whose attr attribute value is a list of words separated by spaces, one of which happens to be "value".

// 匹配class属性值包含special的元素
p[class~="special"]{
  color: yellow;
}

[attr |= value]

Indicates an element with attr attribute, whose value is either exactly "value" or prefixed with "value-".

// 匹配lang属性的值为en或者en-为前缀的所有a元素
a[lang|="en"] {
  color: yellow;
}

[attr ^= value]

Indicates an element with an attr attribute and an attribute whose attribute value starts with the prefix "value". If "value" is an empty string, the selector does not represent anything.

// 匹配HTML元素object，其属性type值是以image/开头的元素
object[type^="image/"] {
  color: yellow;
}

[attr $= value]

Represents an element with an attr attribute, and the attribute value ends with the suffix "value". If "value" is an empty string, the selector does not represent anything.

// 匹配属性href值以.html结尾的a元素
a[href$=".html"] {
  color: yellow;
}

[attr *= value]

Represents an element whose attr attribute value contains at least one instance of the substring "value". If "value" is an empty string, the selector does not represent anything.

// 匹配属性title值包含hello的p元素
p[title*="hello"] {
  color: yellow;
}

ID selector

Select a matching element according to the id Each ID attribute should be unique

Syntax : #idname

example :

// 匹配ID值为chapter1的元素
#chapter1{
  font-size:30px;
}

CLASS selector

According to class attribute, select all matching elements.

Syntax :

example :

// 匹配类名class值为header的元素
.header{
  font-size:30px;
}

Pseudo-class

: pseudo-selector supports selecting elements based on state information that is not included in the document tree.

Syntax : Double quotes ":"

example :

// 匹配类名为ext且被访问过的a元素
a.ext:visited{
  font-size:30px;
}

According to their functions, pseudo-class selectors can be roughly divided into: dynamic pseudo-classes, target pseudo-classes, language pseudo-classes, UI element status pseudo-classes, structural pseudo-classes, blank pseudo-classes, and negative pseudo-classes. Refer to the picture below:

Pseudo element selector

:: pseudo-element selector is used to represent entities that cannot be expressed in HTML semantics. Commonly used ones are:::first-line, ::first-letter, ::selection, ::after, ::before, ::placeholder;

Syntax : Two double quotes "::"

::first-line

Used to set a special style to the first line of text.

// 设置p元素的首行样式颜色为红色
p:first-line{
    color:#ff0000;
    font-variant:small-caps;
}

The "first-letter" pseudo-element can only be used for block-level elements. that uses the 160c9bda24597e ::first-line pseudo-element, only a small part of the css attributes can be used: all font-related attributes, all background-related attributes. For more detailed content Click to view

::first-letter

Used to set a special style to the first letter of the text.

// 设置p元素的首字母样式颜色为红色，字体为xx-large
p:first-letter{
    color:#ff0000;
    font-size:xx-large;
}

Like first-letter, it can only be used for block-level elements, and only some CSS properties can be used, such as color, font-size, font-weight, etc.

For more information click to view

::selection

It is applied to the part of the document that is highlighted by the user (such as the part selected by the mouse or other selection devices).

// 设置用户选中内容的背景颜色为cyan
::selection {
  background-color: cyan;
}

Only a few CSS properties can be used for ::selection selectors: color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, text-shadow. For more information click to view

::before

Insert new content before the content of the element.

// 在a标签的内容前面添加一个心形图标
a::before {
  content: "♥";
}

The pseudo-elements generated by ::before and ::after cannot be applied to tags such as
see

::after

Similar to ::before, except that new content is inserted after the content of the element.

// 在a标签的内容后面添加一个心形图标
a::before {
  content: "♥";
}

Combination selector

Through simple selectors for different combinations, matching elements, there are four combinations: descendant selector, child (element) selector, adjacent sibling selector, ordinary sibling selector;

Selector name	grammar	description
Descendant selector	A B	Match any element, meet the condition: B is a descendant node of A (B is a child node of A, or a child node of A's child node)
Child element selector	A>B	Match any element, meet the condition: B is a direct child of A
Neighbor sibling selector	A+B	Match any element, meet the conditions: B is the next sibling node of A, (AB has the same parent node, and B immediately follows A)
Normal Brother Selector	A~B	Match any element, meet the conditions: B is any one of the sibling nodes after A (AB has the same parent node, B is after A, but not necessarily next to A)

List of selector syntax

Selector type	format	explain
Wildcard selector	*	All elements
Type selector	E	Element of type E
Attribute selector	E[foo]	E element with "foo" attribute
Attribute selector	E[foo="bar"]	The E element whose "foo" attribute value is exactly equal to "bar"
Attribute selector	E[foo~="bar"]	Its "foo" attribute value is a list of space-separated values E elements where one of the values is exactly equal to "bar"
Attribute selector	E[foo^="bar"]	The E element whose "foo" attribute value happens to start with the string "bar"
Attribute selector	E[foo$="bar"]	E elements whose "foo" attribute value ends with the string "bar"
Attribute selector	E[foo*="bar"]	The E element whose "foo" attribute value contains the substring "bar"
Attribute selector	E[foo\	="en"]	An E element whose "foo" attribute has a hyphen-separated list of values
Pseudo-class selector	E:root	Document root
Pseudo-class selector	E:nth-child(n)	The nth child element of its parent element
Pseudo-class selector	E:nth-last-child(n)	An E element, the nth child element of its parent element, counting from the last
Pseudo-class selector	E:nth-of-type(n)	An E element, the nth sibling element of its type
Pseudo-class selector	E:nth-last-of-type(n)	An E element, the nth sibling element of its type, counting from the last one
Pseudo-class selector	E:first-child	An E element, the first child element of its parent element
Pseudo-class selector	E:last-child	An E element, the last child element of its parent element
Pseudo-class selector	E:first-of-type	An E element, the first sibling element of its type
Pseudo-class selector	E:last-of-type	An E element, the last sibling element of its type
Pseudo-class selector	E:only-child	An E element, the only child element of its parent element
Pseudo-class selector	E:only-of-type	An E element has only sibling elements of its type
Pseudo-class selector	E:empty	An E element with no children
Pseudo-class selector	E:link	An E element whose target is not yet visited hyperlink
Pseudo-class selector	E:visited	An E element has a hyperlink whose target has been visited
Pseudo-class selector	E:active	An E element whose target is currently activated
Pseudo-class selector	E:hover	An E element whose target is in the state of using device virtual finger
Pseudo-class selector	E:focus	An E element whose target is currently in focus
Pseudo-class selector	E:target	The E element that is the target of the reference URI
Pseudo-class selector	E:lang(fr)	Type E element in language "fr"
Pseudo-class selector	E:enabled	User interface element E enabled
Pseudo-class selector	E:disabled	Disabled user interface element E
Pseudo-class selector	E:checked	Selected user interface element E
Pseudo-class selector	E:not(s)	E element that does not match the simple selector
Pseudo element selector	E::first-line	The first formatting line of the E element
Pseudo element selector	E::first-letter	The first formatted letter of the E element
Pseudo element selector	E::before	Content generated before the E element
Pseudo element selector	E::after	The content generated after the E element
Class selector	E.warning	An E element whose class name is "warning"
ID selector	E#myid	E element with ID equal to "myid"
Combination selector	E F	F element descendant of E element
Combination selector	E > F	F element child element of E element
Combination selector	E + F	The F element that immediately follows the E element
Combination selector	E ~ F	F element with E element in front

Weight calculation

reference

W3C_CSS3

CSS selector

W3Cschool_CSS Tutorial

Front-end talk: CSS weight