整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
載說明：原創不易，未經授權，謝絕任何形式的轉載
最近的:has()選擇器允許您對父元素和其他祖先應用樣式，本文將向您展示如何在Web應用程序開發中使用它。
在CSS的世界中，選擇器是驅動我們在網頁上看到的美麗且響應式設計的工作的馬。它們允許開發者根據元素的屬性、位置和關系來選擇和樣式化HTML元素。
一個較新的CSS選擇器/偽類被稱為 :has ，它允許您選擇每個具有與您提供給 :has() 函數的選擇器匹配的子元素的元素。它在CSS中是一個重要的解決方案，不僅僅是一個簡單的“父級”選擇器。
使用 :has() 選擇器，您可以將樣式應用于父元素或祖先HTML元素。這樣我們就可以擴展選擇器的范圍，包括一個或多個兄弟或子元素。
在本文中，我們將討論CSS選擇器以及它們在代碼中的多個使用示例。
:has() 選擇器是一種CSS偽類，允許您選擇包含特定子元素的元素。它是一個強大的CSS工具，您可以用于以下目的：
:has() 選擇器可以與任何有效的CSS選擇器一起使用，包括其他偽類。這使得它成為一個非常多功能的工具，可以以各種方式使用。
這是一個關于如何使用 :has() 選擇器的小片段
/* Select all <div> elements that contain a <p> element. */
div:has(p) {
background-color: blue;
}
/* Select all <div> elements that contain a child element with the class "important". */
div:has(.important) {
border: 1px solid black;
}
/* Select all <div> elements that contain at least two child elements. */
div:has(> * + *) {
padding: 10px;
}上面的代碼展示了如何使用 :has 選擇器的實際示例。但在我們深入使用 :has 選擇器之前，讓我們先來看一下為什么選擇器很重要。
要開始這個項目，你可以從這個GitHub倉庫克隆起始代碼。完成的倉庫也在這個倉庫中，但你需要使用起始代碼來跟隨本教程。
https://github.com/joycefoster642/-has-css-project
上面的圖片展示了我們的項目在瀏覽器上啟動時的樣子。
注意：該項目只是一個簡單的類似博客的演示，用于展示 :has 偽類的一般用法。
以前，開發者只能選擇前進，但是現在有了 :has 選擇器，你現在也可以選擇后退。
現在，我們要選擇一個元素的父級。過去，通常是這樣做的：
article + article {
background-color: pink;
}正如你所注意到的，第二和第三篇文章的顏色發生了變化。這是因為它們相鄰。所以，它選擇了前面而不是后面。現在，讓我們用 :has 選擇器來反向進行操作。
article:has(+ article) {
background-color: coral;
}在上面的代碼中，我們只是簡單地說，如果文章有相鄰的文章，選擇前兩篇文章。
現在，請注意這次選擇了第一篇和第二篇文章。
使用 :has ，我們不僅可以選擇父元素，還可以選擇子元素。
article:has(span) .bold {
background-color: lightyellow;
}
article:has(span) .italic {
text-decoration: underline;
}在 index.html 文件中，我們使用 span 為文章2和3應用了一個加粗和斜體的類。在我們的CSS文件中，我們使用 article:has(span) 語法選擇了我們的 span 。以下是結果：
在這里，您可以看到對第二和第三篇文章中的粗體和斜體應用的更改。我們不僅選擇了文章，還選擇了 span 類別應用的內容。
在本節中，我們將介紹如何使用 :has 偽類與 :not 。
article:not(:has(span)) {
background-color: yellowgreen;
}以下是結果：
只會改變沒有 span 類的文章。:has 選擇器還支持 0R 邏輯條件。
article:has(p, .button) {
background-color: royalblue;
}以下是結果：
在這里，我們可以選擇一個帶有 OR 的段落的文章，或者選擇一個帶有 button 類的任意文章。這三篇文章被選擇是因為它們都有一個 p 的HTML標簽。但是如果我們移除 p 標簽，只有最后一個帶有“buy now” button 類的文章會保持著顏色。
在本節中，我們將探討使用 :has 選擇器時的更多實際用例和示例。
導航菜單示例
這將引導我們進入我們項目的下一部分，它看起來是這樣的：
在這里，我們將鼠標移到位置上，您可以看到當我們將鼠標懸停在位置上時，我們擁有的不同位置。
當我們不懸停在位置和員工上時，您會注意到根本沒有任何下拉菜單的指示。如果我們為此使用修飾類，我們將不得不手動進入HTML文件并編寫代碼。然而，我們可以通過 :has 偽類來實現這一點。
.nav__item:has(.nav__submenu)::after {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f150";
margin-left: 1rem;
}在上面的代碼中，我們說，如果 .nav__item 里面有 .nav__submenu ，則只將設計應用于前兩個導航圖標。以下是結果：
我們可以用JavaScript創建一個模態框，但現在我們也可以使用 :has 選擇器來實現。下面的示例將帶我們進入項目的下一個部分，效果如下：
當復選框被選中時，沒有任何反應。但是我們可以通過 :has 偽類輕松實現某些操作。
.awesome:has(.awesome__terms:checked) {
display: none;
}.awesome 類是我們的模態框。然后我們說如果我們有 .awesome__terms: checked ，再次點擊復選框時讓下一頁顯示出來。
這是另一個快速示例，展示了如果選中了某個選項，我們可以如何應用它。
.three:has(.lightswitch:checked) {
background-color: var(--COLOR);
color: var(--BGCOLOR);
}一旦我們應用上述代碼并點擊“切換到暗模式”，下面是結果：
現在，您可以無縫切換淺色和深色模式。
我們的最后一個例子將引導我們進入項目的這一部分，看起來像這樣：
上面的圖像顯示了包含文本“名稱”和文本輸入的 label 。現在，我們要選擇相反的東西。以前，我們只能向前選擇，所以 label 必須在文本 input 之后。現在，我們可以根據 input 中的內容更改 label 。
<div>
<label for="name">Name:</label>
<br />
<input
class="name"
type="text"
name="name"
id="name"
required
pattern="^\[A-Z\][A-z]{2,}"
/>
</div>
在我們上面的代碼中，我們對 index.html 應用了一個模式。在這里，我們有一個 required pattern ，其中的正則表達式表示文本必須以大寫字母開頭，并且至少為3個字符。在我們的 style.css 中，我們包含了以下代碼
label:has(~ .name:valid)::after {
content: '??';
color: limegreen;
margin-left: 1rem;
font-size: 3rem;
}以下是結果：
名字“Joyce”符合首字母大寫且最多三個單詞的要求，因此出現了綠色的勾號。
既然我們已經到了教程的結尾，希望你對 CSS 選擇器/偽類有所了解。
CSS :has 選擇器提供了一種創新的方法來解決網頁開發中的復雜樣式挑戰。在本文中，我們探討了這個強大選擇器的功能和潛在用例，它允許我們根據元素的后代來定位目標元素。
通過利用 :has 選擇器，網頁開發人員可以提高他們的CSS代碼的效率和靈活性，簡化選擇過程，減少不必要的類和嵌套結構的需求。
這個選擇器使開發人員能夠創建更清晰、更易于維護的代碼，同時保持HTML結構的完整性。
由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。
vue3實現一個區域多選的選擇框。
用戶需求是可以選擇服務區域，本來想找個省市縣級聯的一個選擇框就好了，但是又要求多選，而且是用戶自己給出區域，無奈寫一個，特記錄下，順便幫助后來者。
效果展示
<template>
<div class="form-item">
<label for="city" class="form-label">服務區域</label>
<span>
<span style="background-color: rgb(245,247,249);margin-right: 5px;" v-for="item in citys" :key="item">{{
item.name }}</span>
<span @click="ClickAddCity" style="color: #0bbfbc;">點擊添加</span>
</span>
<!-- 顯示/隱藏部分 -->
<div ref="citysDom" class="citysbox">
<div class="citysbox-top">
<div class="top-left">
<label for="city" class="form-label1">省份：</label>
<select required id="city" name="city" class="form-input form-input-select"
style="width: auto;color: #303030;" v-model="provinceIndex">
<option v-for="(item, index) in Provinces" :key="index" :value="index">
{{ item.name}} </option>
</select>
</div>
<div class="top-right">
<button type="button" class="btn-close" @click="ClickAddCity">關閉</button>
<button type="button" class="btn-confirm" @click="ClickReastBtn">清空</button>
<button type="button" class="btn-confirm" @click="ClickAddCity">確認</button>
</div>
</div>
<!-- 城市內容部分 -->
<div class="citysbox-body">
<div v-for="item in Provinces[provinceIndex].city" :key="403 Forbidden"
:class="citys.includes(item) ? 'box-item is-selected' : 'box-item'"
@click="SelectChange(item, $event)">
{{ item.name }}</div>
</div>
</div>
</div></template><script setup>
import { ref } from 'vue';
// 省市信息
const Provinces=[
{
"id": 24,
"name": "北京市",
"city": [
{
"id": 268,
"name": "東城區",
"province": 24
},
{
"id": 269,
"name": "西城區",
"province": 24
}
]
},
{
"id": 9,
"name": "福建省",
"city": [
{
"id": 109,
"name": "福州市",
"province": 9
},
{
"id": 110,
"name": "廈門市",
"province": 9
},
{
"id": 116,
"name": "龍巖市",
"province": 9
}
]
}
]
// 添加服務區域相關
var citysDom=ref() // dom對象
var provinceIndex=ref(0) // 當前選擇獲取值
var citys=ref([]) // 已選擇城市
// 點擊添加時顯示地址選擇div
function ClickAddCity() {
if (citysDom.value.style.display !=='block')
citysDom.value.style.display='block';
else citysDom.value.style.display='none';
}
// 選中地址
function SelectChange(item, e) {
let domClass=e.currentTarget.getAttribute("class")
// 判斷item的class區別兩種情況，一種是點擊未選中的item選中 , 一種是點擊已選中的取消選中
if (domClass=="box-item") {
e.currentTarget.className="box-item is-selected"
// 將選中對象添加到citys列表中
citys.value.push(item)
} else {
e.currentTarget.className="box-item"
// 將取消選中對象從citys列表中去除
citys.value=citys.value.filter(val=> val.id !=403 Forbidden)
}
console.log('citys:', citys.value)
}
// 清空地址區域
function ClickReastBtn() {
citys.value=[]
let items=document.getElementsByClassName("is-selected");
console.log('length',items.length);
console.log('items:',items, typeof(items));
// 清空已選擇的樣式
Array.prototype.forEach.call(items, function (item) {
item.className="box-item"
});
}
</script><style scoped>
.form-item {
margin-right: 24px;
margin-bottom: 24px;
}
.form-label {
height: 14px;
font-size: 14px;
color: #39475A;
letter-spacing: 0;
text-align: right;
line-height: 14px;
font-weight: 400;
margin-right: 12px;
}
.citysbox {
width: 700px;
max-width: 750px;
min-width: 360px;
padding: 10px;
min-height: 100px;
display: none;
position: absolute;
background: rgb(245, 247, 249);
border-radius: 10px;
}
.citysbox-top{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.citysbox-body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box-item {
margin: 10px 10px 0 0;
border: rgb(197, 208, 223) solid 1px;
border-radius: 4px;
padding: 3px;
}
.is-selected {
border: rgb(11, 192, 188) solid 1px;
color: rgb(11, 192, 188);
}</style>內容已經說得比較詳細了，特此記錄
如對你有所幫助的話可以幫我點個贊，感謝
、后代選擇器的定義
在 CSS 中，后代選擇器用于選擇具有特定父元素的元素。它們以符號 “>” 表示。
二、后代選擇器的語法
后代選擇器的語法如下：
css
parent > child {}
三、后代選擇器的使用
后代選擇器可用于：
* 選擇嵌套的子元素。
* 限制選擇器的范圍。
四、后代選擇器的局限性
* 它們僅選擇直接子元素，不包括孫子元素。
* 它們會選擇所有具有特定父元素的子元素。
五、后代選擇器的最佳實踐
* 盡量避免使用后代選擇器，因為它們會導致代碼過度復雜。
* 考慮使用其他選擇器，例如通配符或class選擇器。
六、后代選擇器示例
css
nav > ul > li {}
此代碼選擇具有 nav 元素的直接子元素 ul，并且 ul 元素的直接子元素 li。
七、結論
后代選擇器是 CSS 中一個強大的工具，可以用于選擇嵌套的子元素。然而，要記住他們的局限性，并使用其他選擇器來提高代碼可讀性和可維護性。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
