2. A Quick Look at CSS - CSS Selectors, Pseudo-Classes, Inheritance and Cascading

1. CSS selectors

Basic selector:

• Label selector: select through the label with the same name, and the label with the same name can set a public style

  <style>
    h3 {
          
          color:red;}
    p {
          
          color:blue;}
  </style>
  <p>段落</p>
  

• id selector: select by the id attribute of the tag

  <style>
    #id1 {
          
          color:red;}
  </style>
  <p id="id1">段落</p>
  

• Class name selector: select by class attribute

  <style>
    .pa {
          
          color:blue;}
    .paa {
          
          color:red;}
  </style>
  <p class="pa">段落</p>
  <p class="pa pas">段落</p>
  

• Wildcard selection: select all tags including html, usually used to clear the default style

  <style>
    * {
          
          color:blue;}
  </style>
  <p>段落</p>
  

Advanced selector:

• Descendant selector: Note that the descendant relationship may not be a parent-child relationship

  <style>
    div ul li {
          
          color:blue;}
  </style>
  

• Intersection selector: Multiple selectors are directly connected without any symbols in between

  <style>
    p.par {
          
          color:blue;}
  </style>
  

• Union selector: multiple selection selectors, separated by commas

  <style>
    #id, .pa, p {
          
          color:blue;}
  </style>
  

2. Pseudo-classes for selectors

Pseudo-class for <a> tag

    <style>
        a:link {
      
      
            color: red;
        }
        a:visited {
      
      
            color: green;
        }
        a:hover {
      
      
            color: yellow;            
        }
        a:active {
      
      
            color: blue;         
        }
    </style>
    <a href="https://www.baidu.com">点击跳转到百度</a>

Ordinary selectors, such as span, have hover and active pseudo-classes

Writing order: The <a> tag has 2~3 trigger states, strictly link、visited、hover、activefollow

3. Inheritance and cascading of CSS

Inheritance: descendant tags inherit the text style of ancestors
Cascading: the style set by the selector is overwritten by other selectors, that is, cascading

selector weight

	id selector	class selector	label selector
Weights	100	010	001
number of selectors	a	b	c
total weight	100*a+10*b+c=abc

If none of the selectors selects the target tag, the priority of the selector closer to the target tag is higher, that is, the principle of proximity, the more specific the selector, the higher the weight; if the selectors have the same level, the weight is calculated according to the order of id>class>tag