前端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自己学习,整理笔记,有一个清晰的学习路线。