CSS selector complete solution

CSS selectors specify which elements CSS rules will be applied to

Writing in the front

This article uses a unified HTML example to test which elements are styled (mostly 1px borders) by using different selector examples. The corresponding HTML code is shown below. For your understanding, I have included a tree of elements below.

The HTML code


      
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="grandfather1">grandfather1
  <div class="father1">father1
    <div id="son11" name="TedMosby" nickName="Ted Teddy" language="zh-CN"><span>son11</span></div>
    <div id="son12" name="BobMosby"><span>son12</span></div>
    <div id="daughter11" name="LilyMosby"><span>daughter11</span></div>
  </div>
</div>
</body>
</html>
Copy the code

tree

inheritance

Inheritance is one of the most basic things in CSS.
Inheritance has nothing special (the lowest status), and we can always use a selector to override the style of the element inherited from the parent selector.

Inheritable styles

In general, properties associated with “font” are inherited. The following attributes are inherited.

Font size: The size of the font

Font-weight: the weight of a font

Font-family: arial, sans-serif

Color: indicates the font color

A style that cannot be inherited

In general, properties associated with “boxes” are not inherited. None of the following attributes will be inherited.

Border: border

Margin: the outer margin

Padding: Inside margin

Background: background color

Basic selector

Universal Selector

Select all elements

/* Give all elements a 🍎 color border */
* {
  border: 1px solid red;
}
Copy the code

Due to the screenshot tool, the right border of <body> is not shown in the screenshot.

Type Selector

Select an element of a type (such as div or SPAN)

/* Give all div elements an 🍏 color border */
div {
  border: 1px solid green;
}
Copy the code

Class Selector

Select all elements for “value of class attribute === given value”
Syntax:.[given value]

/* Add an 🧀 color border */ to all divs whose class value is father1
.father1 {
  border: 1px solid Gold;
}
Copy the code

ID Selector

Select which (unique) element of “ID attribute value === given value”
Syntax: #[given value]

/* Add a 🥕 color border */ to all divs with ID son11
#son11 {
  border: 1px solid orange;
}
Copy the code

Attribute Selector

Elements are matched by attribute names and attribute values

Syntax 1: [attr]

With attributes named attr

/* Add a 🍐 color border */ to the div with the name attribute
[name] {
  border: 1px solid yellowgreen;
}
Copy the code

Syntax 2: [attr=value]

With attributes named attr
The value of the attr attribute is value

/* Add a 🍇 color border */ to the div whose name attribute is TedMosby
[name=TedMosby] {
  border: 1px solid violet;
}
Copy the code

“#ID attribute value” = “ID =[ID attribute value]”

Syntax 3: [attr~=value]

With attributes named attr
The value of this property is a whitespace separated list
At least one value in the list is value

/* Add a 🍆 color border */ to the div containing Teddy in the nickName attribute list
[nickName~=Teddy] {
  border: 1px solid blueviolet;
}
Copy the code

“.[Class name] “is equivalent to” class~=[class name] “.

Grammar 4: [attr | = value]

With attributes named attr
The value of this attribute is value or prefixed with “value-“

/* Add an 🍒 color border */ to div whose language attribute is zh-cn
[language|=zh] {
  border: 1px solid Coral;
}
Copy the code

Syntax 5: [attr^=value]

With attributes named attr
Attribute values start with value

/* Add a 🥒 color border */ to the div that begins with Ted for the name attribute
[name^=Ted] {
  border: 1px solid forestGreen;
}
Copy the code

[attr$=value]

With attributes named attr
Attribute values end with value

/* Add an 🌰 color border */ to the name attribute's div ending in Mosby
[name$=Mosby] {
  border: 1px solid Brown;
}
Copy the code

[attr*=value]

With attributes named attr
The property value contains value

/* Add a 🍅 color border */ to the div whose name attribute contains Mos
[name*=Mos] {
  border: 1px solid Tomato;
}
Copy the code

Combinatorial selector

Syntax: A, B (A, B are basic selectors)

/* add 🍓 color border */ to BobMosby's son and LilyMosby's daughter whose name attribute is BobMosby
[name=TedMosby].[name=LilyMosby]{
  border: 1px solid Crimson;
}
Copy the code

combiner

Descendant Combinator

Grammar:A B

/* Add a 🍑 color border */ to all descendant elements of grandfather1 div
.grandfather1 div {
  border: 1px solid PeachPuff;
}
Copy the code

Child Combinator

Grammar:A>B

/* Add a 🥔 color border */ to all immediate children of the Grandfather1 class
.grandfather1 > div {
  border: 1px solid Burlywood;
}
Copy the code

General Sibling Combinator

Grammar:A~B

/* Add a 🍌 color border to all son11 siblings */
#son11 ~ div {
  border: 1px solid yellow;
}
Copy the code

Adjacent Sibling Combinator

Grammar:A+B

/* Add an 🍈 color border to son11's immediate sibling */
#son11 + div {
  border: 1px solid yellow;
}
Copy the code

pseudo-classes

Pseudo-classes are mainly used to select the special state of the element. The usage of some common pseudo-classes is briefly listed here. For more information, see -mDN

Static pseudo class

:link: Unclicked links
:visited: Clicked links

Dynamic pseudo class

:hover: Hover the mouse
:active: The mouse is pressed and not released
:focus: The element that gets focus

User interface element pseudo-classes

:checked: to be selected

: Checked works for Radio or Checkbox

::selection: Part selected by the left mouse button (note that there are two colons)
:enabled 和 :disabled: Enable or disable
:read-onlyThe: element cannot be edited by the user

Structure pseudo class

The father find son

:first-child: First child
:nth-child(n): N child
:last-child: The last child
:only-child: An element without any sibling elements

Look for the same kind of brother

:first-of-type: type of a set of sibling elementsThe first element
:nth-of-type(n): type of a set of sibling elementsThe NTH element
:last-of-type: type of a set of sibling elementsThe last element
:only-of-type: does not have any elements that want siblings of the same type

other

:root: root element (HTML element)
:not: All elements except an element
:empty: An element that does not contain any children
:target: stands for oneThe onlyPage element,”The element id value “===” the part after # in the URL”

For example, URL:http://www.example.com/index.html#section2 👇 following elements can be section: target pseudo-classes selected:

<section id="section2">Example</section>
Copy the code

Selector Priority (The Famous CSS Specifishity)

Many people have cited the 🐟 chart without elaborating.

Calculation of the priority of the selector

A formula to calculate

Wildcard selector (*) : Very low priority, +0 points
Type pickers (div, SPAN, etc.) : +1 point
Class selector (class=” XXX “)/attribute selector/pseudo-class selector: +10 points
ID selector (ID =” XXX “) : priority is +100 points
Inline style (style=” XXX “) : Priority is +1000 points
Use! Important: The priority is +10000 points

Priority calculation process

Calculate the total score of a selector, the higher the total score, the higher the priority;
For two selectors with the same total score, the one near the back has a higher priority;

An interesting question

<a href="https://www.google.com">Google</a>
Copy the code

a:link {
	color: blue;
}

a:visited {
  color: red;
}

a:hover {
  color: orange;
}

a:active {
  color: green;
}
Copy the code

Style actual effect description

When not pressed, the link font color is blue;
When the mouse moves over the link, the link font color is orange;
When the mouse is pressed (until released), the link font color is green;

Hover () :link () :active () :link ()

After the link is clicked, the link font color is red;

Checked the MDN

In fact, MDN also offers advice on this issue:

In order to render the linked elements correctly,:linkPseudo-class selectors should be placed in front of other pseudo-class selectors and follow LVHA order, that is::link — :visited — :hover — :active.

For more on selectors, you can read Xinxu Zhang’s CSS Selectors World

Writing in the front

The HTML code

tree

inheritance

Inheritable styles

A style that cannot be inherited

Basic selector

Universal Selector

Type Selector

Class Selector

ID Selector

Attribute Selector

Syntax 1: [attr]

Syntax 2: [attr=value]

Syntax 3: [attr~=value]

Grammar 4: [attr | = value]

Syntax 5: [attr^=value]

[attr$=value]

[attr*=value]

Combinatorial selector

combiner

Descendant Combinator

Child Combinator

General Sibling Combinator

Adjacent Sibling Combinator

pseudo-classes

Static pseudo class

Dynamic pseudo class

User interface element pseudo-classes

Structure pseudo class

The father find son

Look for the same kind of brother

other

Selector Priority (The Famous CSS Specifishity)

Calculation of the priority of the selector

A formula to calculate

Priority calculation process

An interesting question

Style actual effect description

Checked the MDN

Related Posts

Front-end paging implementation

CSS list (ordered, unordered, points removed from unordered list, list line display)

Zhejiang Provincial Office (Zhejiang Province integrated digital resource system) H5 development self-help pit avoidance guide