Zero-based CSS Introductory Tutorial (5) - id selector

1. Mission objectives

We have learned class selectors and element selectors in the previous few summaries. Let us learn about id selectors in this section.

2.id selector

The id selector is applied to select a specified element. In the above scenario, we want to select the third p tag in a targeted manner, so we can assign an id to the third p tag, and then use the id selector to select this tag.

So what is id? Just like everyone has a unique ID number, every student has a unique student number. id is the unique identifier of the web page tag, we can add id to the tag as needed.

code show as below

We want to change the color of the first p

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #test {
      
      
      color: bisque;
    }
  </style>
</head>

<body>
  <p id="test">无边落木萧萧下</p>
  <p>不尽长江滚滚来</p>
  <div>君不见黄河之水天上来</div><br>
  <span>奔流到海不复回</span>

</html>

The effect is as follows
insert image description here

4. Summary

We have learned about id selectors in this section, and we rarely use id selectors in CSS. Most of us use class selection, and our id selector is generally used with js.

Guess you like

Origin blog.csdn.net/weixin_61808806/article/details/128215046