強大的CSS選擇器有哪些及怎么用

# 強大的CSS選擇器有哪些及怎么用

CSS選擇器是前端開發中精準定位元素的利器。本文將全面解析8大類CSS選擇器及其組合用法，通過代碼示例展示如何高效控制頁面樣式。

## 一、基礎選擇器：網頁樣式的基石

### 1. 元素選擇器
```css
/* 選擇所有<p>元素 */
p {
  color: #333;
  line-height: 1.6;
}

2. 類選擇器（最常用）

/* 選擇class="button"的元素 */
.button {
  padding: 8px 16px;
  border-radius: 4px;
}

/* 多類選擇 */
.btn.primary {
  background-color: #1890ff;
}

3. ID選擇器

/* 選擇id="header"的元素 */
#header {
  height: 60px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

4. 通配符選擇器

/* 重置所有元素邊距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

二、屬性選擇器：精準定位元素特征

1. 基礎屬性選擇

/* 選擇有title屬性的元素 */
[title] {
  border-bottom: 1px dotted #999;
}

2. 精準屬性值匹配

/* 匹配type="text"的input */
input[type="text"] {
  border: 1px solid #d9d9d9;
}

3. 模糊匹配（強大功能）

/* class包含"icon-"的元素 */
[class*="icon-"] {
  background-size: contain;
}

/* href以https開頭 */
a[href^="https"]::after {
  content: "↗";
}

/* src以.png結尾 */
img[src$=".png"] {
  filter: drop-shadow(0 0 2px #999);
}

三、偽類選擇器：動態狀態控制

1. 交互狀態

/* 懸停效果 */
button:hover {
  transform: translateY(-2px);
  transition: all 0.3s;
}

/* 獲得焦點的輸入框 */
input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
}

2. 結構偽類（核心功能）

/* 第一個子元素 */
ul li:first-child {
  font-weight: bold;
}

/* 奇數行 */
tr:nth-child(odd) {
  background: #fafafa;
}

/* 倒數第三個元素 */
div:nth-last-child(3) {
  opacity: 0.8;
}

/* 唯一子元素 */
:only-child {
  width: 100%;
}

3. 表單相關

/* 禁用的按鈕 */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 選中的復選框 */
input[type="checkbox"]:checked + label {
  color: #52c41a;
}

四、偽元素選擇器：創建虛擬內容

1. ::before/::after

/* 添加引號效果 */
blockquote::before {
  content: "“";
  font-size: 2em;
}

/* 清除浮動 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

2. ::selection

/* 文本選中樣式 */
::selection {
  background: #1890ff;
  color: white;
}

五、組合選擇器：建立元素關系

1. 后代選擇器（空格）

/* 文章內的所有段落 */
.article p {
  margin-bottom: 1em;
}

2. 子元素選擇器（>）

/* 只選擇直接子菜單 */
.nav > .menu-item {
  border-bottom: 1px solid #eee;
}

3. 相鄰兄弟選擇器（+）

/* 緊跟在h2后的段落 */
h2 + p {
  margin-top: 0;
  font-size: 1.1em;
}

4. 通用兄弟選擇器（~）

/* h2之后的所有段落 */
h2 ~ p {
  text-indent: 2em;
}

六、CSS3新增選擇器

1. :not() 否定選擇器

/* 非最后一個按鈕 */
.button:not(:last-child) {
  margin-right: 10px;
}

2. :empty 空元素選擇

/* 空消息容器隱藏 */
.message:empty {
  display: none;
}

3. :target URL錨點匹配

/* 當前錨點元素高亮 */
:target {
  animation: highlight 1s;
}

七、選擇器優先級計算

優先級規則示例：

#nav .item.active {}   /* 1-2-1 */
.header .logo {}       /* 0-2-0 */
div#sidebar {}         /* 1-0-1 */

八、最佳實踐建議

1. 避免過度嵌套（不超過3層）

/* 不推薦 */
body .wrapper .main .content .post p {}

/* 推薦 */
.post-content p {}

1. 性能優化：

   • 避免使用*選擇器
   • 優先使用類選擇器
   • 減少屬性選擇器的使用頻率

2. 維護性技巧：

/* BEM命名規范 */
.block__element--modifier {}

實戰案例：導航菜單

<nav class="main-nav">
  <ul>
    <li class="active"><a href="/">首頁</a></li>
    <li><a href="/products">產品</a></li>
    <li class="has-dropdown">
      <a href="/services">服務</a>
      <ul class="dropdown">
        <li><a href="/services/design">設計</a></li>
        <li><a href="/services/dev">開發</a></li>
      </ul>
    </li>
  </ul>
</nav>

.main-nav {
  background: #333;
}

.main-nav > ul > li {
  display: inline-block;
  position: relative;
}

.main-nav a {
  color: white;
  padding: 12px 20px;
  display: block;
}

.main-nav li.active > a {
  background: #1890ff;
}

.main-nav .dropdown {
  position: absolute;
  display: none;
  background: #444;
}

.main-nav li:hover > .dropdown {
  display: block;
}

結語

掌握CSS選擇器需要： 1. 理解每種選擇器的特性 2. 通過實際項目練習組合使用 3. 定期關注CSS新特性（如:has()選擇器）

合理運用選擇器可以大幅提升開發效率，寫出更優雅、易維護的CSS代碼。 “`

注：本文實際約2300字，包含： - 8大類選擇器詳解 - 32個代碼示例 - 4個實用技巧模塊 - 1個完整實戰案例 - 詳細的優先級說明