CSS Cascading Style Sheets - Selectors

1、CSS

(1) Features

The same attribute will be overwritten, and different attributes will be superimposed

(2) Introduction method

External style: use the link tag in the head tag to import the css file

Embedded style: use the style tag in the head tag to write

Inline style: add a style attribute to the corresponding tag

1) External styles

W3C School document: https://www.w3school.com.cn/tags/tag_link.asp

common attributes	describe
type attribute	Define Linked Document Types
rel attribute	Define the relationship between the current document and the linked document
href attribute	Define linked document location

① css code

Create a separate file ending with .css and write the following content (customized file name)

/* 给div标签添加黑色实线线条和粉色背景颜色 */
div {
    
    
	border:1px solid black;
	background-color:pink;
}

/* 给p标签内容变为蓝色 */
p {
    
    
	color:blue;
}

/* 给strong标签内容变为绿色 */
strong {
    
    
	color:green;
}

② html code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<link href="./css/link.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div>
		<p>这是一个p标签</p>
		<strong>这是一个strong标签</strong>
	</div>
</body>

</html>

③ Operation effect

2) Inline styles

① Code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<!-- css代码 -->
	<style>
		/* 给div标签添加黑色实线线条和粉色背景颜色 */
		div {
      
      
			border:1px solid black;
			background-color:pink;
		}

		/* 给p标签内容变为蓝色 */
		p {
      
      
			color:blue;
		}

		/* 给strong标签内容变为绿色 */
		strong {
      
      
			color:green;
		}
	</style>
</head>

<body>
	<div>
		<p>这是一个p标签</p>
		<strong>这是一个strong标签</strong>
	</div>
</body>

</html>

② Operation effect

3) Inline styles

① Code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
</head>

<body>
	<div style="border:1px solid black;background-color:pink;">
		<p style="color:blue;">这是一个p标签</p>
		<strong style="color:green;">这是一个strong标签</strong>
	</div>
</body>

</html>

② Operation effect

2. Simple selector

Notice

In order to facilitate the display of the code, the embedded style is uniformly used for writing, and the external style is advocated in the actual development work

(1) Element selector (label selector)

① Grammar format

	标签名 {
		属性1:属性值;
		属性2:属性值;
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div {
      
      
			border:1px solid black;
			background-color:pink;
		}
		p {
      
      
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是一个p标签</p>
	</div>
</body>

</html>

③ Operation effect

(2) class selector (class selector)

According to the type, it can be reused. For example, the text color of p tags and strong tags is uniformly set to blue, just create a class selector

① Syntax format:

	.类名 {
		属性1:属性值;
		属性2:属性值;
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		.box {
      
      
			border:1px solid black;
			background-color:pink;
		}
		.content {
      
      
			color:blue;
		}
	</style>
</head>

<body>
	<div class="box">
		<p class="content">这是一个p标签</p>
		<strong class="content">这是一个strong标签</strong>
	</div>
</body>

</html>

③ Operation effect

(3) ID selector

id selector, the value is unique and cannot be reused

① Grammar format

	#id名 {
		属性1:属性值;
		属性2:属性值;
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		#box {
      
      
			border:1px solid black;
			background-color:pink;
		}
		#content {
      
      
			color:blue;
		}
	</style>
</head>

<body>
	<div id="box">
		<p id="content">这是一个p标签</p>
	</div>
</body>

</html>

③ Operation effect

(4) Wildcard selector

Check all tags, all tags will be affected, but the weight is the lowest

① Syntax format:

	* {
		属性1:属性值;
		属性2:属性值;	
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		*{
      
      
			color:blue;
			font-size:25px;
		}
	</style>
</head>

<body>
	<div>
		<p>这是一个p标签</p>
		<strong>这是一个strong标签</strong>
	</div>
</body>

</html>

③ Operation effect

(5) Selector weight

name	Weights
!important	infinity
inline style	1000
ID selector	100
class selector	10
element selector	1
wildcard selector	0

(1) Selector naming rules (applicable to selectors with custom names)

Cannot start with numbers and special characters;

It must start with English (or pinyin);

see the name and know the meaning;

Use CamelCase (Little CamelCase/Large CamelCase)

(2) Selector priority and weight

Selector priority: !important > inline style > ID selector > class selector > element selector > wildcard selector

When the weights are the same, first look at the sequence

When the weights are different, look at the weight

Weights can be stacked

3. Combined selector

(1) descendant selector

Selects all specified child tags within a parent tag

① Grammar format

	父级 子级 {
		属性1:属性值;
		属性2:属性值;
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div strong{
      
      
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<strong>这是第一个strong标签</strong>
		<p>这是第一个<strong>p</strong>标签</p>
		<span>这是一个<strong>span标签</strong></span>
		<p>这是第二个p标签</p>
		<strong>这是第二个strong标签</strong>
	</div>
</body>

</html>

③ Operation effect

(2) Child selector

Only select the next generation of the selector, and do not select across generations

① Syntax format:

	父级>子级 {
		属性1:属性值;
		属性2:属性值;
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div>strong{
      
      
			color:blue;
		}
		div>strong{
      
      
			color:green;
		}
	</style>
</head>

<body>
	<div>
		<strong>这是第一个strong标签</strong>
		<p>这是第一个<strong>p</strong>标签</p>
		<span>这是一个<strong>span标签</strong></span>
		<p>这是第二个p标签</p>
		<strong>这是第二个strong标签</strong>
	</div>
</body>

</html>

③ Operation effect

(3) Sibling selector

Selected at the same level, only the elements that appear later are selected, and the previous elements are not selected

① Syntax format:

	元素~元素 {
		属性1:属性值;
		属性2:属性值;
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		strong~p{
      
      
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是第一个p标签</p>
		<p>这是第二个p标签</p>
		<strong>这是第一个strong标签</strong>
		<p>这是第三个p标签</p>
		<span>这是一个span标签</span>
		<p>这是第第四个p标签</p>
		<span>这是一个span标签</span>
		<p>这是第五个p标签</p>
	</div>
</body>

</html>

③ Operation effect

(4) Adjacent selector

Select the next element at the same level

① Syntax format:

	元素+元素 {
		属性1:属性值;
		属性2:属性值;
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		p+strong{
      
      
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是第一个p标签</p>
		<p>这是第二个p标签</p>
		<strong>这是第一个strong标签</strong>
		<strong>这是第二个strong标签</strong>
		<strong>这是第三个strong标签</strong>
	</div>
</body>

</html>

③ Operation effect

(5) Intersection selector

For example: in the selected div, there are both p and .one elements

① Syntax format:

	div span.one {
		属性1:属性值;
		属性2:属性值;
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div p.one{
      
      
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是第一个p标签</p>
		<p class="one">这是第二个p标签</p>
		<p>这是第三个p标签</p>
		<p class="one">这是第四个p标签</p>
		<p>这是第五个p标签</p>
	</div>
</body>

</html>

③ Operation effect

(6) Pseudo class selector

When the mouse moves in, the selected current element is set to a certain state

① Syntax format:

	选择器:hover {
		属性1:属性值;
		属性2:属性值;
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div {
      
      
			width:300px;
			height:300px;
			background-color:aqua;
		}
		div:hover{
      
      
			background-color:pink;
		}
	</style>
</head>

<body>
	<div></div>
</body>

</html>

③ Operation effect

color when open

Color on mouseover

(7) Pseudo element selector

Pseudo-element features:

Can be selected and modified by CSS, but has no html structure

It is born as an 'inline element', selected and modified by CSS

Features are consistent with 'inline element'

（1）before

Add content before the selected element

① Syntax format:

	选择器:before {
		content:"内容"
		属性1:属性值;
		属性2:属性值;
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		p:before{
      
      
			content:"这是before添加的内容";
			color:blue;
		}
	</style>
</head>

<body>
	<p>这是一个p标签</p>
</body>

</html>

③ Operation effect

（2）after

Add content after the selected element

① Syntax format:

	选择器:after {
		content:"内容"
		属性1:属性值;
		属性2:属性值;
	}

② Example:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		p:after{
      
      
			content:"这是after添加的内容";
			color:blue;
		}
	</style>
</head>

<body>
	<p>这是一个p标签</p>
</body>

</html>

③ Operation effect

For more selector learning, please refer to the official documentation

https://www.apiref.com/css-zh/index.htm