前端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自己學習，整理筆記，有一個清晰的學習路線，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272259.html

標籤：其他

上一篇：javascript表格資訊增添與洗掉

下一篇：JavaScript學習（七）—元素節點的獲取方式

前端CSS—選擇器知識點復習整理

前端CSS—選擇器知識點整理

一 前言

二 一些需要理解的邏輯導圖

三 選擇器知識點整理

四 后記

一前言

二一些需要理解的邏輯導圖

三選擇器知識點整理

四后記