整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、CSS概述
CSS是Cascading Style Sheets的簡(jiǎn)稱，中文稱為層疊樣式表，對(duì)html標(biāo)簽的渲染和布局
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
二、CSS的四種引入方式
1.行內(nèi)式
行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢(shì)，不推薦使用。
2.內(nèi)嵌式
嵌入式是將CSS樣式集中寫在網(wǎng)頁(yè)的<head></head>標(biāo)簽對(duì)的<style></style>標(biāo)簽中。
3.鏈接式
建一個(gè)index.css的文件存放樣式，在主頁(yè)面中把index.css引入。
4.導(dǎo)入式
將一個(gè)獨(dú)立的.css文件引入HTML文件中，導(dǎo)入式使用CSS規(guī)則引入外部CSS文件，<style>
標(biāo)記也是寫在<head>標(biāo)記中。使用格式 @import "index.css"
注意：
導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁(yè)裝載完后再裝載CSS文件，因此這就導(dǎo)致了一個(gè)問題，如果網(wǎng)頁(yè)比較大則會(huì)兒出現(xiàn)先顯示無樣式的頁(yè)面，閃爍一下之后，再出現(xiàn)網(wǎng)頁(yè)的樣式。這是導(dǎo)入式固有的一個(gè)缺陷。使用鏈接式時(shí)與導(dǎo)入式不同的是它會(huì)以網(wǎng)頁(yè)文件主體裝載前裝載CSS文件，因此顯示出來的網(wǎng)頁(yè)從一開始就是帶樣式的效果的，它不會(huì)像導(dǎo)入式那樣先顯示無樣式的網(wǎng)頁(yè)，然后再顯示有樣式的網(wǎng)頁(yè)，這是鏈接式的優(yōu)點(diǎn)。所以還是推薦用鏈接式。。。。。。。。。。。
三、注意嵌套規(guī)則
五、CSS選擇器
1.基礎(chǔ)選擇器
“選擇器”指明了{(lán)}中的“樣式”的作用對(duì)象，也就是"樣式"作用與網(wǎng)頁(yè)中的哪些元素
1.通用元素選擇器 *: 所有的標(biāo)簽都變色
2.標(biāo)簽選擇器：匹配所有使用p標(biāo)簽的樣式 p{color:red}
3.id選擇器：匹配指定的標(biāo)簽 #p2{color:red}
4.class類選擇器：誰指定class誰的變色，可選多個(gè) .c1{color:red} 或者 div.c1{color:red}
可以對(duì)塊級(jí)標(biāo)簽設(shè)置長(zhǎng)寬
不可以對(duì)內(nèi)聯(lián)標(biāo)簽設(shè)長(zhǎng)寬（它只會(huì)根據(jù)他的文字大小來變）
2.組合選擇器
1.后代選擇器 (不分層級(jí)，只讓p標(biāo)簽變色) .c2 p{color:red}
2.子代選擇器（只在兒子層找） .c2>p{color:red}
3.多元素選擇器：同時(shí)匹配所有指定的元素 .div,p{color:red} 或者
.c2 .c3,.c2~.c3{
color: red;
background-color: green;
font-size: 15px;
}
3.屬性選擇器
1. E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略。 ） 比如“[cheacked]”。以下同。） p[title] { color:#f00; }
2.E[att=val] 匹配所有att屬性等于“val”的E元素 div[class=”error”] { color:#f00; }
3.E[att~=val] 匹配所有att屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“val”的E元素 td[class~=”name”] { color:#f00; }
4.E[attr^=val] 匹配屬性值以指定值開頭的每個(gè)元素 div[class^="test"]{background:#ffff00;}
5.E[attr$=val] 匹配屬性值以指定值結(jié)尾的每個(gè)元素 div[class$="test"]{background:#ffff00;}
6.E[attr*=val] 匹配屬性值中包含指定值的每個(gè)元素 div[class*="test"]{background:#ffff00;}
4.偽類
anchor偽類：專用于控制鏈接的顯示效果
before after偽類
:before p:before 在每個(gè)<p>元素之前插入內(nèi)容
:after p:after 在每個(gè)<p>元素之后插入內(nèi)容
例：p:before{content:"hello";color:red;display: block;}
5.CSS優(yōu)先級(jí)和繼承
css的繼承
繼承是CSS的一個(gè)主要特征，它是依賴于祖先-后代的關(guān)系的。繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素，還可以應(yīng)用于它的后代。例如一個(gè)BODY定義了的顏色值也會(huì)應(yīng)用到段落的文本中。
發(fā)現(xiàn)只需要給加個(gè)顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規(guī)則都可以覆蓋其繼承樣式?！?/p>
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序。
樣式表中的特殊性描述了不同規(guī)則的相對(duì)權(quán)重，它的基本規(guī)則是：
1 內(nèi)聯(lián)樣式表的權(quán)值最高 style=""－－－－－－－－－－－－1000；
2 統(tǒng)計(jì)選擇符中的ID屬性個(gè)數(shù)。 #id －－－－－－－－－－－－－－100
3 統(tǒng)計(jì)選擇符中的CLASS屬性個(gè)數(shù)。 .class －－－－－－－－－－－－－10
4 統(tǒng)計(jì)選擇符中的HTML標(biāo)簽名個(gè)數(shù)。 p －－－－－－－－－－－－－-－1
按這些規(guī)則將數(shù)字符串逐位相加，就得到最終的權(quán)重，然后在比較取舍時(shí)按照從左到右的順序逐位比較。
Web前端開發(fā)中，樹形級(jí)聯(lián)菜單，是一種常見且實(shí)用的界面交互組件。它不僅可以提供清晰的導(dǎo)航和大量信息分類展示，還能讓用戶更方便地進(jìn)行操作和查詢。然而，除了其直觀的功能外，樹形級(jí)聯(lián)菜單，還可以被用于學(xué)習(xí)和應(yīng)用CSS選擇器以及CSS技巧。本文將通過代碼和實(shí)例，分步驟地講解如何通過樹形級(jí)聯(lián)菜單，來理解和運(yùn)用CSS選擇器與CSS技巧。
接下來，我們通過上一篇文章的例子，來了解本文的信息點(diǎn)。
HTML
<ul id="tree-menu">
<li><label>Device 1</label>
<ul>
<li><label>Subdevice 1-1</label></li>
<li><label>Subdevice 1-2</label>
<ul>
<li><label>Subdevice 1-2-1</label></li>
<li><label>Subdevice 1-2-2</label></li>
<li><label>Subdevice 1-2-3</label></li>
<li><label>Subdevice 1-2-4</label></li>
<li><label>Subdevice 1-2-5</label></li>
<li><label>Subdevice 1-2-6</label></li>
<li><label>Subdevice 1-2-7</label></li>
<li><label>Subdevice 1-2-8</label></li>
<li><label>Subdevice 1-2-9</label></li>
</ul>
</li>
</ul>
</li>
<li><label>Device 2</label></li>
</ul>CSS
<style type="text/css">
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
/* 默認(rèn)隱藏子項(xiàng) */
#tree-menu ul {
display: none;
}
/* 點(diǎn)擊節(jié)點(diǎn)展開子項(xiàng) */
#tree-menu li.collapsed>ul {
display: block;
}
</style>CSS
<style type="text/css">
#tree-menu li ul {
padding: 0.5rem 1rem;
}
</style>CSS
<style type="text/css">
#tree-menu li ul {
padding: 0.5rem 1rem;
}
#tree-menu li {
border: 1px solid #ddd;
}
// 第一個(gè)子節(jié)點(diǎn)之后所有兄弟節(jié)點(diǎn)
#tree-menu li+li {
border-top: 0;
}
#tree-menu label {
display: block;
padding: 0.5rem 1rem;
}
#tree-menu label:hover {
background-color: aliceblue;
}
</style>CSS
<style type="text/css">
#tree-menu li ul {
padding: 0.5rem 1rem;
}
#tree-menu li {
border: 1px solid #ddd;
border-radius: 10px;
margin-bottom:0.5rem;
}
/* #tree-menu li+li {
border-top: 0;
} */
#tree-menu label {
display: block;
padding: 0.5rem 1rem;
}
#tree-menu label:hover {
background-color: aliceblue;
border-radius: 10px;
}
</style>li label{ }
這個(gè)示例表示：li元素下面所有層級(jí)的label
li>label{ }這個(gè)示例表示：li元素孩子級(jí)層級(jí)的label
CSS
#tree-menu li ul {
padding: 0.5rem 1rem;
}
#tree-menu li {
border: 1px solid #ddd;
/* border-radius: 10px;
margin-bottom:0.5rem; */
}
/* 第一個(gè)子節(jié)點(diǎn)之后的所有兄弟節(jié)點(diǎn) */
#tree-menu li+li {
border-top: 0;
}
/* 第一個(gè)子節(jié)點(diǎn) 設(shè)置頂部圓角 */
#tree-menu li:first-child,
#tree-menu li:first-child>label {
border-radius: 10px 10px 0 0;
}
/* 最后一個(gè)子節(jié)點(diǎn) 設(shè)置底部圓角 */
#tree-menu li:last-child,
#tree-menu li:last-child>label {
border-radius: 0 0 10px 10px ;
}
/* 只有唯一 一個(gè)子節(jié)點(diǎn)時(shí)，頂部底部都設(shè)置圓角 */
#tree-menu li:only-child,
#tree-menu li:only-child>label {
border-radius: 10px ;
}
/*
展開時(shí)背景圓角修復(fù)
:first-child 第一個(gè)子節(jié)點(diǎn)
:not(:only-child)非唯一子節(jié)點(diǎn)
這里表示這個(gè)子節(jié)點(diǎn)有子項(xiàng)
*/
#tree-menu li.collapsed:first-child:not(:only-child)>label {
border-radius: 10px 10px 0 0;
}
#tree-menu li.collapsed:not(:only-child)>label {
border-radius: 0;
}
#tree-menu label {
display: block;
padding: 0.5rem 1rem;
}
/*
:hover 鼠標(biāo)在元素上面時(shí)
*/
#tree-menu label:hover {
background-color: aliceblue;
/* border-radius: 10px; */
}CSS
#tree-menu li label {
position: relative;
padding: 0.5rem 1rem 0.5rem 1.5rem;
}
/**
如果有子項(xiàng)，添加展開或折疊的標(biāo)記符號(hào)。
默認(rèn)折疊標(biāo)記
*/
#tree-menu li label::before {
position: absolute;
content: '-';
left: 0;
width: 1.6rem;
height: 1.2rem;
text-align: center;
line-height: 1.2rem;
color: #333;
}
/**
:only-child表示沒有兄弟元素
不顯示標(biāo)記
*/
#tree-menu li label:only-child::before {
content: ' ';
}
/* 顯示展開標(biāo)記 */
#tree-menu li.collapsed>label::before {
content: '+';
}到此，一個(gè)還比較美觀的樹形菜單，基本完成了。
但是，有朋友說，我要實(shí)現(xiàn)以下需求呢？
1、不要邊框；
2、保留縮進(jìn)；
3、保留展開折疊標(biāo)記；
4、橫向拉通選擇；
CSS
#tree-menu label {
position: relative;
display: block;
padding: 0.5rem 1rem;
}
#tree-menu label:hover {
background-color: aliceblue;
}
/** 縮進(jìn)拉通選擇*/
#tree-menu li label {
padding-left: 0;
}
#tree-menu li li label {
padding-left: 0.5rem;
}
#tree-menu li li li label {
padding-left: 1rem;
}
#tree-menu li li li li label {
padding-left: 1.5rem;
}
#tree-menu li li li li li label {
padding-left: 2rem;
}
#tree-menu li li li li li li label {
padding-left: 2.5rem;
}
/**
如果有子項(xiàng)，添加展開或折疊的標(biāo)記符號(hào)。
默認(rèn)折疊標(biāo)記
*/
#tree-menu li label::before {
float: left;
content: '-';
width: 1.6rem;
height: 1.2rem;
text-align: center;
line-height: 1.2rem;
color: #333;
}
/**
:only-child表示沒有兄弟元素
不顯示標(biāo)記
*/
#tree-menu li label:only-child::before {
content: ' ';
}
/* 顯示展開標(biāo)記 */
#tree-menu li.collapsed>label::before {
content: '+';
}如果層級(jí)很深，我不是得寫很多個(gè)li才能實(shí)現(xiàn)多級(jí)縮進(jìn)？
比如：tree-menu li li li li li li li li li li li label{}
查找所有 label 元素，然后看 label 元素上面有多少個(gè) li 元素，以此判斷所屬層級(jí)。
CSS
<script>
function parents(element, selector) {
var parentsArray=[];
var parent=element.parentNode;
while (parent && parent !==document) {
if (parent.matches(selector)) {
parentsArray.push(parent);
}
parent=parent.parentNode;
}
return parentsArray;
}
const items=document.querySelectorAll('#tree-menu label');
items.forEach((item)=> {
const level=parents(item.parentElement, 'li').length
const padding=10 * level;
item.style.paddingLeft=`${padding}px`;
});
</script>1、我不想寫JavaScript；
2、我不想寫多個(gè)li li li li li li li；
3、我不想寫多個(gè).level1{} .level2{} .level3{}；
4、我想寫少量CSS代碼，來解決這個(gè)問題，一勞永逸；
5、我想它支持無限層級(jí)的縮進(jìn)；
有這樣CSS代碼嗎？我怎么不知道？
你別說，還真有這樣得CSS代碼。
當(dāng)然，這也是本文得重點(diǎn)，算一個(gè)CSS得小技巧吧。
CSS 函數(shù) counters() 是一個(gè)嵌套計(jì)數(shù)器，返回表示指定計(jì)數(shù)器當(dāng)前值的連接字符串。counters() 函數(shù)有兩種形式： counters(name, string) 或 counters(name, string, style) 。它通常和偽元素搭配使用，但是理論上可以在支持<string>值的任何地方使用。生成的文本是具有給定名稱的所有計(jì)數(shù)器的值，從最外層到最內(nèi)層，之間由指定字符串分隔。計(jì)數(shù)器以指示的樣式呈現(xiàn)，如果未指定樣式，則默認(rèn)為十進(jìn)制。
先看一個(gè)例子：
HTML
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
CSS
ol {
counter-reset: listCounter;
}
li {
counter-increment: listCounter;
}
li::marker {
content: counters(listCounter, '.', upper-roman) ') ';
}
li::before {
content: counters(listCounter, ".") "==" counters(listCounter, ".", lower-roman) ;
}
通過上面的例子，我們看到了類似word的多級(jí)列表。此時(shí)很多朋友可能已經(jīng)有思路了，那么我們將利用CSS這個(gè)特性，來實(shí)現(xiàn)上面的要求。
修改了部分樣式
#tree-menu label {
position: relative;
display: block;
/* padding: 0.5rem 1rem; */
padding: 0.5rem 1rem 0.5rem 0;
}
/* #tree-menu li label::before {} */
#tree-menu li label::after {}
/* #tree-menu li label:only-child::before {} */
#tree-menu li label:only-child::after {}
/* #tree-menu li.collapsed>label::before {} */
#tree-menu li.collapsed>label::after {}counters屬性樣式
/** 縮進(jìn)拉通選擇 修改前*/
/* #tree-menu li label {
padding-left: 0;
}
#tree-menu li li label {
padding-left: 0.5rem;
}
#tree-menu li li li label {
padding-left: 1rem;
}
#tree-menu li li li li label {
padding-left: 1.5rem;
}
#tree-menu li li li li li label {
padding-left: 2rem;
}
#tree-menu li li li li li li label {
padding-left: 2.5rem;
} */
/* 修改后 */
#tree-menu,
#tree-menu ul {
counter-reset: listCounter;
}
#tree-menu label {
counter-increment: listCounter;
}
#tree-menu label::before {
float: left;
/* 把標(biāo)記設(shè)置成透明 */
color:transparent;
/* 默認(rèn)數(shù)字*/
content: counters(listCounter, "");
}ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
/**
折疊狀態(tài)與展開狀態(tài)樣的樣式
*/
#tree-menu ul {
display: none;
}
#tree-menu li.collapsed>ul {
display: block;
}
#tree-menu label {
position: relative;
display: block;
padding: 0.5rem 1rem 0.5rem 0;
}
#tree-menu label:hover {
background-color: aliceblue;
}
/** 縮進(jìn)拉通選擇*/
/* 修改后 */
#tree-menu,
#tree-menu ul {
counter-reset: listCounter;
}
#tree-menu label {
counter-increment: listCounter;
}
#tree-menu label::before {
float: left;
/* 將序號(hào)設(shè)置為透明 */
color:transparent;
/***/
content: counters(listCounter, "");
}
/**
如果有子項(xiàng)，添加展開或折疊的標(biāo)記符號(hào)。
默認(rèn)折疊標(biāo)記
*/
#tree-menu li label::after {
float: left;
content: '-';
width: 1.6rem;
height: 1.2rem;
text-align: center;
line-height: 1.2rem;
color: #333;
}
/**
:only-child表示沒有兄弟元素
不顯示標(biāo)記
*/
#tree-menu li label:only-child::after {
content: ' ';
}
/* 顯示展開標(biāo)記 */
#tree-menu li.collapsed>label::after {
content: '+';
}通過樹形級(jí)聯(lián)菜單，學(xué)習(xí)CSS選擇器與CSS技巧，是一種非常有效的學(xué)習(xí)方法。我們不僅可以學(xué)會(huì)如何使用各種選擇器，來控制頁(yè)面元素，還能掌握一些實(shí)用的CSS技巧和概念。希望本文對(duì)您了解樹形級(jí)聯(lián)菜單、CSS選擇器和CSS技巧有所幫助，并能為您在Web前端開發(fā)中的工作提供一些啟發(fā)。
希望本文能夠?qū)δ兴鶐椭?，感謝您的閱讀！
人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。
CSS 中，類選擇器（class selectors）是一種強(qiáng)大的選擇器類型，它們?cè)试S我們根據(jù) HTML 元素的 class 屬性來選擇元素。在這篇文章中，我們將深入探討 class selectors 的各種優(yōu)勢(shì)和巧妙使用方法。
優(yōu)勢(shì)：
巧妙用法：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
