In CSS, we need to define a style for an element. First, we have to select this element. I have read many articles on the Internet, and combined with the essence of the teacher's talk, I will sort out the more commonly used selectors and share with you, ha Haha study together and progress together!
table of Contents
Wildcard selector
（*）
Indicates that all elements are selected.
*{
margin: 0;
padding: 0;
}
/*设置所有的HTML标签的外边距和内边距为0*/
ID selector
(#ID)
Add an id attribute to the element and use a # in the style sheet to select the element.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
height: 50px;
width: 100px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="box1">
I am box1
</div>
</body>
</html>
Class selector
（.className）
Add a class attribute to a type of element that needs to be styled, and then select a type of element by means of a .aa
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{
color: #FFFFFF;
background-color: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="aa">I am one</div>
<div class="aa">I am two</div>
<div class="aa">I am three</div>
</body>
</html>
Label selector
Use the label name directly to select.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: coral;
width: 200px;
height: 60px;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not a p tag</span>
</body>
</html>
Operation result
hahaha...You can download your favorite pictures to play with
Descendant selector
(父元素 子元素)
Select the descendants of an element, which can be sons or grandchildren.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 a{
background-color: #FF7F50;
}
img{
width: 350px;
height: 300px;
}
</style>
</head>
<body>
<div id="box1">
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not an a tag</span>
<img src="img/pig.jpg"/>
</body>
</html>
operation result
Child selector
(>)
The symbol is>, only the son is selected , not grandchildren and their descendants. (Note the difference between this and the offspring)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1>a{
background-color: #FF7F50;
}
#box1>p{
background-color: #FF7F50;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not a p and a tag</span>
</body>
</html>
operation result
Combination selector
Separating the individual selectors with a comma is the union of the selection results of these selectors.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a,p,div,span{
color: red;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I have a style because I use the combination selector</span>
</body>
</html>
operation result
Pseudo-class selector (emphasis)
：
a:link{
/*未访问状态*/
}
a:visited{
/*已访问状态*/
}
a:hover{
/*鼠标悬停状态*/
}
a:active{
/*激活选定状态（鼠标点击未释放时）*/
}
Note: This order cannot be changed,
easy to remember: "LOVE HATE"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color: black;
}
a:visited{
color: yellow;
}
a:hover{
color: red;
}
a:active{
color: green;
}
</style>
</head>
<body>
<a href="https://www.qq.com/">我是腾讯，点点我</a>
</body>
</html>
Neighbor sibling selector
Adjacent selector
+
Affected is the (adjacent) one after the + sign
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h2+p{
color: red;
}
</style>
</head>
<body>
<div id="Jay">
<h2>兰亭序</h2>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
</div>
</body>
</html>
Brother selector
~
Brothers are affected, not one
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h2~p{
color: red;
}
</style>
</head>
<body>
<div id="Jay">
<h2>兰亭序</h2>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
</div>
</body>
</html>
Attribute selector
语法：标签名[属性名]{规则}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a[href] {
color:red;}
</style>
</head>
<body>
<div id="Jay">
<h2>兰亭序</h2>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<a href="https://baike.baidu.com/item/%E5%85%B0%E4%BA%AD%E5%BA%8F/2879867?fr=aladdin">兰亭序，点我</a>
</div>
</body>
</html>
This is all the commonly used selectors I have compiled. If it is helpful to you, please leave your precious little handprints hahaha, welcome to like + comment + follow! Study together and progress together. Life becomes beautiful because of learning!
