- Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
- Address: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
table of Contents
The role of CSS selectors (emphasis)
CSS selector (emphasis)
The role of CSS selectors (emphasis)
The role of selectors
- Find specific HTML page elements
- What does the CSS selector do? Select the label, choose the label we want
- CSS is divided into two things, choose the right person and do the right thing.
h3 { color: red; }
- This code is two things. Pick h3 and turn it into red. We will do this in the future.
- Selectors are divided into basic selectors and composite selectors
CSS basic selector
Label selector
- concept:
- Tag selector (element selectors) refers to the use of HTML tags name referred to as a selector, classified by tag name, specify the unified CSS style for the page in some sort of label.
- grammar:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- Function: The label selector can select all labels of a certain type
- For example, all div tags and all span tags
- Advantages: it can quickly unify the style for the same type of label in the page
- Disadvantages: Can not design differentiated styles.
- Summarizing formula: tag selector, select the same page. Write the label directly without giving up.
Class selector
- The class selector is identified by "." (period) followed by the class name.
- grammar:
- Class name selector
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- label
<p class='类名'></p>
- Advantages : You can define separate or identical styles for element objects. You can select one or more tags
- note
- The class selector is identified by "." (dot notation), followed by the class name (customized, named by ourselves)
- Long names or phrases can use horizontal lines to name the selector.
- Don't name it purely with numbers or Chinese, try to use English letters to represent it.
- Memorization formula : Differentiated choices, one or more, defined in the above point, don't write the class name wrong, who calls it, class does it. Hey, the most work category.
- Case
<head> <meta charset="utf-8"> <style> .blue { color: blue; font-size: 100px; } .red { color: red; font-size: 100px; } .orange { color: orange; font-size: 100px; } .green { color: green; font-size: 100px; } </style> </head> <body> <span class="blue">G</span> <span class="red">o</span> <span class="orange">o</span> <span class="blue">g</span> <span class="green">l</span> <span class="red">e</span> </body>
Special usage of class selector-multiple class names
- We can assign multiple class names to tags to achieve more selection purposes .
- note:
- Separate each class name with a space .
- Multi-category name selectors are more used when the layout is more complicated in the later stage
div class="pink fontWeight font20">亚瑟</div> <div class="font20">刘备</div> <div class="font14 pink">安其拉</div> <div class="font14">貂蝉</div>
id selector
- The id selector is used
#for identification, followed by the id name- The basic syntax format is as follows :
- id selector
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- label
<p id="id名"></p>
- The id value of an element is unique and can only correspond to a specific element in the document .
- The usage is basically the same as the class selector.
- The difference between id selector and class selector
- The W3C standard stipulates that in the same page, id objects with the same name are not allowed to appear, but classes with the same name are allowed.
- The class selector (class) is like a person’s name , which can be reused many times, such as Zhang Wei, Wang Wei, Li Wei, Li Na
- The id selector is like a person’s ID number , which is unique in China and must not be repeated. Can only be used once.
- The biggest difference between id selector and class selector is the number of uses.
- We use class selectors the most in modifying styles.
- The id selector is generally used for the unique elements of the page, and is often used in conjunction with javascript .
Wildcard selector
- concept
- The wildcard selector is
*represented by a symbol. * is to select all tags. It has the widest range of all selectors and can match all elements on the page.- The basic syntax format is as follows:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- For example, the following code uses wildcard selectors to define CSS styles and clear the default margins of all HTML tags.
* { margin: 0; /* 定义外边距*/ padding: 0; /* 定义内边距*/ }
- note:
- It will match all the elements of the page and reduce the response speed of the page. It is not recommended to use it casually
Basic selector summary
Selector effect Disadvantage Usage usage Label selector You can select all the same tags, such as p Cannot differentiate choice More p { color：red;} Class selector You can select one or more tags You can choose according to your needs Much .nav { color: red; } id selector Only one label can be selected at a time Can only be used once Not recommended #nav {color: red;} Wildcard selector Select all tags Too many choices, some do not need Not recommended * {color: red;}
- I learned a total of 4 basic selectors, each of which has its own value, and may be used somewhere. But if we say that we must find the most commonly used one, then it must be the class selector.
- note:
- Selector
- Minimize the use of universal selectors
*- Try to use ID selectors sparingly
- Do not use tag selector div span with no specific semantic definition
/* 推荐 */ .jdc {} li {} p{} /* 不推荐 */ *{} #jdc {} div{} 因为div 没有语义，我们尽量少用
