??博主：初映CY的前說(前端領(lǐng)域) ,??本文核心：nth:children以及瀏覽器中的webkit使用
前言：在頁面的編寫中使用了多個標(biāo)簽通常有需求去處理下特殊的樣式，我們常見做法是給我們的標(biāo)簽加上一個類或者通過標(biāo)簽選擇器去寫我們的css樣式，但是不想寫類了還可以用啥選擇到我們頁面中的dom元素？嘿，這下就可以用上我們的nth-child（）選擇器嘍~
?一、nth-child()選擇器
nth-child 是 CSS 選擇器中的一個偽類，它可以選擇某個父元素的第 N 個子元素，或者符合特定公式的子元素。
使用 :nth-child 選擇器的語法為： :nth-child(an + b)。
其中，a 和 b 都是整數(shù)，n 表示元素在其父元素中的位置，默認(rèn)n是0。
nth-child()使用
先繪制下我們的一個靜態(tài)demo
長下面這個樣子：
初始代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<span>元素1</span>
<span>元素2<span>元素3</span></span>
<span>元素4</span>
<span>元素5</span>
</div>
</body>
<style>
.box{
margin: 0 auto;
margin-top: 100px;
width: 500px;
height: 500px;
background-color: teal;
text-align: center;
line-height: 500px;
}
.box span{
padding: 20px;
font-size: 20px;
}
</style>
</html>
我們寫選中span試試
.box span:nth-child(1){
color: white;
}
寫完了選擇器頁面展示效果如下所示：
這里有意思的來了，為什么元素3也被選中了？請仔細(xì)的閱讀它可以選擇某個父元素的第 N 個子元素，或者符合特定公式的子元素。因此瀏覽器會解析，找到box下面的span中的第一個，因此元素1就被理所當(dāng)然的改變了顏色。那么元素3的顏色是怎么改變的？仔細(xì)分析博主代碼結(jié)構(gòu)是是span套裝span，以第一個span標(biāo)簽為出發(fā)點(diǎn)來看，元素3也確確實(shí)實(shí)是span標(biāo)簽中的第一個元素。所以元素3也就被博主加上了樣式，這是一個潛在的小細(xì)節(jié)，大家注意嘍。
nth-chlid也支持選中偶數(shù)單數(shù)
下面更正div中span結(jié)構(gòu)讓大家看得更清楚
<div class="box">
<span>元素1</span>
<span>元素2</span>
<span>元素4</span>
<span>元素5</span>
</div>
選擇奇數(shù)、偶數(shù)：
//n的取值為0、1、2、3依次往后面取
.box span:nth-child(2n){
color: white;
}
.box span:nth-child(2n+1){
color: orange;
}
也可以用另外一種選擇方法，vscode代碼提示里面都有，大家可以去嘗試下其他的，再次再介紹一個
nth-last-child(n) 從最后看選擇第幾個元素
/* 從尾部往前面算 */
.box span:nth-last-child(2){
color: skyblue;
}
倒數(shù)第二個顏色就被我改成了skyblue顏色了！當(dāng)然css也存在樣式覆蓋的問題（從上往下執(zhí)行），我們原本的橙色也就擠掉了
?二、webkit
WebKit 是一種瀏覽器引擎，廣泛應(yīng)用于多個瀏覽器中，其中包括 Safari、Google Chrome（在 Chrome 27 版本前）、Opera（在 Opera 15 版本前）等。
Webkit 的特點(diǎn)包括：
- 高速渲染：WebKit 引擎在渲染網(wǎng)頁時使用了一些優(yōu)化技術(shù)，以提高渲染速度和性能。
- 跨平臺：WebKit 引擎可以在不同的操作系統(tǒng)上運(yùn)行，包括 macOS、Windows、Linux 等。
- 支持最新的標(biāo)準(zhǔn)：WebKit 遵循并支持最新的 Web 標(biāo)準(zhǔn)，如 HTML、CSS 和 JavaScript 規(guī)范等。
說白了我們可以用這個來控制瀏覽器的滾動條！
原始的滾動條如下所示：
webkit使用
常見的灰白條，但是我們不喜歡怎么辦?自己修改瀏覽器內(nèi)核webkit即可
直接參考下面代碼：
/* 控制滾動條寬度 */
::-webkit-scrollbar {
/* width: 10px; */
width: 5px;
}
/*定義滾動條軌道 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 100, 0.8);
}
/*定義滑塊 內(nèi)陰影+圓角*/
::-webkit-scrollbar-thumb {
border-radius: 12px;
-webkit-box-shadow: inset 0 0 6px rgba(55, 169, 192, 0.2);
background-color: yellow;
}
頁面效果：
源代碼見下：文章來源：http://www.zghlxwxcb.cn/news/detail-511522.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<span>元素1</span>
<span>元素2</span>
<span>元素4</span>
<span>元素5</span>
<div class="children">11111111111111111111111111111111111111111</div>
</div>
</body>
<style>
/* 控制滾動條寬度 */
::-webkit-scrollbar {
/* width: 10px; */
width: 5px;
}
/*定義滾動條軌道 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 100, 0.8);
}
/*定義滑塊 內(nèi)陰影+圓角*/
::-webkit-scrollbar-thumb {
border-radius: 12px;
-webkit-box-shadow: inset 0 0 6px rgba(55, 169, 192, 0.2);
background-color: yellow;
}
.box{
width: 500px;
height: 500px;
background-color: teal;
margin: 0 auto;
margin-top: 100px;
text-align: center;
line-height: 500px;
overflow: hidden;
overflow-y: scroll;
}
.box span{
padding: 20px;
font-size: 20px;
}
.box span:nth-child(2n){
color: white;
}
.box span:nth-child(2n+1){
color: orange;
}
/* 從尾部往前面算 */
.box span:nth-last-child(2){
color: skyblue;
}
.children{
height: 600px;
}
</style>
</html>
至此本文結(jié)束，愿你有所收獲！
期待大家的關(guān)注與支持! 你的肯定是我更新的最大動力?。?！文章來源地址http://www.zghlxwxcb.cn/news/detail-511522.html
到了這里，關(guān)于【CSS】nth:children以及瀏覽器內(nèi)核webkit使用（滾動條樣式修改）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
