CSS選擇器怎么使用 選擇器使用教程

css選擇器用于定位html元素并應用樣式。1.基礎選擇器包括元素、類、id和通用選擇器；2.組合選擇器包含后代、子、相鄰兄弟和通用兄弟選擇器；3.屬性選擇器根據屬性值選擇元素；4.偽類選擇器處理元素狀態；5.偽元素選擇器控制特定部分；6.否定偽類排除特定元素。優先級從高到低為!important、內聯樣式、id、類/屬性/偽類、元素/偽元素。優化方法包括避免通用選擇器、減少嵌套、使用類選擇器、合并規則和工具分析。高級用法有:is()、:where()、:has()和邏輯組合選擇器。響應式設計通過媒體查詢、設備方向和css變量實現。JavaScript交互通過queryselector()、修改style、操作類名和css變量完成，需注意性能。

css選擇器，簡單說，就是你告訴瀏覽器：“嘿，把所有符合這個規則的html元素，都給我套上這身CSS衣服！” 至于怎么用？嗯，這就得細細道來了。

解決方案

CSS選擇器是CSS規則的核心，它允許你精確地定位到HTML文檔中的元素，并應用相應的樣式。掌握好CSS選擇器，你就掌握了CSS的半壁江山。

立即學習“前端免費學習筆記（深入）”；

1. 基礎選擇器：簡單直接，但也很重要

• 元素選擇器 (Element Selectors)：直接使用HTML標簽名來選擇元素。比如，p 選擇所有段落，h1 選擇所有一級標題。這就像喊名字一樣直接，但缺點是范圍太廣，容易誤傷。

  p {   color: blue; /* 所有段落文字變藍色 */ }

• 類選擇器 (class Selectors)：通過html元素的class屬性來選擇元素。使用.符號開頭。這是最常用的選擇器之一，因為它允許你給多個元素應用相同的樣式，而不需要修改HTML結構。

  <p class="highlight">這段文字需要高亮顯示。</p>

  .highlight {   background-color: yellow; /* 所有class為"highlight"的元素背景變黃 */ }

• id選擇器 (ID Selectors)：通過HTML元素的id屬性來選擇元素。使用#符號開頭。ID選擇器具有最高的優先級，但應該謹慎使用，因為一個頁面中ID應該是唯一的。

  <h1 id="main-title">主要標題</h1>

  #main-title {   font-size: 2em; /* ID為"main-title"的元素字體大小變為2倍 */ }

• 通用選擇器 (Universal Selector)：使用*符號選擇所有元素。通常用于重置樣式或應用全局樣式。要小心使用，因為它會影響所有元素，性能開銷較大。

  * {   margin: 0;   padding: 0; /* 重置所有元素的margin和padding */ }

2. 組合選擇器：更精確的定位，更強大的控制

• 后代選擇器 (Descendant Selectors)：選擇指定元素的所有后代元素。使用空格分隔。比如，div p 選擇所有在div元素內的p元素。

  <div>   <p>這是div內的段落。</p>   <span><p>這也是div內的段落。</p></span> </div>

  div p {   font-style: italic; /* 所有div內的p元素字體變為斜體 */ }

• 子選擇器 (Child Selectors)：選擇指定元素的直接子元素。使用>符號分隔。比如，ul > li 選擇所有ul元素的直接子元素li。

  <ul>   <li>這是ul的直接子元素。</li>   <li><span>這也是ul的直接子元素。</span></li> </ul>

  ul > li {   list-style-type: square; /* 所有ul的直接子元素li的列表樣式變為方形 */ }

• 相鄰兄弟選擇器 (Adjacent Sibling Selectors)：選擇緊跟在指定元素后面的兄弟元素。使用+符號分隔。比如，h2 + p 選擇緊跟在h2元素后面的p元素。

  <h2>標題</h2> <p>緊跟在標題后面的段落。</p> <p>另一個段落。</p>

  h2 + p {   margin-top: 0; /* 緊跟在h2后面的p元素的上邊距設為0 */ }

• 通用兄弟選擇器 (General Sibling Selectors)：選擇指定元素后面的所有兄弟元素。使用~符號分隔。比如，h2 ~ p 選擇h2元素后面的所有p元素。

  <h2>標題</h2> <p>段落1。</p> <p>段落2。</p>

  h2 ~ p {   color: green; /* h2后面的所有p元素字體變為綠色 */ }

3. 屬性選擇器：根據元素的屬性值來選擇

• 簡單屬性選擇器 (Simple Attribute Selectors)：選擇具有指定屬性的元素。比如，a[href] 選擇所有具有href屬性的a元素。

  <a href="https://www.example.com">鏈接1</a> <a name="link2">鏈接2</a>

  a[href] {   color: red; /* 所有具有href屬性的a元素字體變為紅色 */ }

• 屬性值選擇器 (Attribute Value Selectors)：選擇具有指定屬性和值的元素。比如，input[type=”text”] 選擇所有type屬性值為text的input元素。

  <input type="text" name="username"> <input type="password" name="password">

  input[type="text"] {   border: 1px solid blue; /* 所有type為"text"的input元素邊框變為藍色 */ }

• 部分屬性值選擇器 (Partial Attribute Value Selectors)：

  • [attribute~=”value”]：選擇屬性值包含指定單詞的元素。
  • [attribute|=”value”]：選擇屬性值以指定值開頭，或者以該值后跟連字符“-”開頭的元素。
  • [attribute^=”value”]：選擇屬性值以指定值開頭的元素。
  • [attribute$=”value”]：選擇屬性值以指定值結尾的元素。
  • [attribute*=”value”]：選擇屬性值包含指定值的元素。

  <div class="message warning">警告消息</div> <div class="message error">錯誤消息</div> <div class="message">普通消息</div>

  div[class~="message"] {   padding: 10px;   border: 1px solid black; }  div[class*="error"] {   background-color: red;   color: white; }

4. 偽類選擇器：選擇元素的特殊狀態

偽類選擇器允許你選擇元素的特殊狀態，例如鼠標懸停、鏈接訪問等。

• :hover: 當鼠標懸停在元素上時應用樣式。

  a:hover {   color: orange; /* 鼠標懸停在鏈接上時字體變為橙色 */ }

• :active: 當元素被激活（例如，鼠標點擊）時應用樣式。

  button:active {   background-color: darkgray; /* 按鈕被點擊時背景變為深灰色 */ }

• :focus: 當元素獲得焦點（例如，通過Tab鍵導航）時應用樣式。

  input:focus {   border-color: green; /* 輸入框獲得焦點時邊框變為綠色 */ }

• :visited: 選擇已訪問的鏈接。

  a:visited {   color: purple; /* 已訪問的鏈接字體變為紫色 */ }

• :first-child: 選擇元素的第一個子元素。

  ul li:first-child {   font-weight: bold; /* 列表的第一個子元素字體加粗 */ }

• :last-child: 選擇元素的最后一個子元素。

  ul li:last-child {   border-bottom: none; /* 列表的最后一個子元素去除下邊框 */ }

• :nth-child(n): 選擇元素的第n個子元素。n 可以是數字、odd (奇數) 或 even (偶數)。

  tr:nth-child(even) {   background-color: #f2f2f2; /* 表格的偶數行背景變為淺灰色 */ }

• :nth-of-type(n): 選擇特定類型的第n個兄弟元素。

  p:nth-of-type(2) {   color: blue; /* 第二個p元素字體變為藍色 */ }

5. 偽元素選擇器：創造虛擬元素，增強樣式

偽元素選擇器允許你選擇元素的特定部分，或者創建虛擬元素。

• ::before: 在元素的內容之前插入內容。通常與content屬性一起使用。

  p::before {   content: "提示：";   font-weight: bold; }

• ::after: 在元素的內容之后插入內容。通常與content屬性一起使用。

  a::after {   content: " (鏈接)";   font-size: smaller; }

• ::first-line: 選擇元素的第一行文本。

  p::first-line {   font-size: 1.2em; }

• ::first-letter: 選擇元素的第一個字母。

  p::first-letter {   font-size: 2em;   float: left; }

• ::selection: 選擇用戶選擇的文本。

  ::selection {   background-color: yellow;   color: black; }

6. 否定偽類選擇器：排除特定元素

• :not(selector): 選擇不匹配指定選擇器的元素。

  :not(p) {   border: 1px solid red; /* 除了p元素，所有元素都添加紅色邊框 */ }

CSS選擇器優先級：理解權重，避免樣式沖突

CSS選擇器優先級決定了當多個規則應用于同一個元素時，哪個規則生效。優先級從高到低依次為：

1. !important: 強制應用該樣式，但應謹慎使用，因為它會破壞CSS的層疊性。
2. 內聯樣式 (Inline Styles)：直接在HTML元素中使用style屬性定義的樣式。
3. ID選擇器 (ID Selectors)：#id
4. 類選擇器 (Class Selectors)、屬性選擇器 (Attribute Selectors)、偽類選擇器 (Pseudo-classes)：.class、[attribute]、:hover
5. 元素選擇器 (Element Selectors)、偽元素選擇器 (Pseudo-elements)：p、::before
6. 通用選擇器 (Universal Selector)：*

當優先級相同時，后定義的規則會覆蓋先定義的規則。

CSS選擇器性能優化：提升網頁加載速度

• *避免使用通用選擇器 (``)**: 它會匹配所有元素，性能開銷很大。
• 避免過度嵌套的選擇器: 例如，div ul li a 這樣的選擇器會增加瀏覽器的查找時間。
• 使用類選擇器而不是ID選擇器: 類選擇器的性能通常比ID選擇器更好。
• 減少選擇器的數量: 合并相似的規則，減少CSS文件的體積。
• 使用瀏覽器開發者工具: 分析CSS選擇器的性能，找出瓶頸。

副標題1

CSS選擇器有哪些高級用法？如何提高選擇器的效率？

除了上述基礎和組合選擇器外，還有一些高級用法可以幫助你更精確地控制樣式：

• :is() 偽類: 允許你將多個選擇器組合在一起，簡化CSS代碼。

  :is(h1, h2, h3) {   color: blue; }  /* 等同于 */  h1, h2, h3 {   color: blue; }

• :where() 偽類: 與 :is() 類似，但 :where() 的優先級總是為 0，可以更容易地覆蓋樣式。

  :where(h1, h2, h3) {   color: blue; }

• :has() 偽類 (CSS Selectors Level 4): 選擇包含特定元素的元素。這個選擇器非常強大，但瀏覽器支持度還不夠完善。

  div:has(p) {   border: 1px solid black; /* 選擇包含p元素的div元素 */ }

• 邏輯組合選擇器 (CSS Selectors Level 4): 允許你使用 and、or、not 等邏輯運算符組合選擇器。這個選擇器功能非常強大，但瀏覽器支持度還不夠完善。

  /* 選擇同時具有class="message"和class="warning"的div元素 */ div.message:is(.warning) {   background-color: yellow; }

提高選擇器效率的關鍵在于：

• 減少選擇器的復雜性: 避免過度嵌套和使用復雜的屬性選擇器。
• 使用更具體的選擇器: 例如，使用類選擇器而不是元素選擇器。
• 避免在JavaScript中使用CSS選擇器: JavaScript選擇器的性能通常比CSS選擇器差。

副標題2

CSS選擇器在響應式設計中的應用？如何根據屏幕尺寸應用不同的樣式？

CSS選擇器在響應式設計中扮演著重要的角色，它們允許你根據不同的屏幕尺寸、設備類型等條件應用不同的樣式。

• 媒體查詢 (Media Queries)：使用 @media 規則來定義不同屏幕尺寸下的樣式。

  /* 當屏幕寬度小于600px時應用以下樣式 */ @media (max-width: 600px) {   body {     font-size: 14px;   } }  /* 當屏幕寬度大于等于600px且小于900px時應用以下樣式 */ @media (min-width: 600px) and (max-width: 900px) {   body {     font-size: 16px;   } }  /* 當屏幕寬度大于等于900px時應用以下樣式 */ @media (min-width: 900px) {   body {     font-size: 18px;   } }

• 設備方向 (Orientation)：根據設備的橫向或縱向方向應用不同的樣式。

  /* 當設備處于橫向模式時應用以下樣式 */ @media (orientation: landscape) {   body {     background-color: lightblue;   } }  /* 當設備處于縱向模式時應用以下樣式 */ @media (orientation: portrait) {   body {     background-color: lightgreen;   } }

• 使用CSS變量 (CSS Variables)：定義一些通用的樣式變量，然后在媒體查詢中修改這些變量的值。

  :root {   --main-font-size: 16px; }  body {   font-size: var(--main-font-size); }  @media (max-width: 600px) {   :root {     --main-font-size: 14px;   } }

副標題3

CSS選擇器與JavaScript的交互？如何使用JavaScript動態修改CSS樣式？

CSS選擇器不僅可以用于定義靜態樣式，還可以與JavaScript結合，實現動態修改樣式的效果。

• 使用querySelector()和querySelectorAll()方法: 這兩個方法允許你使用CSS選擇器來選擇HTML元素。

  // 選擇第一個p元素 const paragraph = document.querySelector('p');  // 選擇所有class為"highlight"的元素 const highlightedElements = document.querySelectorAll('.highlight');

• 修改元素的style屬性: 你可以直接修改元素的style屬性來改變其樣式。

  paragraph.style.color = 'red'; // 將第一個p元素的字體顏色改為紅色  highlightedElements.forEach(element => {   element.style.backgroundColor = 'yellow'; // 將所有class為"highlight"的元素背景顏色改為黃色 });

• 添加或刪除類名: 你可以使用classList屬性來添加或刪除類名，從而改變元素的樣式。

  paragraph.classList.add('bold'); // 給第一個p元素添加"bold"類  highlightedElements.forEach(element => {   element.classList.remove('highlight'); // 移除所有class為"highlight"的元素的"highlight"類 });

• 使用CSS變量: 你可以使用JavaScript來修改CSS變量的值，從而改變整個頁面的樣式。

  document.documentElement.style.setProperty('--main-font-size', '20px'); // 將根元素的"--main-font-size"變量值改為20px

在使用JavaScript動態修改CSS樣式時，需要注意性能問題。頻繁地修改樣式可能會導致頁面卡頓。建議盡量使用類名來控制樣式，而不是直接修改style屬性。