偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

一篇帶你了解全新的的 CSS 選擇器 ：Has()

作者：CUGGZ
開發(fā) 前端
在CSS中，我們無法根據(jù)元素中是否存在特定的元素來設(shè)置父元素的樣式，要想實現(xiàn)這一點，就必須創(chuàng)建CSS類，并根據(jù)需要進(jìn)行類的切換。

大家好，我是 CUGGZ。

你有沒有想過使用CSS選擇器來檢查父元素中是否存在特定的元素？例如，如果一個卡片組件中有圖片，就給它添加一個display:flex。這以前在CSS中是無法實現(xiàn)的，而全新的 CSS 選擇器:has就可以幫助我們選擇包含特定元素的父元素。下面來看看這個全新的 CSS 選擇器吧！

:has 選擇器概述

在CSS中，我們無法根據(jù)元素中是否存在特定的元素來設(shè)置父元素的樣式，要想實現(xiàn)這一點，就必須創(chuàng)建CSS類，并根據(jù)需要進(jìn)行類的切換。來看下面的例子：

圖片

這里有兩種卡片：包含圖片和不包含圖片。在CSS中需要這樣做：

/* 有圖片的卡片 */
.card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 沒有圖片的卡片 */
.card-plain {
  display: block;
  border-top: 3px solid #7c93e9;
}
<!-- 有圖片的卡片 -->
<div class="card">
  <div class="card-image">
    <img src="awameh.jpg" alt="">
  </div>
  <div class="card-content">
    卡片內(nèi)容
  </div>
</div>

<!-- 沒有圖片的卡片 -->
<div class="card card-plain">
  <div class="card-content">
    卡片內(nèi)容
  </div>
</div>

這里創(chuàng)建了一個類card-plain，專門用于沒有圖片的卡片，在沒有圖片時就不需要flex布局。如果使用 CSS 中的父選擇器 :has 就不需要再寫這個類，只需要使用它來檢查卡片中是否包含.card-image即可：

.card:has(.card-image) {
  display: flex;
  align-items: center;
}

?根據(jù) CSS 規(guī)范，:has 選擇器可以檢查父元素是否包含至少一個元素，或者一個條件，例如輸入是否獲取到焦點。

:has 選擇器不僅可以檢查父元素是否包含特定的子元素，還可以檢查一個元素后面是否跟有另一個元素：

.card h2:has(+ p) { }

這將檢查 <h2> 元素是否直接跟在 <p> 元素之后。

我們也可以將它與表單元素一起使用來檢查輸入是否獲取到了焦點：

form:has(input:focused) {
    background-color: lightgrey;
}

:has 選擇器使用示例

下面來看看一些使用:has選擇器實現(xiàn)頁面效果的案例吧！

1、標(biāo)題樣式

當(dāng)處理章節(jié)標(biāo)題時有兩種情況，一種是只包含標(biāo)題，另一種包含標(biāo)題和鏈接。

圖片

根據(jù)是否有鏈接來定義不同的樣式：

<section>
  <div class="section-header">
    <h2>Latest articles</h2>
    <a href="/articles/>See all</a>
  </div>
</section>
.section-header {
  display: flex;
  justify-content: space-between;
}

.section-header:has(> a) {
  align-items: center;
  border-bottom: 1px solid;
  padding-bottom: 0.5rem;
}

這里使用了:has(> a)，它表示只選擇直接子元素。

2、卡片布局

有兩種類型的卡片操作：一種只有一個操作（鏈接），另一種具有多個操作（保存、分享等）。

圖片

當(dāng)圖片具有多個操作時需要給這些操作添加display: flex，可以這樣來實現(xiàn):

<div class="card">
    <div class="card-thumb><img src="cool.jpg"/></div>
    <div class="card-content">
        <div class="card-actions">
            <div class="start">
                <a href="#">Like</a>
                <a href="#">Save</a>
            </div>
            <div class="end">
                <a href="#">More</a>
            </div>
        </div>
    </div>
</div>
.card-actions:has(.start, .end) {
  display: flex;
  justify-content: space-between;
}

3、卡片圓角

根據(jù)是否有圖片來重置卡片組件的border-radius。

圖片

.card:not(:has(img)) .card-content {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.card img {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.card-content {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

實現(xiàn)效果如下：

圖片

4、過濾組件

有一個具有多個選項的組件，當(dāng)它們沒有被選中時，不顯示重置按鈕。當(dāng)選中其中一個選項時，顯示重置按鈕。

圖片

可以使用 :has選擇器輕松實現(xiàn)這個功能：

.btn-reset {
    display: none;
}

.multiselect:has(input:checked) .btn-reset {
    display: block;
}

5、顯示或隱藏表單元素

有時可能需要根據(jù)之前的選擇來顯示特定的表單字段。在下面的例子中，當(dāng)下拉框選中“other”字段時，就展示 other reason 輸入框：

圖片

使用 CSS :has 選擇器就可以檢查選擇菜單是否選擇了 other 字段，并在此基礎(chǔ)上顯示 other reason 輸入框：

.other-field {
    display: block;
}

form:has(option[value="other"]:checked) .other-field {
    display: block;
}

6、導(dǎo)航欄

有一個帶有子菜單的導(dǎo)航欄，當(dāng)鼠標(biāo)懸停在菜單項上時展示子菜單：

圖片

我們需要做的就是根據(jù)是否展示子菜單來顯示或隱藏右側(cè)的箭頭。可以使用:has 選擇器輕松實現(xiàn)這一點，這里只需檢查li元素中是否包含ul即可：

li:has(ul) > a:after {
    content: "";
}

7、強制警報

在某些儀表板中，可能需要用戶必須注意重要警報。在這種情況下，擁有頁內(nèi)警報可能還不夠。例如，在這種情況下，可能會為標(biāo)題元素添加紅色邊框和暗紅色背景色。這樣會增加用戶快速注意到警報的可能性。圖片

CSS :has 就可以檢查.main元素是否有警報。如果有，將以下樣式添加到標(biāo)題中：

.main:has(.alert) .header {
    border-top: 2px solid red;
    background-color: #fff4f4;
}

8、切換配色方案

可以使用 CSS :has 來更改網(wǎng)站的配色方案。例如，如果有多個使用 CSS 變量構(gòu)建的主題，可以通過<select>菜單來進(jìn)行切換。

html {
    --color-1: #9e7ec8;
    --color-2: #f1dceb;
}

圖片

當(dāng)選擇另一個主題時，CSS 變量將被更改：

html:has(option[value="blueish"]:checked) {
    --color-1: #9e7ec8;
    --color-2: #f1dceb;
}

顯示效果如下：

圖片

9、帶有圖標(biāo)的按鈕

有一個默認(rèn)的按鈕樣式。當(dāng)按鈕中包含圖標(biāo)時，使用 flexbox 來居中對齊按鈕的內(nèi)容：

圖片

.button:has(.c-icon) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

10、多個按鈕

有一組操作按鈕，如果超過 2 個按鈕，則最后一個按鈕顯示在右側(cè)：

圖片

可以使用數(shù)量查詢來實現(xiàn)這一點。下面的 CSS 將檢查按鈕的數(shù)量是否為 3 或更多。如果是，則最后一個 flex 項目將使用 margin-left: auto：

.btn-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
  
.btn-group:has(.button:nth-last-child(n + 3)) .button:last-child {
    margin-left: auto;
}

11、根據(jù)項目數(shù)更改網(wǎng)格

使用 CSS grid 布局中，可以使用 minmax() 功能創(chuàng)建真正響應(yīng)式和自動調(diào)整大小的網(wǎng)格項。然而，這可能還不夠，我們還想根據(jù)項目數(shù)量來改變網(wǎng)格。

圖片

.wrapper {
    --item-size: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--item-size), 1fr));
    gap: 1rem;
}

當(dāng)有 5 個項目時，最后一個將換行：

圖片

可以通過檢查.wrapper中是否有 5 個或更多項目來解決這個問題。同樣，這是使用到了數(shù)量查詢的概念。

.wrapper:has(.item:nth-last-child(n + 5)) {
    --item-size: 120px;
}

實現(xiàn)效果如下：

圖片

瀏覽器支持

:has 選擇器的支持情況如下：

圖片

可以使用 CSS 中的@supports規(guī)則來判斷瀏覽器是否支持該選擇器：

@supports selector(:has(*)) {
  
}

參考：https://ishadeed.com/article/css-has-parent-selector/

責(zé)任編輯：姜華 來源： 前端充電寶
CSShas()
相關(guān)推薦

2020-11-17 11:10:21

CSS選擇器HTML

2023-06-28 15:04:59

CSSHTML

2023-08-01 14:34:12

HTMLCSS

2022-03-04 09:31:41

CSS前端屬性選擇器

2022-05-05 07:40:07

maskCSS

2020-10-27 08:12:33

CascadingSt

2021-07-08 06:30:03

Linux CPULinux 系統(tǒng)

2021-08-11 07:02:21

npm包管理器工具

2021-05-20 06:57:16

RabbitMQ開源消息

2022-01-17 08:56:05

CSS 技巧代碼重構(gòu)

2021-01-25 05:39:54

Css前端Border

2021-04-07 06:11:37

Css前端CSS定位知識

2021-05-31 09:30:36

Css前端CSS 特效

2020-11-03 19:18:28

CSS對齊文本

2022-02-18 08:54:21

docker操作系統(tǒng)Linux

2021-06-24 10:24:57

Linux輸入輸出設(shè)備Interface

2022-04-13 21:19:56

Prometheusruler 組件

2021-05-20 09:02:59

CSS單位長度

2022-02-15 09:31:43

透明度CSS

2020-12-18 05:40:37

CSS clearHtml
點贊
收藏

51CTO技術(shù)棧公眾號