CSS樣式之選擇器

、CSS概述

CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，對html標簽的渲染和布局

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

二、CSS的四種引入方式

1.行內式

行內式是在標記的style屬性中設定CSS樣式這種方式沒有體現出CSS的優勢，不推薦使用。

2.內嵌式

 嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽中。

3.鏈接式

建一個index.css的文件存放樣式，在主頁面中把index.css引入。

![](https://images2017.cnblogs.com/blog/1184802/201709/1184802-20170919160320009-479572808.png)

4.導入式

將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>

標記也是寫在<head>標記中。使用格式 @import "index.css"

注意：

導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會像導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。所以還是推薦用鏈接式。。。。。。。。。。。

三、注意嵌套規則

塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
li內可以包含div
塊級元素與塊級元素并列、內聯元素與內聯元素并列。

五、CSS選擇器

1.基礎選擇器

“選擇器”指明了{}中的“樣式”的作用對象，也就是"樣式"作用與網頁中的哪些元素

1.通用元素選擇器 *: 所有的標簽都變色

　　2.標簽選擇器：匹配所有使用p標簽的樣式 p{color:red}

　　3.id選擇器：匹配指定的標簽 #p2{color:red}

　　4.class類選擇器：誰指定class誰的變色，可選多個 .c1{color:red} 或者 div.c1{color:red}

#注意

可以對塊級標簽設置長寬

不可以對內聯標簽設長寬（它只會根據他的文字大小來變）

2.組合選擇器

1.后代選擇器 (不分層級，只讓p標簽變色) .c2 p{color:red}

2.子代選擇器（只在兒子層找） .c2>p{color:red}

3.多元素選擇器：同時匹配所有指定的元素 .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屬性具有多個空格分隔的值、其中一個值等于“val”的E元素 td[class~=”name”] { color:#f00; }

4.E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;}

5.E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}

6.E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}

4.偽類

anchor偽類：專用于控制鏈接的顯示效果

before after偽類

:before p:before 在每個<p>元素之前插入內容

:after p:after 在每個<p>元素之后插入內容

例：p:before{content:"hello";color:red;display: block;}

5.CSS優先級和繼承

css的繼承

繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。例如一個BODY定義了的顏色值也會應用到段落的文本中。

這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。

發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。　

此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

css的優先級

所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先后順序。

樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：

1 內聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；

2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100

3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10

4 統計選擇符中的HTML標簽名個數。 p －－－－－－－－－－－－－-－1

按這些規則將數字符串逐位相加，就得到最終的權重，然后在比較取舍時按照從左到右的順序逐位比較。

Web前端開發中，樹形級聯菜單，是一種常見且實用的界面交互組件。它不僅可以提供清晰的導航和大量信息分類展示，還能讓用戶更方便地進行操作和查詢。然而，除了其直觀的功能外，樹形級聯菜單，還可以被用于學習和應用CSS選擇器以及CSS技巧。本文將通過代碼和實例，分步驟地講解如何通過樹形級聯菜單，來理解和運用CSS選擇器與CSS技巧。

基本示例

接下來，我們通過上一篇文章的例子，來了解本文的信息點。

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;
}
/* 默認隱藏子項 */
#tree-menu ul {
    display: none;
}
/* 點擊節點展開子項 */
#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;
}

// 第一個子節點之后所有兄弟節點
#tree-menu li+li {
    border-top: 0;
}

#tree-menu label {
    display: block;
    padding: 0.5rem 1rem;
}

#tree-menu label:hover {
    background-color: aliceblue;
}
</style>

圓角樣式1

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>

圓角樣式2

li label{ }
這個示例表示：li元素下面所有層級的label
li>label{ }
這個示例表示：li元素孩子級層級的label

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 li:first-child,
#tree-menu li:first-child>label {
    border-radius: 10px 10px 0 0;
}

/* 最后一個子節點 設置底部圓角  */
#tree-menu li:last-child,
#tree-menu li:last-child>label {
    border-radius: 0 0 10px 10px ;
}

/* 只有唯一 一個子節點時，頂部底部都設置圓角 */
#tree-menu li:only-child,
#tree-menu li:only-child>label {
    border-radius: 10px ;
}

/* 
    展開時背景圓角修復 
    :first-child 第一個子節點

    :not(:only-child)非唯一子節點
    這里表示這個子節點有子項

*/
#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 鼠標在元素上面時
*/
#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;
}

/**
  如果有子項，添加展開或折疊的標記符號。
  默認折疊標記 
*/
#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表示沒有兄弟元素 
  不顯示標記
*/
#tree-menu li label:only-child::before {
    content: ' ';
}

/* 顯示展開標記 */
#tree-menu li.collapsed>label::before {
    content: '+';
}

到此，一個還比較美觀的樹形菜單，基本完成了。

但是，有朋友說，我要實現以下需求呢？

1、不要邊框；
2、保留縮進；
3、保留展開折疊標記；
4、橫向拉通選擇；

橫向拉通選擇樣式

CSS

#tree-menu label {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
}

#tree-menu label:hover {
    background-color: aliceblue;
}

/** 縮進拉通選擇*/
#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 li label::before {
    float: left;
    content: '-';
    width: 1.6rem;
    height: 1.2rem;
    text-align: center;
    line-height: 1.2rem;
    color: #333;
}

/** 
  :only-child表示沒有兄弟元素 
  不顯示標記
*/
#tree-menu li label:only-child::before {
    content: ' ';
}

/* 顯示展開標記 */
#tree-menu li.collapsed>label::before {
    content: '+';
}

如果層級很深，我不是得寫很多個li才能實現多級縮進？

比如：tree-menu li li li li li li li li li li li label{}

JavaScript方式

查找所有 label 元素，然后看 label 元素上面有多少個 li 元素，以此判斷所屬層級。

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、我不想寫多個li li li li li li li；
3、我不想寫多個.level1{} .level2{} .level3{}；
4、我想寫少量CSS代碼，來解決這個問題，一勞永逸；
5、我想它支持無限層級的縮進；

有這樣CSS代碼嗎？我怎么不知道？

你別說，還真有這樣得CSS代碼。

當然，這也是本文得重點，算一個CSS得小技巧吧。

counters() 簡介

CSS 函數 counters() 是一個嵌套計數器，返回表示指定計數器當前值的連接字符串。counters() 函數有兩種形式： counters(name, string) 或 counters(name, string, style) 。它通常和偽元素搭配使用，但是理論上可以在支持<string>值的任何地方使用。生成的文本是具有給定名稱的所有計數器的值，從最外層到最內層，之間由指定字符串分隔。計數器以指示的樣式呈現，如果未指定樣式，則默認為十進制。

先看一個例子：

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) ;
}

counters() 示例

通過上面的例子，我們看到了類似word的多級列表。此時很多朋友可能已經有思路了，那么我們將利用CSS這個特性，來實現上面的要求。

修改了部分樣式

#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屬性樣式


/** 縮進拉通選擇 修改前*/
/* #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;
    /* 把標記設置成透明 */
    color:transparent;
    /* 默認數字*/
    content: counters(listCounter, "");
}

完整的CSS

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/** 
折疊狀態與展開狀態樣的樣式
 */
#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;
}

/** 縮進拉通選擇*/
/* 修改后 */
#tree-menu,
#tree-menu ul {
    counter-reset: listCounter;
}

#tree-menu label {
    counter-increment: listCounter;
}

#tree-menu label::before {
    float: left;
    /* 將序號設置為透明 */
    color:transparent;
    /***/
    content: counters(listCounter, "");
}



/**
  如果有子項，添加展開或折疊的標記符號。
  默認折疊標記 
*/
#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表示沒有兄弟元素 
  不顯示標記
*/
#tree-menu li label:only-child::after {
    content: ' ';
}

/* 顯示展開標記 */
#tree-menu li.collapsed>label::after {
    content: '+';
}

通過樹形級聯菜單，學習CSS選擇器與CSS技巧，是一種非常有效的學習方法。我們不僅可以學會如何使用各種選擇器，來控制頁面元素，還能掌握一些實用的CSS技巧和概念。希望本文對您了解樹形級聯菜單、CSS選擇器和CSS技巧有所幫助，并能為您在Web前端開發中的工作提供一些啟發。

希望本文能夠對您有所幫助，感謝您的閱讀！

人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。

CSS 中，類選擇器（class selectors）是一種強大的選擇器類型，它們允許我們根據 HTML 元素的 class 屬性來選擇元素。在這篇文章中，我們將深入探討 class selectors 的各種優勢和巧妙使用方法。

優勢：

元素多顯示：通過使用類選擇器，我們可以將同一屬性的應用 Style 與某個類相對聯系，從而使一個類下的多個元素擁有相同的樣式，提高了編碼的效率。
項目可維護性：類選擇器可以實現在不同的上下文中通過修改類的定義，來動態更改樣式。這些類可以被任何 HTML 元素重用，從而降低冗余代碼和重復工作，提高了項目可維護性。
網站應用中的流程：在編寫和維護一個 Web 項目的過程中，通過類選擇器，你可以將樣式與HTML的內容和結構解耦。這使得類可以在不同頁面和模塊之間輕松重用，這增加了網站的靈活性并減小了維護代碼的困難。

巧妙用法：

引用和復雜選擇器：類選擇器可以與其他選擇器一起使用，以創建復雜的選擇器。例如，你可以將類選擇器與 id 選擇器和屬性選擇器一起使用，以選擇具有特定類和特定屬性的元素。
動態適應：通過為選擇器添加 JavaScript 事件，我們可以動態地更改類的顯示和應用，從而讓網站具有更強的交互性和響應能力。
CSS Reset：通過使用一個通用的類選擇器，我們可以將所有的 HTML 元素重置為默認樣式，這有助于統一üngabe，并解決)瀏覽器差異問題。

在線咨詢

上一篇：php采集網頁數據（php采集系統）
下一篇：網站建設完成后維護的內容包括哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS樣式之選擇器

#注意

這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。

css的優先級

基本示例

基礎樣式

層級樣式

邊框及選中樣式

圓角樣式1

圓角樣式2

節點標記樣式

橫向拉通選擇樣式

JavaScript方式

counters() 簡介

counters() 示例

完整的CSS

您的項目需求