Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleCSS Selector In Detail


1. What are the pseudo-class selectors? 2. What is the difference between pseudo-elements and pseudo-classes? 3. Is the following statement true about CSS selectors? ❌ header. p is all descendants of type P whose ID is header. ✅ header >. P is a direct child element that selects class P within the header label. ✅ #header.p is an element whose ID is header and whose class is P. ✅ #header, p is to select the element with the header id and select all the P tags.Copy the code

🙋 on the question “refer to the answer in detail”, please click here to view access!


Preface: The first part of this article introduces “HTML document tree structure”. On the basis of a complete understanding of this “tree structure”, you can have a good grasp of the following two large selectors (combinatorial selectors and pseudo-class selectors).

Because only with this “structure tree” can the “selector” discussed in this article work.

It is very big, very miscellaneous, very basic, very important knowledge point, belong to must master.


1 HTML document tree structure

Through previous knowledge of HTML, we know that an HTML document is built on the basis of a hierarchy between elements, and each legal document generates a structure tree (as shown in the following example).

In this hierarchy, each element has its own position, and each element is relative to other elements in the structure, they are either “parent-child relationship”, or “grandfather-grand-descendant relationship”, or “direct neighbor relationship”, or “ordinary neighbor relationship”, etc.

Here is an example of the HTML document and its corresponding “structure tree” 🙂

<! DOCTYPEhtml>
<html>                                            
<head> 
  <meta charset="utf-8"> 
  <title>Front 10,000 hours</title>
</head>
<body>
  <h1>"<em>Front 10,000 hours</em>": XXX</h1> 
  <p><em>Learning time: 2 hours...</em></p>
  <p><strong><em>Preface:</em></strong>How does Oli write articles...</p>
  <h2>1 know...</h2>
  <p>First turn on the<em>"Definition"</em>clear</p>     
  <h2>2. Why...</h2>                      
  <ul>
    <li>What is the<ol>                                           
        <li>what
          <ul>
            <li>w</li>
            <li>w</li>
            <li>h</li>
          </ul>
        </li>                            
        <li>why</li>                           
        <li><em>how</em></li>  
      </ol>
    </li>
    <li>why</li>                           
    <li>How's that</li>  
  </ul>  
  <h2>3 How about...</h2>                      
  <ol>                                             
    <li>what</li>
    <li>why</li>                           
    <li><em>how</em></li> 
  </ol>                  
</body>                                            
</html>
Copy the code

The document structure is as follows:

1.1 Elements of father-son relationship

If an element appears at a level above another element in the document hierarchy, the former is called the “parent” of the latter, and the latter is the “child” of the former.

1.2 Elements of the relationship between grandparents and grandchildren

If one element is directly one level above another, they are parent-child relationships, and if the path from one element to another goes through two or more levels, these elements are grandfather-grandchild relationships.

1.3 the root element

The body element is the ancestor of all elements displayed by the browser by default, and the HTML element is the ancestor of the entire document (hence, the HTML element is also called the “root element”).


2 Combinatorial selectors

2.1 Multi-element selectors

  • Usage: Apply the same style to multiple elements;

  • Format: For example, style the elements H1 and H2 so that the background color is yellow.

🔗 source code and effect display

h1.h2 {
  background: yellow;
}
Copy the code

❗️ Note that there must be this character between multiple selectors.

2.2 Descendant selectors

  • Usage: make certain styles and rules apply only to some specified descendant elements that have a “grandparent” relationship, but not to other non-specified structures;

  • Format: For example, in the above example, only the descendant of ul element em is styled, so that the text is crossed out and the background color is yellow.

🔗 source code and effect display

ul em {
  text-decoration: line-through;
  background: yellow;
}
Copy the code

❗️ Note That the selectors are separated by the combination character space.

2.3 Child element selectors

  • Usage: make certain styles and rules apply only to specified child elements that have a direct parent-child relationship, and not to other non-specified structures;

  • Format: For example, in the above example, only the child element em of element P is styled so that the text is crossed out and the background color is yellow.

🔗 source code and effect display

p > em {
  text-decoration: line-through;
  background: yellow;
}
Copy the code

❗️ Notice that the selectors are separated by the > combinator.

2.4 Direct adjacent element selector

  • Usage: If two elements have a common parent and the latter element is “immediately” after the former, you want to style the latter element.

  • Format: For example, in the above example, only the p element “immediately following” the first H2 element is styled, and the other p elements remain unchanged, so that the text is crossed out and the background color is yellow.

🔗 source code and effect display

h2 + p {
  text-decoration: line-through;
  background: yellow;
}
Copy the code

❗️ Notice that the selectors are separated by the + “combinator”.

2.5 Ordinary adjacent element selector

  • Usage: In contrast to the “directly adjacent element selector”, two elements must also have a common parent element, but the latter element does not need to be “immediately” after the previous element, you can also add styles to the latter element;

  • Format: For example, style the h2 element after the first h2 element in the example above so that the text is crossed out and the background color is yellow.

🔗 source code and effect display

h2 ~ h2 {
  text-decoration: line-through;
  background: yellow;
}
Copy the code

❗️ Notice that the selectors are separated by ~.


3 pseudo-classes

3.1 Why are “pseudo-classes” needed?

First review again: “(02) (2) the HTML element, attribute, rounding | HTML” in the relevant knowledge about “hyperlink a element”.

“Link” appears frequently in the actual page, people want to “not visited page” and “visited page” style distinction, intuitive way is in the HTML document inside the a element to add a class attribute, let the A element add a class:

<a href="Http://..." class="visited">Here's the link</a>
Copy the code

Then style it with the class selector:

a.visited {
  color = red;
}
Copy the code

Obviously, however, this approach is not practical at all, because it is impossible to change the linked “class” every time you visit a new page.

Instead, CSS defines two “static pseudo-classes” that are only used for “hyperlinks,” which can be styled directly without input in an HTML document. Are:

  • Indicates that the “hyperlink” (the a element has an href attribute) is not accessed.
:link
Copy the code

❗️ Note the “colon” on the writing format. This colon is the name card for “pseudo-classes” and “pseudo-elements”. And there must be no space between the colon and the state link!

  • Indicates that the hyperlink has been accessed.
:visited
Copy the code

3.2 Why are “dynamic pseudo-classes” needed?

As we know above, CSS first defines two “static pseudo-classes” to meet the needs, but: Link and: Visited have limited changes to the document style, and generally will not be used again after the first display. And people need more: link “focus”, “hover” on the link, “active” state, all need style distinction.

CSS then defines three “dynamic pseudo classes” that can change the appearance of a document based on user behavior. These pseudo classes, or all pseudo classes, do not have to be entered in an HTML document, but can be styled directly. Are:

  • Indicates that the element has an input “focus” — that is, it can accept keyboard input, or it can be activated in some way;
:focus
Copy the code
  • Indicates that the appearance can be changed when the mouse hovers over the element.
:hover
Copy the code
  • Indicates that the element can be “activated” by user input, for example, if the user stays on a hyperlink that is “activated” when the mouse clicks.
:active
Copy the code

❗ ️ note:

  • CSS “pseudo-classes” can not only change the color of different states, but also apply any desired style;

  • Dynamic pseudo-classes are different from static pseudo-classes. Dynamic pseudo-classes can be applied to any element, not just hyperlinks.

  • For reasons of “inheritance and cascading” (more on that in the next article), the order of “pseudo-classes” is important, usually as follows:

:link
:visited
:focus
:hover
:active
Copy the code


Pseudo-class selector

4.1 Examples of “Static and Dynamic Pseudo-class selectors

First review again: “(03) (3) the HTML form, rounding | HTML”, master the form elements. Then do the following example:

🔗 source code and effect display – please open this link, go to the operation, see the effect! HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>Front 10,000 hours</title>
</head>
<body>
  <a href="https://zhuanlan.zhihu.com/Oli-Zhao" title="10,000 hours on the Oli front end.">My blog address</a>
  <div class="login">                                                    
    <form action="/getinfo" method="get">                                             
      <div class="username">                                                        
        <label for="username">The name</label>                                          
        <input id="username"  type="text" name="username" value="Oli">          
      </div>
      <div class="password">
        <label for="password">password</label>
        <input id="password" type="password" name="password" placeholder="Enter your password"> 
      </div>
      <div class="sex">
        <label>gender</label>                                                         
        <input type="radio" name="sex" value="Male" checked>male<input type="radio" name="sex" value="Female">female</div>       
    </form>
  </div>
</body>
</html>
Copy the code

CSS

a:link {
  color: blue;
}

a:visited {
  color: red;
}

input:focus {
  background: yellow;
  font-weight: bold;
}

a:hover {
  font-size: 30px;
}

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

❗️ Note: The next article will detail the order in which the links appear as they change with the user’s action state.

4.2 User Interface Element Pseudo-class selector (UI Element pseudo-class selector)

  • In the Form element, radio and checkbox both have selected and unchecked states, which can be styled by the following selectors.
:checked
Copy the code
  • The browser defaults to “black text on a blue background” when holding down the left mouse button. If I want to change this, I can use the following selector.
::selection
Copy the code
  • By default, Web form elements are “available,” but elements (text fields, password fields, checkboxes, checkboxes, and so on) can also be “unavailable.” The selectors below can style each state of a form element.
:enabled
:disabled
Copy the code
  • By default, Web form elements are “read-write,” but elements (input fields, text fields, and so on) can have a “read-only” state. The selectors below can style each state of a form element.
:read-write
:read-only
Copy the code

❗️ Note the selector format!

Code example: 🔗 source code and effect display – please open this link, to operate, see the effect! HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>Front 10,000 hours</title>
</head>
<body>
  <a href="https://zhuanlan.zhihu.com/Oli-Zhao" title="10,000 hours on the Oli front end.">My blog address</a>
  <div class="login">
    <form action="/getinfo" method="get">
      <div class="username">
        <label for="username">The name</label>
        <input id="username"  type="text" name="username" value="Oli">
      </div>
      <div class="password">
        <label for="password">password</label>
        <input id="password" type="password" name="password" placeholder="Enter your password">
      </div>
      <div class="sex">
        <label>gender</label>
        <input type="radio" name="sex" value="Male" checked>male<input type="radio" name="sex" value="Female">female</div>
      <div>
        <label for="enabled">Available:</label>
        <input type="text" name="enabled">
      </div>
      <div>
        <label for="disabled">Do not use:</label>
        <input type="text" name="disabled"   disabled="disabled">
      </div>
      <div>
        <label for="enabled">Reading and writing:</label>
        <input type="text" name="status">
      </div>
      <div>
        <label for="disabled">Read only:</label>
        <input type="text" name="status"   readonly="readonly">
      </div>
    </form>
  </div>
  <p>Oli tries to be a "great programmer" and he's a good guy!</p>
</body>
</html>
Copy the code

CSS

a:link {
  color: blue;
}

a:visited {
  color: red;
}

input:focus {
  background: yellow;
  font-weight: bold;
}

a:hover {
  font-size: 30px;
}

a:active {
  color: silver;
}

:checked {
  font-size: 50px;
}

p::selection {
  background-color: orange;
  color: white;
}

input:enabled {
  outline: 1px dotted black;
}

input:disabled {
  background-color: green;
}

input:read-write {
  outline: 1px dotted black;
}

input:read-only {
  background-color: gray;
}
Copy the code

4.3 Structure pseudo-class selector

❗️ This category of selectors need to use examples to explain, the length is long, will be followed by another article to explain. This article only makes the relevant knowledge point enumeration. (E is for element!)

This first class

1. Selects the first child of the parent element. E:first-child

2. Selects the last child of the parent element. E:last-child

3. Select the NTH element or even element under the parent element. The value of n is the number /odd/even. E:nth-child(n)

4Select the only child element in the parent element ———— The parent element has only one child element. E:only-child
Copy the code

4.3.2 the second class

1Select the first sibling element of the same type. E:first-of-type

2Select the last sibling element of the same type. E:last-of-type

3Select the NTH sibling element of the same type. The value of n is the number /odd/even. E:nth-of-type(n)

4Select a unique child element of a particular type within the parent element ———— The parent element has multiple children. E:only-of-type
Copy the code

4.3.3 the third class

1.Document "root element" --htmlElements.:root

2. Select all elements except one. E:not(selector)

3. Select an element that does not contain any child elements. Note that text nodes can also be treated as child elements. E:empty

4. Selects a target element in the page. E:target
Copy the code


Postscript: finally completed this article, a lot of knowledge, if just a simple look at the harvest will be very small, code learning needs us to move to, keep knocking, keep trying. The nice thing about working with a machine is that it generally doesn’t lie to you. Right is right and wrong is wrong. All in all, thanks to The Times!

I wish you good, QdyWXS ♥ you!