current position：Home>CSS basic selector

CSS basic selector

2022-05-15 03:12:20【Sorrow from all ages】

1 CSS The function of selector

Selector is to select different tags according to different needs , This is what selectors do , Simply speaking , Namely ： Choose the label .

h1 {
    
	color: red;
	font-size: 25px;
}

above CSS Did two things ：

  • Find all h1 label .（ Choose the right person ）
  • Style these labels ： The color is red 、 Font size: 25 Pixels .（ Do the right thing ）

2 Classification of selectors

The selector is divided into Foundation selector and compound selector Two categories: , This article first introduces the basic selector .

  • The base selector is composed of Single Composed of selectors
  • The basic selector also includes ： tag chooser 、 Class selectors 、id Selectors 、 Wildcard selector

3 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;
	...
}

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 .

<!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 type="text/css"> /*  The style will be applied to all the label elements , advantage ： Quickly unify , shortcoming ： Cannot differentiate settings  */ p {
       color: green; } div {
       color: pink; } </style>
</head>

<body>
    <p> male </p>
    <p> male </p>
    <p> male </p>
    <div> girl student </div>
    <div> girl student </div>
    <div> girl student </div>
</body>

</html>

4 Class selectors

If you want to differentiate, choose different labels , Select one or more labels alone , have access to Class selectors .

CSS grammar ：

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

for example ： Will all have red Class HTML All elements are set to red .

.red {
    
	color: red;
}

HTML grammar ：

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

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

Be careful ：

  • Class selector uses .（ English point number ） Are identified , Followed by the class name （ Customize , We named it ourselves ）
  • It can be understood that this tag is given an alias to represent
  • Long names or phrases can be used The middle horizontal line - To name the class
  • You cannot use an existing keyword as a class name
  • Do not use pure numbers 、 Chinese names , Try to use English letters to express
  • Naming should be meaningful , Try to make others know the purpose of this class name at a glance （ Readability first , Second in length , English is recommended , If you use pinyin, please use full spelling ）
  • Naming specification ： See the attachment （Web Front end development specification manual .pdf）

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

<!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 type="text/css"> /*  Class selector pithy ： style  .  Definition , structure  class  call , One or more , Development is most commonly used  */ .red {
       width: 100px; height: 100px; background-color: red; } .green {
       width: 100px; height: 100px; background-color: green; } </style>
</head>

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>

</html>

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 .

  • On the label class Property to write multiple class names
  • The middle of multiple class names must be Space Separate
  • This tag can have the styles of these class names respectively 
<!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 type="text/css"> /*  A tag can use multiple class selectors , Space between  */ .red {
       color: red; } .font35 {
       font-size: 35px; } </style>
</head>

<body>
    <div class="red font35">zhoujirui</div>
</body>

</html>

Use scenarios in multi class name development

  • You can put some label elements in the same style （ The common part ） Put it in a class
  • These tags can call this public class , Then call your own unique class
  • So as to save CSS Code , Unified modification is also very convenient （ modularization 、 Reusability ）
<!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 type="text/css"> /*  The biggest advantage of class selectors is ： Reuse  */ .box {
       width: 100px; height: 100px; } .red {
       background-color: red; } .green {
       background-color: green; } </style>
</head>

<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>

</html>

Multi class name selector in the later layout is more complex , Is used more .

5 id Selectors

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

HTML Element to id Property to set 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;
}

Be careful ： id Attribute can only be in each HTML Once in the document .

formula ： style # Definition , structure id call , It can only be called once , Don't use it .

id The difference between a selector and a class selector ：

  • 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
  • id Selectors are like human ID number , All China is the only , Do not repeat （ The same id Selectors can only be called once ）
  • id The biggest difference between selectors and class selectors is the number of times they are used
  • 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 
<!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 type="text/css"> /* id  Selector formula ： style  #  Definition , structure  id  call , It can only be called once , Don't use it  */ #pink {
       color: pink; } </style>
</head>

<body>
    <div id="pink">test</div>
</body>

</html>

Again ： same id It can only be defined once , same id Selectors can only be called once ！（ about CSS Change the style , It's best to use class selectors ,id The selector is mainly related to the following JS Use it with ）.

6 Wildcard selector

stay CSS in , The wildcard selector uses * Definition , It represents... In the selected page All the elements （ 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 
//  Use the wildcard selector to clear the inner and outer margins of all element labels , Later talk  * {
    
	margin: 0;
	padding: 0;
}

<!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 type="text/css"> /* *  to  html  All elements of the tag use styles , And this process is done automatically , There is no need to manually call  */ * {
       color: red; } </style>
</head>

<body>
    <div> my </div>
    <span> my </span>
    <ul>
        <li> Or mine? </li>
    </ul>
</body>

</html>

7 Basic selector summary

Foundation selector effect characteristic usage usage
tag chooser You can pick all the same tags , such as ：p You can't differentiate between choices More p {color: red;}
Class selectors You can choose 1 A or Multiple label You can choose... According to your needs A lot .nav {color: red;}
id Selectors Only... Can be selected at a time 1 A label ID Attribute can only be in each HTML Once in the document , Can only be called once In general, and js collocation #nav {color: red;}
Wildcard selector Select all the tags Too many choices , There are parts that don't need to be Use under special circumstances * {color: red;}
  • Each basic selector has a usage scenario , All need to master
  • If it is to modify the style , Class selectors are the most used

copyright notice
author[Sorrow from all ages],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/135/202205142124187150.html

The sidebar is recommended

guess what you like

Random recommended