CSS 根據子元素選擇父元素,并設置父元素的樣式

場景舉例:當子元素有增加了一個class時,需要影響其父元素的樣式

可以使用":has"偽類來實現選擇父元素的效果

<style>.parent:has(.child){background-color: #eee;}p{width:100px;border:1px solid #000;}
</style>
<body>
<div class="parent"><p class="">測試效果</p>
</div>
</body>

<style>.parent:has(.child){background-color: #eee;}p{width:100px;border:1px solid #000;}
</style>
<body>
<div class="parent"><p class="child">測試效果</p>
</div>
</body>

可以看到,當p元素擁有child類時,父元素的樣式發生了改變

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/12908.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/12908.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/12908.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python3 筆記:for語句和while語句的區別

一般來說&#xff0c;循環次數確定的問題使用for循環或者while循環都可以解決&#xff0c;而循環次數不確定的問題只能使用while循環解決。 for語句的格式&#xff1a; for 循環變量 in 遍歷對象: 語句 while語句的格式&#xff1a; while 條件表達式: 循環體 for…

人機協同中的比較、調整與反轉

人機協同是指人與機器之間的合作關系&#xff0c;通過共同努力實現特定任務的目標。在人機協同中&#xff0c;存在著比較與調整的過程&#xff0c;這是為了實現更好的合作效果和任務完成質量。 比較是指人與機器在任務執行過程中對彼此的表現進行評估和比較。這可以通過對機器的…

DB類的學習

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; //引用三個命名空間 using System.Data.SqlClient; using System.Configuration;/// <summary> /// DB 的摘要說明 /// </summary> public class DB {p…

vue+ts+vite+pinia+less+echarts 前端可視化 實戰項目

1.初始化前端 輸入 npm init vuelatest 命令 然后 選擇需要的插件2.構建完成后 在終端切換到vue-project文件夾下 npm install 下載依賴 3.下載 less樣式 npm install less less-loader -D 4.下載axios npm install axios 5.下載echarts npm install echarts -S 6.引入中國…

JAVA 的數據類型

Java 是一種靜態類型語言&#xff0c;這意味著在編譯時&#xff0c;變量必須聲明其數據類型。在 Java 中&#xff0c;數據類型可以分為兩大類&#xff1a;基本數據類型&#xff08;又稱原始數據類型&#xff09;和引用數據類型。本文將詳細介紹這兩種數據類型。 一、基本數據類…

戰網國際服加速器用哪個好 暴雪戰網好用加速器介紹

戰網國際版&#xff0c;又稱Battle.net環球版&#xff0c;是暴雪娛樂操盤的全球性游戲互動平臺&#xff0c;它跨越地理界限&#xff0c;服務于全球游戲愛好者。與地區限定版本相異&#xff0c;國際版賦予玩家自由進入暴雪旗下眾多經典游戲的權利&#xff0c;無論身處何方&#…

對比測評3款BI分析工具

前不久&#xff0c;一位準備入職阿里的學弟問我&#xff0c;他要做電商數據分析&#xff0c;電商有龐雜的標簽、模型、數據和業務邏輯&#xff0c;菜鳥應該要具備什么樣的分析能力啊&#xff1f; 我看了他的崗位職責&#xff0c;主要是負責經營決策支持、專題分析和數據看板搭…

leetcode-字符串變形-104

題目要求 思路 1.首先根據ASCII的規則&#xff0c;把字符串大小寫替換&#xff0c;空格保持不變 2.將整個字符串進行翻轉 3.以空格為區間&#xff0c;將區間內的字符串進行翻轉&#xff0c;其中翻轉的函數reverse() 代碼實現 class Solution { public:string trans(string s…

【C語言】通訊錄系統實現

目錄 1、通訊錄系統介紹 2、代碼分裝 3、代碼實現步驟 3.1制作菜單函數以及游戲運行邏輯流程 3.2、封裝人的信息PeoInfo以及通訊錄Contact結構體類型 3.3、初始化通訊錄InitContact函數 3.4、增加聯系人AddContact函數 3.5、顯示所有聯系人ShowContact函數 3.6、刪除聯系人D…

Shell之常用命令

目錄 1.排序工具--sort命令 1.1 快讀查找一個目錄中最大文件 2.去重工具--uniq命令 2.1 分析判斷遠程登錄錯誤次數&#xff0c;禁止該用戶遠程登錄 3.修改工具--tr命令 4.列截取工具--cut命令 5.分割文件工具--split命令 6.合并文件列--paste命令 7.掃描工具--eval命令…

OpenAI和互聯網行業的發展,有著異曲同工之處

當OpenAI首席技術官米拉穆拉提發布桌面版本的ChatGPT和新的旗艦模型—GPT-4o&#xff0c;OpenAI的發展&#xff0c;進入到了一個真正意義上的奇點時刻。 OpenAI的短短26分鐘的發布會&#xff0c;卻依然引發了不少波瀾。 無論是ChatGPT-4o的完全免費&#xff0c;抑或是推出PC桌…

【Linux】常用指令、熱鍵與權限管理

一、常用指令 &#xff08;1&#xff09;ls 功能&#xff1a;列出指定目錄下的所有子目錄與文件 用法&#xff1a;ls &#xff08;選項&#xff09; &#xff08;目錄或文件名&#xff09; 常用選項&#xff1a; -a&#xff1a;列出目錄下的所有文件&#xff0c;包括隱藏…

c語言中數字字符串和數字互轉

#include <getopt.h> #include <stdio.h> #include <stdlib.h>#define MAX_PATH 256 char filename[MAX_PATH 5]; int main(int argc, char** argv) {//數字字符串轉數字const char* kk "689";int zhi atoi(kk) 8;//數字字符串轉doubledoub…

從HTTP遷移到HTTPS:一篇全面的測試方案設計指南

在當今的互聯網世界里&#xff0c;數據安全性日益受到重視。將網站從HTTP遷移到HTTPS已成為提升數據傳輸安全性的重要一步。HTTPS&#xff08;超文本傳輸安全協議&#xff09;通過SSL/TLS協議為客戶端和服務器之間的通信加密&#xff0c;保護數據免受中間人攻擊&#xff08;MIT…

代碼隨想錄訓練營Day 29|力扣39. 組合總和、40.組合總和II、131.分割回文串

1.組合總和 題目鏈接/文章講解&#xff1a; 代碼隨想錄 視頻講解&#xff1a;帶你學透回溯算法-組合總和&#xff08;對應「leetcode」力扣題目&#xff1a;39.組合總和&#xff09;| 回溯法精講&#xff01;_嗶哩嗶哩_bilibili 代碼&#xff1a;&#xff08;未剪枝版 &#xf…

ChatGPT未來可能應用于iPhone?

蘋果接即將與OpenAI達成協議 ChatGPT未來應用于iPhone 前言 就在5月11日&#xff0c;蘋果公司正與OpenAI進行深入討論&#xff0c;計劃在其最新的iOS操作系統中整合OpenAI的先進技術。這一舉措是蘋果公司在為其產品線融入更先進的人工智能功能所做努力的一部分。 目前情況雙方…

vue2 八大組件通信,父子通信,跨層級通信,事件總線,vuex等

文章目錄 什么是組件通信&#xff1f;父子通信流程propsProps 定義Props 作用特點數組寫法對象寫法&#xff08;props校驗&#xff09;簡寫只驗證數據類型&#xff1a;完整寫法&#xff0c;完整的驗證&#xff1a; props父向子傳值用props父傳子在子組件中修改props $emit子向父…

自定義 Gradle 插件進行統一的靜態代碼分析

靜態代碼分析是一項了不起的技術, 它能讓代碼庫更易于維護. 但是, 如果你在不同的版本庫中擁有多個服務(可能由不同的團隊開發), 如何才能讓每個人都遵循既定的代碼風格呢? 一個好辦法是將所有規則封裝在一個插件中, 該插件會在每個項目構建時自動執行所需的驗證. 因此, 在本…

最新版rancher環境配置安裝和集群搭建詳細教程記錄

&#x1f680; 作者 &#xff1a;“二當家-小D” &#x1f680; 博主簡介&#xff1a;?前荔枝FM架構師、阿里資深工程師||曾任職于阿里巴巴擔任多個項目負責人&#xff0c;8年開發架構經驗&#xff0c;精通java,擅長分布式高并發架構,自動化壓力測試&#xff0c;微服務容器化k…

2024-05-15 問AI: 介紹一下 , Tacotron系列

文心一言 Tacotron系列是由谷歌開發的&#xff0c;主要用于文本到語音&#xff08;TTS&#xff09;轉換的模型。該系列模型基于端到端的序列到序列&#xff08;Seq2Seq&#xff09;架構&#xff0c;能夠直接從文本中生成聽起來自然的語音。 Tacotron模型是首個端到端的TTS深度…