当前位置：网站首页>27 classification of selectors

27 classification of selectors

2022-07-25 14:42:00 【hello_ sunny123】

One ： Selector classification

Selectors are divided into two categories: basic selectors and compound selectors , Let's talk about the basic selector first .

The base selector consists of a single selector

The basic selector also includes : tag chooser 、 Class selectors 、id Selectors and wildcard selectors

Two .(1) tag chooser

tag chooser ( Element selector ) Refers to using HTML Tag name as selector , Sort by label name , Specify a uniform... For a certain type of label in the page CSS style .

grammar ：

 Tag name {
     attribute 1： Property value 1;
     attribute 2： Property value 2;
     attribute 3： Property value 3;
    ...
}

Code example ：

<!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> Label selector of base selector </title>
    <style> /*  tag chooser  ： Write a superscript  */ p {
      color: green; } div {
      color: pink; } </style>
</head>
<body>
    <p> schoolboy </p>
    <p> schoolboy </p>
    <p> schoolboy </p>
    <div> girl student </div>
    <div> girl student </div>
    <div> girl student </div>
</body>
</html>

Running results ：

Insert picture description here

effect

The tag selector can select all the tags of a certain type , Like all <div> Labels and all <span> label .

advantage

It can quickly set the style for the same type of labels in the page .

shortcoming

Can't design differentiated styles , Only all current tags can be selected .

Two .(2) Class selectors

If you want to differentiate, choose different labels , Select one or more labels alone , You can use the class selector .

Class selector in HTML China and Israel class Attribute representation , stay CSS in , Class selector with a point "." The number shows .

grammar 

. Class name  {
     attribute 1：  Property value 1;
    ...
}

for example , Will all have red Class HTML All elements are red .

.red {
    color: red;
}

Code ：

<!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> Basic selectors and so on </title>
    <style> .red {
      color: red; } </style>
</head>
<body>
    <ul>
        <li class="red"> Ice rain </li>
        <li class="red"> Infatuation is absolutely </li>
        <li> Sweet honey </li>
        <li> Overdo </li>
        <li> Love shifts </li>
        <li> The breakpoint </li>
    </ul>
</body>
</html>

Running results

Insert picture description here

Syntax of class selector ：

The structure needs to be class Property to call class Class means 

<div class="red"> Turn red </div>

Be careful

(1) Class selector uses "." ( English point number ) Are identified , Followed by the class name ( Customize , We named it ourselves ).

(2) It can be understood as giving the label a name , To express .

(3) Long names or phrases can be named for selectors using middle horizontal lines .

(4) Do not use pure numbers 、 Chinese names , Try to use English letters to express .

(5) Naming should be meaningful , Try to make others know the purpose of this class name at a glance .

(6) Naming specification : See the attachment ( Web Front end development specification manual .doc )

Memory formula : Style point definition , Structure class calls . One or more , Development is most commonly used .

Case study

Practice two places through this case :

1. Use of selectors

2. div It's just a box , Used to load web content .

Insert picture description here

Code ：

<!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> The box </title>
    <style> .red {
      width: 100px; height: 100px; /*  The background color  */ background-color: red; } .green {
      width: 100px; height: 100px; background-color: green; } </style>
</head>
<body>
    <div class="red"> Red </div>
    <div class="green"> green </div>
    <div class="red"> Red </div>
</body>
</html>

Running results

Insert picture description here

Class selectors - Many kinds of names

We can assign multiple class names to a tag , So as to achieve more choices . These class names can choose this label .

A simple understanding is that a label has multiple names .

1. How to use multiple class names

<div class="red font20"> The rope </div>

(1) On the label class Property to write multiple class names

(2) Multiple class names must be separated by spaces

(3) This tag can have the styles of these class names respectively

Code example 

<!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> Use of class selector and multiple class names </title>
    <style> .red {
      color: red; } .font35 {
      font-size: 35px; } </style>
</head>
<body>
    <div class="red font35"> Lau Andy </div>
</body>
</html>

Running results

Insert picture description here

2. Use scenarios in multi class name development

(1) You can put some label elements in the same style ( The common part ) Put it in a class .

(2) These tags can call this public class , Then call your own unique class .

(3) So as to save CSS Unified code modification is also very convenient .

Multi class name selector in the later layout is more complex , It's more used

Code example 

<!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> Multi class name usage scenario </title>
    <style> .box {
      width: 100px; height: 100px; font-size: 35px; } .red {
      /*  The background color  */ background-color: red; } .green {
      background-color: green; } </style>
</head>
<body>
    <div class="box red"> Red </div>
    <div class="box green"> green </div>
    <div class="box red"> Red </div>
</body>
</html>

Running results

Insert picture description here

Two .(3) id Selectors

id Selectors can be marked with specific id Of HTML Element specifies the specific style .

HTML Element to id attribute To set up id Selectors , CSS in id Selector to “#" To define .

grammar 

#id name  {
     attribute 1：  Property value 1;
    ...
}

for example , take id by nav The content in the element is set to red .

#nav {
    color: red;
}

Code 

<!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> Basic selector id Selectors </title>
    <style> /* id Oral decision of selector ： style # Definition , structure id call , It can only be called once , Don't use it  */ #pink {
      color: pink; } </style>
</head>
<body>
    <div id="pink"> mike · Jackson </div>
    <div >pink teacher </div>
</body>
</html>

Running results

Insert picture description here

Be careful : id Attribute can only be in each HTML Once in the document . formula : style # Defining structure id call , It can only be called once , Don't use it .

id The difference between a selector and a class selector

(1) Class selectors ( class ) It's like a person's name , A person can have more than one name , At the same time, a name can also be used by multiple people .

(2) id Selectors are like human ID number , All China is the only , Don't repeat .

(3) id The biggest difference between selectors and class selectors is the number of times they are used .

(4) Class selectors are most used in modifying styles ,id Selectors are generally used on elements that are unique to the page , Often with JavaScript Use it with .

Insert picture description here

Two .(4) Wildcard selector

stay CSS in , The wildcard selector uses “*” Definition , It means to select all the elements in the page ( label ).

grammar 

* {
     attribute 1：  Property value 1;
    ...
}

Wildcard selectors do not need to call , Automatically use styles for all elements

Use only under special circumstances , The usage scenarios will be explained later

Code 

<!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> Wildcard selector of base selector </title>
    <style> /* * ad locum html body div span li  And so on are changed to red  */ * {
      color: red; } </style>
</head>
<body>
    <div> my </div>
    <span> my </span>
    <ul>
        <li> Or mine? </li>
    </ul>
</body>
</html>

Running results

Insert picture description here

3、 ... and . summary

Insert picture description here

Each basic selector has a usage scenario , All need to master

If it is to modify the style , Class selectors are the most used

原网站

版权声明
本文为[hello_ sunny123]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/206/202207251440409919.html

边栏推荐

猜你喜欢

随机推荐