CSS：目標偽級示例
:target偽類用於樣式化URL片段標識符指向的元素，1. 當鏈接指向頁面中的ID時，對應元素成為目標並應用特殊樣式；2. 可用於高亮內容、創建選項卡或顯示/隱藏元素；3. 示例中通過section:target顯示目標區塊並隱藏其他；4. 實際應用包括FAQ、標籤頁和內容高亮；5. 支持動畫增強效果且無需JavaScript；6. 注意ID唯一性且一次僅一個元素為目標；7. 所有現代瀏覽器均支持該特性。
The :target pseudo-class in CSS is used to style the element that is the target of a fragment identifier (the part of the URL after the # ). When a link points to an ID on the same page, the element with that ID becomes the "target", and :target allows you to apply special styles to it.
This is useful for highlighting content, creating simple tabbed interfaces, or showing/hiding elements without JavaScript.
✅ Basic :target Example
Here's a simple example showing how :target works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>:target Example</title>
<style>
/* Hide all sections by default */
section {
display: none;
padding: 20px;
border: 1px solid #ccc;
margin-top: 10px;
}
/* Show only the targeted section */
section:target {
display: block;
background-color: #f0f8ff;
border-color: #007cba;
}
/* Style the navigation */
nav a {
margin: 0 10px;
text-decoration: none;
color: #007cba;
}
nav a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<section id="home">
<h2>Home</h2>
<p>Welcome to the home section!</p>
</section>
<section id="about">
<h2>About</h2>
<p>Learn more about us here.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Get in touch with us.</p>
</section>
</body>
</html>? How It Works
- When you click a link like
<a href="#about">, the browser scrolls to the element withid="about". - That element now matches the
:targetpseudo-class. - The CSS rule
section:target { display: block; }makes only that section visible. - This lets you simulate a simple single-page navigation or accordion effect using only HTML and CSS.
? Practical Use Cases
- FAQ pages : Click a question to reveal its answer.
- Tabs or panels : Show one panel at a time.
- Highlighting referenced content : Add a yellow background or animation to the targeted section.
Example enhancement with animation:
section:target {
display: block;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}⚠️ Notes
- Only one element can be the target at a time.
- The
:targetselector works on any element with anidthat matches the URL hash. - Always ensure IDs are unique.
Basically, :target gives you a lightweight way to create dynamic effects without JavaScript. It's well supported in all modern browsers.
以上是CSS：目標偽級示例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何清除未使用的CSS？
Jul 27, 2025 am 02:47 AM
UseAutomatedToolSlikePurgecsSoruncsStoscanAndRemoveUnusedcss; 2. integratePuratePurgingIntoyourBuildProcessviawebpack，vite，vite，ortailwind ’scontentConfiguration; 3.AuditcsSusageWithChroMedEvtoolScoverAgeTabBeforgeForgingToavoidRemovingNeedEdedStyles; 4.safelistdynamic
如何更改CSS中的文本顏色？
Jul 27, 2025 am 04:25 AM
要改變CSS中文本顏色，需使用color屬性；1.使用color屬性可設置文本前景色，支持顏色名稱（如red）、十六進制碼（如#ff0000）、RGB值（如rgb(255,0,0)）、HSL值（如hsl(0,100%,50%)）以及帶透明度的RGBA或HSLA（如rgba(255,0,0,0.5)）；2.可將顏色應用於包含文本的任何元素，如h1至h6標題、段落p、鏈接a（需注意a:link、a:visited、a:hover、a:active不同狀態的顏色設置）、按鈕、div、span等；3.最
如何使用CSS Backdrop-Filter屬性？
Aug 02, 2025 pm 12:11 PM
backdrop-filter用於對元素背後的內容應用視覺效果，1.使用backdrop-filter:blur(10px)等語法實現毛玻璃效果；2.支持blur、brightness、contrast等多種濾鏡函數並可疊加；3.常用於玻璃態卡片設計，需確保元素與背景重疊；4.現代瀏覽器支持良好，可用@supports提供降級方案；5.避免過大模糊值和頻繁重繪以優化性能，該屬性僅在元素背後有內容時生效。
CSS暗模式切換示例
Jul 30, 2025 am 05:28 AM
首先通過JavaScript獲取用戶系統偏好和本地存儲的主題設置，初始化頁面主題；1.HTML結構包含一個按鈕用於觸發主題切換；2.CSS使用:root定義亮色主題變量，.dark-mode類定義暗色主題變量，並通過var()應用這些變量；3.JavaScript檢測prefers-color-scheme並讀取localStorage決定初始主題；4.點擊按鈕時切換html元素上的dark-mode類，並將當前狀態保存至localStorage；5.所有顏色變化均帶有0.3秒過渡動畫，提升用戶
什麼是用戶代理樣式表？
Jul 31, 2025 am 10:35 AM
用戶代理樣式表是瀏覽器自動應用的默認CSS樣式，用於確保未添加自定義樣式的HTML元素仍具基本可讀性。它們影響頁面初始外觀，但不同瀏覽器存在差異，可能導致不一致顯示。開發者常通過重置或標準化樣式來解決這一問題。使用開發者工具的“計算”或“樣式”面板可查看默認樣式。常見覆蓋操作包括清除內外邊距、修改鏈接下劃線、調整標題大小及統一按鈕樣式。理解用戶代理樣式有助於提升跨瀏覽器一致性並實現精準佈局控制。
CSS方面比例屬性是什麼？如何使用它？
Aug 04, 2025 pm 04:38 PM
Theaspect-ratioCSSpropertydefinesthewidth-to-heightratioofanelement,ensuringconsistentproportionsinresponsivedesigns.1.Itisapplieddirectlytoelementslikeimages,videos,orcontainersusingsyntaxsuchasaspect-ratio:16/9.2.Commonusecasesincludemaintainingres
如何在CSS中樣式鏈接？
Jul 29, 2025 am 04:25 AM
鏈接的樣式應通過偽類區分不同狀態，1.使用a:link設置未訪問鏈接樣式，2.a:visited設置已訪問鏈接，3.a:hover設置懸停效果，4.a:active設置點擊時樣式，5.a:focus確保鍵盤可訪問性，始終遵循LVHA順序以避免樣式衝突，可通過添加padding、cursor:pointer和保留或自定義焦點輪廓來提升可用性和可訪問性，還可使用border-bottom或動畫下劃線等自定義視覺效果，最終確保鏈接在所有狀態下均有良好用戶體驗和可訪問性。
如何在CSS中使用大眾和VH單元
Aug 07, 2025 pm 11:44 PM
vw和vh單位通過將元素尺寸與視口寬度和高度關聯，實現響應式設計；1vw等於視口寬度的1%，1vh等於視口高度的1%；常用於全屏區域、響應式字體和彈性間距；1.全屏區域使用100vh或更優的100dvh避免移動瀏覽器地址欄影響；2.響應式字體可用5vw並結合clamp(1.5rem,3vw,3rem)限制最小和最大尺寸；3.彈性間距如width:80vw、margin:5vhauto、padding:2vh3vw可使佈局自適應；需注意移動設備兼容性、可訪問性及固定寬度內容衝突，建議優先使用dvh
