CSS選擇器的新用法詳解-css教學-PHP中文網

首頁

web前端

css教學

CSS選擇器的新用法詳解

小云云

Feb 05, 2018 am 10:18 AM

css 選擇器

現在，預處理器(如sass)似乎已經成為開發CSS的標配，正如幾年前jQuery是開發JS的標配一樣。 JS的querySelector借鑒了jQuery的選擇器思想，CSS選擇器也藉鑒了預處理器的變數定義、選擇器巢狀、程式碼區塊重用等常用功能。本文將詳細介紹CSS選擇器的新用法。

變數

　　一般地，我們在進行web開發時，會有一套變數定義規範，以sass為例，如下圖

// 颜色定义规范
$color-background : #222
$color-background-d : rgba(0, 0, 0, 0.3)
$color-highlight-background : #333
//字体定义规范
$font-size-small : 12px
$font-size-medium : 14px
$font-size-large : 18px

登入後複製

　　而CSS變數的語法如下

【宣告變數】

　　變數必須以--開頭。例如--example-variable: 20px，意思是將20px賦值給--example-varibale變數

　　可以將聲明變數的語句置於任何元素內，如果要設定全域變量，則可以設定為: root、body或html

:root{--bgColor:#000;}

登入後複製

　　變數宣告就像普通的樣式宣告語句一樣，也可以使用內嵌樣式

<body style="--bgColor:#000">

登入後複製

【使用變數】

　　使用var()函數使用變量，並且可以使用在任意的地方。例如：var(--example-variable)會回傳--example-variable所對應的值

<body style="--bgColor:#000;">
    <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p>    
</body>

登入後複製

　　var()函數還有一個可選參數，用來設定預設值，當變數無法取得值時，則使用預設值

<p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p>

登入後複製

　　[注意]關於CSS變數的詳細用法移步至此

@apply

　　介紹@apply之前，先介紹一下sass中的混合巨集@mixin，指可以重複使用的程式碼區塊

#　　比如，常見的文字溢出隱藏重複使用

@mixin overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
p {
    @include  overflow-ellipsis;
}

登入後複製

　　而應用規則集@apply也是實現類似的功能。與var()相比，@apply是引用樣式的集合，而var()則是引用一個單獨的樣式值

:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

登入後複製

自訂選擇器

　　自訂選擇器透過@custom-selector來定義，後面跟著一個:--接著是自訂選擇器的名稱，後面是需要定義的選擇器，多個用逗號隔開

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

登入後複製

　　這樣，:--heading就成為一個可以使用的選擇器

:--heading{
  margin: 0;
}
h1, h2, h3, h4, h5, h6｛
   margin: 0; 
｝

登入後複製

　　上面兩段程式碼的效果相同

選擇器巢狀

　　CSS規則包含許多重複的內容

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

登入後複製

　　使用巢狀語法後，程式碼如下

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

登入後複製

　　當使用巢狀樣式規則時，必須能夠引用由父規則相符的元素; 畢竟是整個巢狀點。為了達到這個目的，這個規範定義了一個新的選擇器，即嵌套選擇器，寫成ASCII符號＆

　　當在嵌套樣式規則的選擇器中使用時，嵌套選擇器表示由父規則匹配的元素。在任何其他情況下使用時，它什麼都不代表。（也就是說，它是有效的，但不匹配任何元素）

　　[注意]&嵌套選擇符的兩種錯誤寫法如下所示

.foo {
  color: red;
  .bar & { color:blue; }
}
.foo {
  color: red;
  &.bar, .baz { color: blue; }
}

登入後複製

【@nest】

　　為了解決上面的嵌套選擇符&的脆弱，可以使用@nest選擇符，@nest可適用範圍更廣，只要與嵌套選擇符&共同作用即可

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   .foo > .bar { color: blue; }

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   .parent .foo { color: blue; }

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   :not(.foo) { color: blue; }

　　[注意]@nest选择符的两种错误写法如下所示

.foo {
  color: red;
  @nest .bar {
    color: blue;
  }
}
.foo {
  color: red;
  @nest & .bar, .baz {
    color: blue;
  }
}

登入後複製

最後

#　　遺憾地是，除了CSS變數variable可以在新版本下使用外，其他CSS選擇器的新用法目前都沒有瀏覽器支援。但是，CSS後處理器postcss中的cssnext插件可以解決所有問題

　　就像cssnext官網說的一樣，今天就開始使用明天的CSS語法

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7545

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。