Table of contents
Foreword:
CSS selector is an important part of CSS page processing. As mentioned above, there are three writing styles of CSS. The external style is the most used selector. Setting the selector through external style can better process the page and improve the complexity of the code. usability. Before that, we need to create a CSS file (the way of writing external styles), let's take a look together. (Previous link: html&CSS-----CSS Introduction and Style Writing_Grey Letard's Blog-CSDN Blog )
1. Primary selector
Primary selectors include ID selectors, class selectors (class), label selectors and wildcard selectors. Below I will introduce their related usages one by one.
(1) ID selector
The ID selector is used to find the tag with the specified ID attribute in the HTML document. The definition of the ID selector needs to use the pound sign
#, followed by the value of the ID attribute. The use of ID selectors is very similar to that of class selectors, but the main function of ID selectors is to combine js to determine unique elements on the page. A single tag is not allowed to have multiple id names, and there are no duplicate id names in the same page (duplicate id names will affect the js code to obtain tags). It is not mainly used to set css. It can be seen that the ID selector is unique and can only act on one label, and its weight is also the largest.
Example:
html file 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>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="nice">这是一个ID选择器
<p>hello</p>
<p id="nic">555</p>
</div>
</body>
</html>CSS file code:
#nice{
color:red;
font-size: 50px;
}
#nic{
color: bisque;
}Effect:
It can be seen here that the ID selector has priority. Also inside the div, the display effect is different due to a defined ID selector and one without an ID selector.
(2) class selector
The class selector can find specific HTML tags according to the class attribute of the tag. The definition of a class selector needs to use an English period
., followed by the value of the class attribute, written in CSS as follows:
.black {
color: black;
}A label can have multiple class names at the same time, and the class names are separated by spaces. Usage scenario: put some styles with the same label in a class, so as to save writing of css code. Class selectors have less weight than ID selectors, but no uniqueness.
Example:
html 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>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="classsecond" id="nice">你好世界</div>
<div class="classfirst classsceond">这是一个类选择器</div>
<p class="classsecond">hello</p>
</body>
</html>css code:
#nice{
color:red;
font-size: 50px;
}
.classfirst{
font-size: 50px;
color: brown;
}
.classsecond{
color:blue
}Effect:
It can be seen here that if the ID selector and the class selector appear at the same time, the ID selector will be applied first. If the two class selectors are juxtaposed, the first class selector will be applied first.
(3) Label selector
A complete HTML document consists of various tags, and a tag selector can match all tags with the same name in the document through a specific tag name, written as follows:
/* 找到页面当中所有的p标签 */
p {
color: blue;
}The label selector has a wide range of options and is usually used for style initialization. Its weight is less than that of the ID selector and less than that of the class selector.
Example:
html 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>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<a href="https://www.yhdmz2.com/" class="classsecond">点开我开始看动漫</a>
</body>
</html>CSS code:
a{
/* 删除下划线 */
color: brown;
text-decoration: none;
}
.classsecond{
color:blue
}Effect:
It can be seen that the font color is also set, and here the resource color in the class selector is used first.
(4) Wildcard selector
A wildcard selector, denoted by an asterisk
*, does not match a specific HTML element, but matches every element in the HTML document. We usually use universal selectors to clear the default inner and outer margins in HTML elements.In fact, when we do projects in the future, this type of selector will basically not be used, because this type of selector unifies the styles in the entire code, so its weight is also higher than that mentioned above The weights of the three selectors are small. It is written as follows:
/*通配符选择器在开发中不会使用，一般我们页面的标签的样式不会长的都完全一样。在平常的练习去除标签默认的margin和padding*/
* {
margin: 0;
padding: 0;
}Example:
html 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>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<a href="https://www.yhdmz2.com/" class="classsecond">点开我开始看动漫</a>
<p class="class">一起看动漫吧!</p>
<ul>
<li>东京美食家</li>
<li>寄生兽</li>
<li>进击的巨人</li>
<li>斩赤红之瞳</li>
</ul>
</body>
</html>CSS code:
a{
/* 删除下划线 */
color: brown;
text-decoration: none;
}
.class{
font-family: 华文行楷;
color:blue
}
*{
margin: 0;
padding: 0;
font-size: 40px;
}Effect:
The above is all the content of today. In the next issue, we will continue to talk about CSS advanced selectors. See you in the next issue!
Share a wallpaper:
