This section focuses on

1. What is a selector

Each CSS style declaration consists of two parts, as follows:

Selector {style; }Copy the code

The section before {} in the CSS is called a “selector “, which specifies what the” style “in {} applies to, that is, which elements in the page the” style “applies to.

2. Base selector

Label selector

Tag selectors are, as the name suggests, tags in HTML code. HTML, body, H tags, P, div, img, etc. We can use the tag selector to set the corresponding CSS style properties.

It can select all elements of the page, not just one element content, so it selects properties that are common to the page

Here’s an example:

For all paragraphs on the page, set the font size to 12px, the font color to red, and the font thickness to thicker.

The code is as follows:

<! DOCTYPEhtml>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type='text/css'>
      p{
        color:red;
        font-size:12px;
        font-weight:bold;
      }
    </style>
  </head>
  <body>
    <h3>trill</h3>
    <p>Later that year, a wave of Douyin became popular on social media, with bloggers on Douyin making Peppa Pig popular. Their logo was "Peppa Pig watch on hand and Peppa Pig tattoo", which gave birth to "Peppa Pig Tattoo, give it up for society".</p>
    <img src="index01.jpeg" alt="">
    <p>It is estimated that Jj Lin himself did not think, "Drunken Red Cliff" one of the most insignificant lines has become a meme in the mouth of many netizens, the perfect combination of the best this meme.</p>
    <img src="index02.jpeg" alt="">

  </body>
</html>

Copy the code

The ID selector

ID is like everyone’s ID number, everyone has an ID card, and the ID number is not the same. All tags in a web page can be set with an ID, and the ID cannot be repeated.

Grammar:

#IDSelector name {CSS style code; }Copy the code

Note:

1. Start with #

2, where the ID selector name can be arbitrarily named (preferably not Chinese)

3. The name of the ID must be unique

The ID selector selects attributes specific to elements on the page.

For example, set the font color to green and font size to 14px for jj Lin’s text in the code in the last lesson. Also set the font size of drunk Red Cliff text to 14px. So you can’t just do it with a tag selector, we can do it this way.

The steps are as follows:

<span>Jj Lin</span>
<span>Red Cliff</span>
Copy the code

2. Set a different ID for each tag with id=’id selector name ‘. The following

<p>estimated<span id="span1">Jj Lin</span>I didn't even think about it,<span id="span2">Red Cliff</span>One of the most obscure lines has become a meme in many netizens' mouths. The best one is the perfect combination of MAO's emojis and this meme.</p>
Copy the code

Some children’s shoes may have questions? Can’t I just span Jj Lin’s Red Cliff and set the style you want? You’ll notice that if you set all the text to 14px and set it to green, Red Cliff will also turn green, which is not enough. So we can give each span a different ID to set different styles

3. Set the ID selector CSS style as follows:

#span1{
    color:green;
    font-size:14px;
}
#span2{
    font-size:14px;
}
Copy the code

Class selectors

A class selector is similar to an ID in that any tag element can add a class, except that classes can be repeated and “categorized”, and multiple classes can be carried within the same tag, separated by Spaces.

For example, dogs, cats, hedgehogs belong to the animal category, and black and white printers and color printers belong to the printer category. 

.class selector name {CSS style code; }Copy the code

Note:

1, English dot beginning

2, the class selector name can be arbitrarily named (preferably not Chinese)

Since classes can be added repeatedly, and multiple classes can be added to the same tag, we must have the concept of a common class in our use of class selectors.

Here’s an example:

Let’s say you have three of the same text

<p>Mr Ma</p>
<p>Mr Ma</p>
<p>Mr Ma</p>
Copy the code

Now I have a requirement that the first Text color be green and the font size be 20px, the second text color be green and the text size be thicker, and the third text color be black and the text size be thicker and the font size be 20px.

If we write it in our ID selector, let’s look at the code. The code is as follows:

<! DOCTYPEhtml>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #p1{
        color:green;
        font-size:20px;
      }
      #p2{
        color:green;
        font-weight:bold;
      }
      #p3{
        font-weight:bold;
        font-size:20px;
      }
    </style>
  </head>
  <body>
    <p id='p1'>Mr Ma</p>
    <p id='p2'>Mr Ma</p>
    <p id='p3'>Mr Ma</p>
  </body>
</html>

Copy the code

If we had the concept of a common class, we would see from the requirements that P1 and P2 have a common attribute font color of green, P1 and P3 have a common attribute font size of 20px, p2 and P3 have a common attribute font size of thicker. So we can set the corresponding class for each p tag as follows:

<p class="lv big">Mr Ma</p>
<p class="lv bold">Mr Ma</p>
<p class="big bold">Mr Ma</p>
Copy the code

Lv means green, big means 20px, and bold means bigger

CSS code

<style>
    .lv{
        color:green;
    }
    .big{
        font-size:20px
    }
    .bold{
        font-weight:bold;
    }
</style>
Copy the code

Well, you’ll find that using classes more efficiently can effectively reduce some of the redundant code.

3. Differences between classes and ID selectors

In the last two sections, we learned about class selectors and ID selectors. There are many similarities between them. Can they be used in general? So, let’s first summarize their similarities and differences:

Similarities: Can be applied to any element

Difference:

  • The ID selector can only be used once in a document. Unlike class selectors, ID selectors can only be used once, and only once, in an HTML document. Class selectors can be used multiple times.

Correct writing:

<p>Since then, a wave of Douyin has swept social media, with bloggers on Douyin gaining popularity<span class='pq'>Peppa Pig</span>. Their logo is"<span class='pq'>Peppa Pig watch and Peppa Pig tattoo</span>"And so was born peppa Pig tattoo. Give it up for society.</p>
Copy the code

Wrong writing:

<p>Since then, a wave of Douyin has swept social media, with bloggers on Douyin gaining popularity<span id='pq'>Peppa Pig</span>. Their logo is"<span id='pq'>Peppa Pig watch and Peppa Pig tattoo</span>"And so was born peppa Pig tattoo. Give it up for society.</p>
Copy the code
  • You can use the class selector to set multiple styles for an element at the same time. We can set multiple styles for an element at the same time, but values can be implemented using class selectors. ID selectors cannot add multiple ID names.

Correct code:

.pq{
  color:red;
}
.bigSize{
  font-size:20px
}

<p>Since then, a wave of Douyin has swept social media, with bloggers on Douyin gaining popularity<span class='pq bigSize'>Peppa Pig</span>. Their logo is"<span class='pq'>Peppa Pig watch and Peppa Pig tattoo</span>"And so was born peppa Pig tattoo. Give it up for society.</p>
Copy the code

Error code:

#pq{
  color:red;
}
#bigSize{
  font-size:20px
}

<p>Since then, a wave of Douyin has swept social media, with bloggers on Douyin gaining popularity<span id='pq bigSize'>Peppa Pig</span>. Their logo is"<span class='pq'>Peppa Pig watch and Peppa Pig tattoo</span>"And so was born peppa Pig tattoo. Give it up for society.</p>
Copy the code

4. Advanced selector

Descendant selector

As the name implies, the so-called offspring is all the offspring of the father (including sons, grandchildren, great grandchildren, etc.).

Grammar:

Div p{CSS code style; }Copy the code

The descendant selector is represented by a space, which indicates that div is the parent and p is the descendant of div.

When we talked about div tags earlier, we said that div is a container that can hold anything, so we can think of our HTML structure as something like this.

<div>
    <p>MJJ</p>
</div>

Copy the code

We can also name divs, such as

. The CSS code looks like this: 

.container p{
    color:red;
}
Copy the code

Child selector

Offspring simply means the father’s son, only the father’s son. Use > to represent child selectors.

Grammar:

div>p{CSS code style; }Copy the code

Ok, so let’s compare the role of descendant selectors and child selectors in web pages.

Here’s an example:

There is a three-level menu. Set the content text of the list of two-level menus to green.

  1. When we think of the secondary menu, we immediately think of using our list tag and start building our HTML structure

    <div class="menu">
    <ul class="food">
      <li>fruit<ul>
          <li>banana<ul>
              <li>Fairy Manila</li>
              <li>Manila, sai kung,</li>
              <li>Strip head plantains</li>
            </ul>
          </li>
          <li>apple<ul>
              <li>Red red delicious apple</li>
              <li>Yantai apple</li>
            </ul>
          </li>

        </ul>
      </li>
      <li>vegetables<ul>
          <li>Chinese cabbage<ul>
              <li>Beijing, stimulation</li>
              <li>Cabbage from Jiaozhou, Shandong province</li>
              <li>Northeast Chinese cabbage</li>
            </ul>
          </li>
          <li>cucumber<ul>
              <li>Spring flowers melon</li>
              <li>Frame of cucumber</li>
              <li>Beijing stab the melon</li>
            </ul>
          </li>

        </ul>
      </li>
    </ul>
  </div>
Copy the code

  2. Ul li{color:green; } then, we will find that all the lists are green, which does not meet the requirement, because the descendant of ul, Li, has selected the first level menu list, the second level menu list, and the third level menu list.

  3. If we were using a descendant selector, we could write the CSS code here as follows

    .food>li>ul>li{
    color:red;
}
Copy the code

    You’ll notice that the three-level menu also turns green, which is due to the inheritance of CSS properties, which we’ll talk about later.

Universal selector

The universal selector is the most powerful selector, indicated by an asterisk (*), which matches all tag elements in HTML. Using it, we can restyle web pages to develop them according to product requirements.

Set all text on the page to red.

* {color:red; }Copy the code

Combinatorial selector

When you want to set the same style for multiple tag elements in HTML, you might want to add the same class, but what if there are too many tags on a web page? Whether or not to add the same class name, it becomes our job to add. Not easy to develop efficiently. Then we can use the combinatorial selector to select the following syntax:

For example, set the font for h1, SPAN, and P tags to color:gray; font-size:14px;

h1.span.p{
    color:red;
    font-size:14px;
}
Copy the code

Compare:

Label selector

h1{
    color:red;
    font-size:14px;
}
span{
    color:red;
    font-size:14px;
}
p{
    color:red;
    font-size:14px;
}
Copy the code

Class selectors

<h1 class='active'>Mr Ma</h1>
<span class='active'>Mr Ma</span>
<p class='active'>Mr Ma</p>
Copy the code
.active{
    color:red;
    font-size:14px;
}
Copy the code

Pseudo class selector

More interesting are pseudo-class selectors, such as those that we use to set font colors for the mouse-over state of a tag element in HTML.

a:hover{
    color:red;
}
Copy the code

The code is as follows:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Use of pseudo-class selectors</title>
  <style type="text/css">
  a:hover{
    color:red;
  }
  </style>
</head>
<body>
  <a href="http://www.baidu.com">The baidu</a>
</body>
</html>

Copy the code

Effect display:

In addition, a tag is not only applied to hover, it follows the “LoVe HAte principle”, the so-called LoVe HAte is “LoVe HAte”.

The code is as follows:

/* The style of a tag has not been accessed */

a:link {
    color: green;
}

/* The style of a tag after accessing it */

a:visited {
    color: yellow;
}

/* The style of the a tag when the mouse is hovering */

a:hover {
    color: red;
}

/* The style of the a TAB when the mouse is pressed */

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

Note: Use a in the page in order Link->visited->hover>active.

For hover, it can not only be applied to A, but also to other tags, such as div, P, Li and so on