收藏
批改狀態(tài)：合格
老師批語：寫得真心不錯, 推薦了
css選擇器----偽類選擇器
在css中除了常用的 id選擇器，類選擇器，標簽選擇器外，還有很多功能十分強大的偽類選擇器。
例如
/* 相鄰選擇器練習 */
#bg-skyblue+* {
background-color: red
}
/* 兄弟選擇器練習 */
#bg-blueviolet~* {
background-color: blueviolet
}
/*屬性選擇器*/
li[id="bg-blue"] {
border: 2px solid red
}
/*群組選擇器*/
#bg-blue,
.gb-green {
border: 2px solid blue;
}
/*偽類選擇器（沒有確定類型，關注點時位置）*/
ul :first-child {
/* background-color: coral; */
}
ul :last-child {
/* background-color: coral; */
}
/*選擇正著第6個li標簽*/
ul :nth-child(6) {
/* background-color: yellow; */
}
/*選擇倒數(shù)第3個li標簽*/
ul :nth-last-child(3) {
/* background-color: yellow; */
}
/*偽類：類型選擇器(指定了類型時用(關注點時類型))*/
ul li:first-of-type {
/* background-color: darkorange;
color: white; */
}
ul li:last-of-type {
/* background-color: darkgreen;
color: white; */
}
/*將每個div中的第二個子元素背景設置為綠色*/
div :nth-child(2) {
/* background-color: #008856; */
}
實例運用：
效果：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style1.css"> <title>選擇器</title> </head> <body> <ul> <li>1</li> <li>2</li> <li id="bg-skyblue">3</li> <li>4</li> <li>5</li> <li>6</li> <li id="bg-blueviolet">7</li> <li>8</li> <li>9</li> <li>10</li> <p>1</p> <p>2</p> <p>3</p> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
ul {
margin: 0;
padding-left: 0;
}
ul li {
display: inline-block;
list-style-type: none;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: pink;
}
ul :nth-child(odd) {
border-radius: 5px;
}
ul p {
width: 40px;
height: 40px;
display: inline-block;
line-height: 40px;
text-align: center;
}
ul :nth-child(even) {
border-radius: 50%;
}
ul li:nth-of-type(odd) {
border: 2px solid black;
}
ul li:nth-of-type(3) {
border: 2px solid red;
}
ul p:nth-of-type(3) {
border: 2px solid red;
}
/* 相鄰選擇器練習 */
#bg-skyblue+* {
background-color: red
}
/* 兄弟選擇器練習 */
#bg-blueviolet~* {
background-color: blueviolet
}
/*屬性選擇器*/
/* li[id="bg-blue"] {
border: 2px solid red
} */
/*群組選擇器*/
/* #bg-blue,
.gb-green {
border: 2px solid blue;
} */
/*相鄰選擇器*/
#bg-blue+* {
/*background-color: yellow;*/
}
/*兄弟選擇器*/
#bg-blue~* {
/*background-color: yellow;*/
}
/*偽類選擇器（沒有確定類型，關注點時位置）*/
ul :first-child {
/* background-color: coral; */
}
ul :last-child {
/* background-color: coral; */
}
/*選擇正著第6個li標簽*/
ul :nth-child(6) {
/* background-color: yellow; */
}
/*選擇倒數(shù)第3個li標簽*/
ul :nth-last-child(3) {
/* background-color: yellow; */
}
/*偽類：類型選擇器(指定了類型時用(關注點時類型))*/
ul li:first-of-type {
/* background-color: darkorange;
color: white; */
}
ul li:last-of-type {
/* background-color: darkgreen;
color: white; */
}
/*將每個div中的第二個子元素背景設置為綠色*/
div :nth-child(2) {
/* background-color: #008856; */
}
/*只選擇西門大官人*/
/*div:first-of-type :nth-child(3) {*/
/*background-color: red;*/
/*}*/
/*p:nth-of-type(2) {*/
/*background-color: red;*/
/*}*/點擊 "運行實例" 按鈕查看在線實例
小結：相鄰選擇器 #id + * 只選擇被選元素的下一個元素，一次只選一個
兄弟選擇器 #id ~ * 選擇被選元素之后的所有元素，一次選中多個
偽類選擇器 ul :nth-child(odd) 適用于未確定元素，確定位置的時候使用
ul li:nth-of-type(3) 適用于 確定了位置，更確定了元素的時候使用
盒子布局時padding的運用
當box1未確定高度的時候，其高度是被內(nèi)容撐開的，而加了padding后，box1卻會變形，盒子的高度變了。如下圖：
------------------------------------解決盒子變形的兩種辦法--------------------------------------------------------------------
1,寬度分離法：及不想讓wrap盒子變形，就在img上再加一層盒子box3，如圖：
這個時候盒子warp寬高沒變（背景是藍色blue），變化的只是box3，
border-box
為元素設定的寬度和高度決定了元素的邊框盒。
就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設定的寬度和高度內(nèi)進行繪制。
通過從已設定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
也就是說，添加的padding只在盒子box4的width：300px；和height：300px；中去計算
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style3.css"> <title>調(diào)皮的內(nèi)邊距padding</title> </head> <body> <div class="box1"> <img class="box2" src="11.jpg" alt="咸魚" width="200"> </div> <!--寬度分離--> <div class="wrap"> <div class="box3"> <img src="11.jpg" alt="咸魚" width="200"> </div> </div> <div class="box4"> <img src="11.jpg" alt="咸魚" width="200"> </div> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
.box1 {
width: 300px;
border: 1px solid black;
background-color: lightblue;
/* padding: 50px; */
}
.box2 {
padding: 50px;
}
.wrap {
width: 300px;
height: 300px;
background: blue;
}
.box3 {
padding: 50px;
background-color: lightblue;
border: 1px solid black;
}
.box4 {
width: 300px;
height: 300px;
box-sizing: border-box;
padding: 50px;
background-color: pink;
border: 1px solid black;
}點擊 "運行實例" 按鈕查看在線實例
margin-----同級坍塌，同級傳遞，自動擠壓
1.同級坍塌及解決辦法
只發(fā)生在block元素上(不包括float、absolute、inline-block元素)
只發(fā)生在垂直方向上(不考慮writing-mode)
所謂的同級坍塌就是指兩個div都設置外邊距的時候，數(shù)值小的會被大的吞噬，而margin外邊距也只會顯示數(shù)值大的那一方。例如div1的margin-bottom下邊距是30px，而div2的上邊距margin-top是20px的時候，最終瀏覽器只會以最大的30px為準。解決辦法，要么只設置一邊，要么設置的第二個的時候，將上一個的邊距+想要設置的值。
2.同級傳遞
父元素沒有padding-top值
父元素沒有border-top值
父元素和第一個子元素之間沒有inline元素分隔
父元素或子元素沒有浮動
解決辦法：1.給父元素增加padding屬性
2.給父元素添加border屬性，
3.給父元素或子元素添加浮動屬性。
3.自動擠壓
所謂自動擠壓就是設置margin：auto；或者margin-left：auto；
但是，自動擠壓只能在設置水平方向?qū)崿F(xiàn)自動擠壓。
原因：水平方向可以居中是因為塊級元素的寬度默認是撐滿父級元素的，如果給寬度設置一個固定值，而左右margin設置為auto，則可以平分剩余空間
??垂直方向不可以居中是因為塊級元素的高度默認是內(nèi)容高度，與父級元素的高度并沒有直接的關系，而上下margin設置為auto，則被重置為0
圖片無法水平居中，類似于塊級元素無法垂直居中。因為圖片的寬度width默認是自身寬度，與父元素的寬度沒有直接關系。左右margin設置為auto，會被重置為0所以，圖片要水平居中，需要設置為display:block元素
1、行內(nèi)元素垂直margin無效
2、某些表格類元素margin無效
3、絕對定位元素非定位方向的margin值看似無效
5. 內(nèi)聯(lián)特性導致的margin無效
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style4.css"> <title>捉摸不定的外邊距margin</title> </head> <body> <!--1.同級坍塌--> <!--2.同級傳遞--> <!--3.自動擠壓--> <div class="box1"></div> <div class="box2"></div> <div class="box3"> <div class="box4"> </div> </div> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
.box1 {
width: 300px;
border: 1px solid black;
background-color: lightblue;
/* padding: 50px; */
}
.box2 {
padding: 50px;
}
.wrap {
width: 300px;
height: 300px;
background: blue;
}
.box3 {
padding: 50px;
background-color: lightblue;
border: 1px solid black;
}
.box4 {
width: 300px;
height: 300px;
box-sizing: border-box;
/* padding: 50px; */
background-color: pink;
border: 1px solid black;
}點擊 "運行實例" 按鈕查看在線實例
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
