Four categories of CSS selectors: basic, combination, attribute, pseudo-class

What is a selector? The role of the selector is to find elements through it and pass the CSS style to the elements! CSS selectors are mainly divided into four categories: basic selectors, attribute selectors, combined selectors and pseudo-class selectors!

CSS basic selectors

The basic selectors are divided into: * wildcard, tag selector, class selector, id selector. The programming idea that needs to be paid attention to here is that an element in the CSS cascading style sheet has only one id. Pay attention to the following points: 1. ID uniqueness 2. Element IDs are different, just like everyone has only one ID card, ID represents ID card 3. The class selector is not unique, it can be reused! In addition, the * wildcard represents the global

  <!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CSS Basic Selector</title>
     <style type="text/css">
          *{
              color: skyblue;
         }/**Wildcard*/
         div{
             color: red;
         }/*Tag selector*/
         .box{
             color: steelblue;
         }/*class selector*/.box{color: steelblue;} can also be written as *.box{color: steelblue;}, which means that the font color of all boxes is steelblue
         #content{
             color: tomato;
         }/*id selector*/
     </style>
 </head>
 <body>
     <div class="box" id="content">
         Dahuiniu Blog focuses on web front-end technology learning</div>
 </body>
 </html>

CSS combination selector

Some people string together basic selectors through special symbols and call them CSS combination selectors. Common CSS combination selectors include: group selectors, nested selectors, sub-selectors, adjacent same-level selectors

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>css combination selector</title>
      <style type="text/css">
      /* div{
          color: teal;
         font-size: 24px;
     }
     p{
         color: teal;
     } */
     div{
         font-size: 24px;
     }
     div,p{
         color: teal;
     }/*Group selector*/
     div p{
         color: red;
     }/*Nested selectors*/
     ul>li{
         font-size: 24px;
         list-style: square;
     }/*Child selector*/
     div+p{
         color: blue;
     }/*Adjacent selectors of the same level*/
     </style>
 </head>
 <body>
     <div>
         People only admire the bright and beautiful flowers of success! However, their buds were soaked in the tears of struggle and sprinkled with the blood of sacrifice.<p>I thought I knew a lot and experienced a lot, but in the end I realized that it was all so ridiculous</p>
     </div>
     <p>We should not only look at the moment of success, but also see the process of success, so as to motivate ourselves to continue to make efforts and move forward towards the goal of success.</p>
     <p>People only admire the bright and beautiful flowers of success! However, their buds were soaked in the tears of struggle and sprinkled with the blood of sacrifice.<span>We should not only look at the moment of glory of the successful people, but also see the process of their efforts and struggles, so as to motivate ourselves to keep working hard and move towards the goal of success.</span></p>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
 </body>
 </html>

CSS attribute selector

Basic selector [attribute], basic selector [attribute=value], basic selector [attribute~=value] separated by spaces, what does basic selector [attribute^=value] start with, what does basic selector [attribute$=value] end with

<!DOCTYPE html>
 <html lang="en">
 <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>css attribute selector</title>
      <style type="text/css">
     div[title]/*Basic selector [attribute]*/
     div[title=english]{
         color: blue;
     }/*Basic selector [attribute=value]*/
     div[title~=en]{
         color:#f90;
         font-weight: bold;
     }/*Basic selector [attribute~=value] contains any one of the attributes*/
     p,div[title^=zh]{
         font-size:24px;
         color: brown;
     }/*What does the basic selector [attribute^=value] start with*/
     div[title$=china]{
         letter-spacing: 10px;
         text-decoration: line-through;
         font-style: italic;
     }/*What does the basic selector [attribute $=value] end with*/
     </style>
 </head>
 <body>
     <div title="english">
         If you can NOT explain it simply, you do NOT understand it well enough
     </div>
     <div title="english en yingyu">
         Didn’t you notice? 2013 I love you for my whole life, 2014 I love you for my whole life, 2015 I love you for my whole house, 2016 I love you all the way, 2017 I love you for everything, 2018 I love you half, 2019 I still love you, 2020 I love you, 2021 I just love you🌝
     </div>
     <p title="zh en">
         Four categories of CSS selectors: basic, combination, attribute, pseudo-class</p>
     <div title="zh en china">
         http://www.cnblogs.com/dhnblog/p/12293463.html
     </div>
 </body>
 </html>

CSS pseudo-class selector

Literally speaking, pseudo means fake, and elements are tags and the contents wrapped by tags. Simply put, pseudo-elements are fake elements, and the antonym of fake is real. In the page, these are written by ourselves, so they are real. In this HTML page, all elements will be secretly added with start and end tags. This is a pseudo-element. The pseudo-class selector refers to an operation state!

 <!DOCTYPE html>
 <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>css pseudo-class selector</title>
     <style type="text/css">
          p{
              color: brown;
             border: 1px solid black;
             height: 40px;
             line-height: 40px;
         }
         p::before{
             content: "before start";
         }
         p::after{
             content: "after end";
         }
         /* For the first letter of a block element::first-letter
         First line of text::first-line */
         div::first-letter{
         font-size: 24px;
         color: blue;
         }
         div::first-line{
             color:yellowgreen;
             font-style: initial;
             font-weight: bold;
         }
     </style>
 </head>
 <body>
     <div class="box">http://www.dhnblog.com/ Dahuiniu Blog Technology is the king of the world, hard work makes dreams come true, and the height depends on attitude<!--before Start-->
     <p>Valentine's Day greetings for your girlfriend, very sweet and seductive, instantly win her heart!</p>
     <!--after end-->
     </div>
 </body>
 </html>

Summarize

The above are the four major categories of CSS selectors introduced by the editor: basic, combination, attribute, and pseudo-class. I hope it will be helpful to everyone. Thank you very much for your support of the 123WORDPRESS.COM website!

<<: Summary of practical experience of HTML knowledge points

>>: A good way to improve your design skills