前端CSS—选择器知识点复习整理

前端CSS—选择器知识点整理

一前言

博主大二计算机专业在读，此博客作为前端学习md记录，算是对自己的一个push作用吧。每天学一点点技术，再把学到的知识按照一定的逻辑顺序整理出来，整理知识点的同时也是在加深对知识点的理解，对自己也是一个学习的过程。学习技术是一个枯燥而且需要消耗时间精力的漫长过程，但是坚持下去特别有成就感。我觉得前端对我来说成就感是“可视化的”。从我个人的角度出发，我认为世界上的幸存者偏差是小概率事件，每个人都在自己的专业领域训练一万个小时。希望自己能坚持学习吧。

二一些需要理解的逻辑导图

2.1 文档结构树逻辑关系

介绍CSS选择器之前，我们先通过一个图来理解一下什么是文档结构树，什么是树中的层级关系，什么是子元素，父元素，后代元素，以及祖辈元素这些概念，这有助于更好的理解层次选择器的逻辑层级关系，方便清晰的定位到需要添加样式的元素。

在这里插入图片描述

2 css选择器分类导图

自己用processon画了一个大概分类的逻辑导图，方便自己去归类，更好的记住知识点。网上的逻辑导图很多，但是自己画和别人给现成的体验是不一样的，目过千遍不如手过一遍是吧。

在这里插入图片描述

三选择器知识点整理

Q:选择器可以干什么？起到什么作用？

A:选择页面上的某一个或者某一类元素。准确定位元素，方便为元素添加css样式。

3.1 基本选择器

标签选择器

/*标签选择器：选择一类标签*/
h1{
    
    
    color:red;
}

类选择器

/*类选择器：class。选择class属性一致的标签，可跨标签。*/
.Gabrielle{
    
    
    color:red;
}
/*选择class类名为Gabrielle的元素，即h1和p*/

p.Gabrielle{
    
    
    color:red;
}
/*选择class类名为Gabrielle的带有p标签的元素。即p*/
<h1 class="Gabrielle">
Hello,Gabrielle.
</h1>

<p class="Gabrielle">
Hello,Gaby.
</p>

id选择器

/*id选择器：全局唯一。慎用*/
/*
id属性的值必须是唯一的。
id 属性一般是给 JS 使用的，id 选择器的名称，必须以 “#” 开头。
不能和标签同名；比如 id 不能叫做 body、img、a 等
*/
#Gabrielle{
    
    
    color:red;
}
<h1 id="Gabreille">
Hello,Gabrielle.
</h1>

Q:class选择器和id选择器的区别

A:id是唯一的，可以理解为每一个人身份证的号码，每一个人都不重复且唯一，不能重用。class是不唯一的，可以理解为每一个人的姓名，生活中有重名的现象，可以重用。

attention：基本选择器不遵循就近原则，优先级id>class>标签选择器。

3.2 层次选择器（层级关系参照上面的文档结构树逻辑关系。）

后代选择器

/*后代选择器：在某一个元素的后面。*/
/*
语法:祖先元素 后代元素{}
*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后代选择器</title>
		<style type="text/css">
			div span{
     
     
				color: red;/*选择div标签中的span*/
			}
		</style>
	</head>
	<body>
		<div id="">
			<span>我是div标签中的span</span>
			<p><span>我是p标签中的span</span></p>
		</div>
		<span>我是body中的span元素</span>
	</body>
</html>

子选择器

/*子选择器：只有一代*/
/*
语法:父代元素 > 后代元素{}
*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子代选择器</title>
		<style type="text/css">
			body > div{
     
     
				color: red;/*选择body标签中的div*/
			}
		</style>
	</head>
	<body>
		<div id = "">
			<span>我是div标签中的span</span>
			<p><span>我是p标签中的span</span></p>
		</div>
		<span>我是body中的span元素</span>
	</body>
</html>

相邻兄弟选择器

/*相邻兄弟选择器：同辈，只有一个*/
/*
语法:相邻兄弟元素1 + 相邻兄弟元素2{}
*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相邻兄弟选择器</title>
		<style type="text/css">
            h1 + p{
     
     
                color:red;
            }/*选择h1元素的相邻兄弟元素p*/
		</style>
	</head>
	<body>
		<div>
            <h1>
                我是div标签中的h1元素。我和p是相邻兄弟，唯一的兄弟。
            </h1>
            <p>
                我是div标签中的p元素。我和h1是相邻兄弟，唯一的兄弟。
            </p>
        </div>
	</body>
</html>

通用选择器

/*通用选择器：当前选中元素的向下所有元素*/
.class ~ p{
	background ：red ;
}

后续同胞选择器

/*后续同胞选择器：选择一个元素后面同属一个父元素的所有元素。*/
/*
语法:X ~ Y{}
*/
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后续同胞选择器</title>
		<style type="text/css">
            ul~p{
     
     
                color:red;/*选择ul后面的所有p元素*/
            }
		</style>
	</head>
	<body>
		<div>
            <ul>
                <li>list</li>
                	<ul>
                     <li>child</li>   
                    </ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
            <p>A</p>
            <p>B</p>
            <p>C</p>
            <p>D</p>
        </div>     
	</body>
</html>

3.3 结构伪类选择器

链接伪类选择器（包括静态伪类和动态伪类）

a:link{
    
    
    color:red;
}
/*link伪类用来定义所有还没有点击链接的样式*/
a:visited{
    
    
    color:purple;
}
/*visited伪类用来定义曾经点击或者访问过的链接*/

/*静态伪类和动态伪类*/
a:link{
    
    
    color:blue;
}
/*静态伪类，未点击链接，蓝色*/
a:visited{
    
    
    color:purple;
}
/*静态伪类，已经点击链接，紫色*/
a:hover{
    
    
    color:red;
}
/*动态伪类，鼠标悬浮，红色*/
a:active{
    
    
    color:black;
}
/*动态伪类，按下鼠标，黑色*/

结构伪类选择器是最难理解的，TT对于我来说，从网上找了一张图，方便理解。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>常用结构伪类选择器</title>
		<style type="text/css">
   		 /*选择ul的第一个子元素，ul下面有三个li，选择第一个li*/
          /*语法：X:first-child*/
    		ul li:first-child{
     
     
       		 background:red ;
    		}
            
         /*选择ul的最后一个子元素，ul下面有三个li，选择最后一个li*/  
         /*语法：X:last-child*/
            ul li:last-child{
     
     
              	background:red
            }
            
  		 /*选中p元素然后定位到p的父元素body，选择父级元素body的第一个子元素，即h1*/
         /*语法：E:nth-child(n),n从1开始数,按顺序定位*/ 
    		p:nth-child(1){
     
     
        		background:red;
    		}
        /*若想要定位到p1，p1是body元素的第二个子元素，写法是这样的*/
            p:nth-child(2){
     
     
             	background:red;
            }
            
         /*按类型定位，若想要选择p1，也可以这么写*/
         /*选择同一个类型p的第一个子元素*/
            p:nth-of-type(1){
     
     
                background:red;
            }
		</style>
	</head>
<body>
    <h1>h1</h1>
    <p> p1 </p>
    <p> p2 </p>
    <p> p3 </p>
    <ul>
         <li>li1</li>
         <li>li2</li>
         <li>li3</li>
    </ul>
</body>
</html>

3.4 属性选择器（比较简单且经常用到，相当于id+class结合）

绝对相等

/*绝对相等属性=*/
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性选择器----绝对相等</title>
    <style>
        .Link a{
     
     
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        a[id = link3]{
     
     
            background: red;
        }/*选择a标签里面id值为link3的元素*/
    </style>
</head>
<body>
<p class="Link">
    <a href="" class="link1" >1</a>
    <a href="" class="link2" >2</a>
    <a href="" id="link3" >3</a>
    <a href="" class="link4" >4</a>
    <a href="" class="link5" >5</a>
    <a href="" class="link6" >6</a>
</p>
</body>
</html>

包含

/*包含*=*/
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性选择器----包含</title>
    <style>
        .Link a{
     
     
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        a[class = link]{
     
     
            background: red;
        }/*选择class包含link的元素*/
    </style>
</head>
<body>
<p class="Link">
    <a href="" class="link-link1" >1</a>
    <a href="" class="link-link2" >2</a>
    <a href="" id="link-link3" >3</a>
    <a href="" class="link-link4" >4</a>
    <a href="" class="link-link5" >5</a>
    <a href="" class="link-link6" >6</a>
</p>
</body>
</html>
/*
 = 绝对等于
 *通配
 *= 包含
 ^= 以这个开头
 $= 以这个结尾  
*/

首部等于^=

/*首部等于^=*/
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性选择器----首部等于</title>
    <style>
        .Link a{
     
     
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        a[href ^= img]{
     
     
            background: red;
        }/*选择href首部img开头的*/
    </style>
</head>
<body>
<p class="Link">
    <a href="img1" class="link1" >1</a>
    <a href="img2" class="link2" >2</a>
    <a href="img3" id="link3" >3</a>
    <a href="img4" class="link4" >4</a>
    <a href="img5" class="link5" >5</a>
    <a href="img6" class="link6" >6</a>
</p>
</body>
</html>

尾部等于$=

/*尾部等于$=*/
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性选择器----尾部等于</title>
    <style>
        .Link a{
     
     
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        a[href $= com]{
     
     
            background: red;
        }/*选择href尾部com结尾的*/
    </style>
</head>
<body>
<p class="Link">
    <a href="https://www.baidu.com" class="link1" >1</a>
    <a href="https://www.baiduyun.com" class="link2" >2</a>
    <a href="" id="link3" >3</a>
    <a href="" class="link4" >4</a>
    <a href="" class="link5" >5</a>
    <a href="" class="link6" >6</a>
</p>
</body>
</html>

*通配

/**通配*/
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性选择器----通配</title>
    <style>
        .Link a{
     
     
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
       *p,a{
     
     
            margin = 0px;
            padding = 0px;
        }
    </style>
</head>
<body>
<p class="Link">
    <a href="https://www.baidu.com" class="link1" >1</a>
    <a href="https://www.baiduyun.com" class="link2" >2</a>
    <a href="" id="link3" >3</a>
    <a href="" class="link4" >4</a>
    <a href="" class="link5" >5</a>
    <a href="" class="link6" >6</a>
</p>
</body>
</html>

四后记

需要牢记的是body 总有一个外边距 8px，写前端的时候开发通常需要置0。CSS选择器是一个比较凌乱琐碎的知识点，不常用的几乎记不住，那需要背诵吗？当然不需要！按需求去学习，而不是学完一整套然后再去实践。我觉得学习是学习如何学习的过程，这个过程是思维模式的培养，而不是我今天记住了几个选择器的范式，没有什么多大的意义。希望自己能每天push自己学习，整理笔记，有一个清晰的学习路线。