成都網站排名優(yōu)化今日新聞頭條新聞今天
大會官網：www.cammic.org
大會時間：2025年3月21-23日
大會地點：中國-上海（上海大學寶山校區(qū)北大門樂乎新樓）
簡介
第五屆應用數學、建模與智能計算（CAMMIC 2025）將于2025年3月21-23日在中國上海召開。本次由上海大學主辦。該會議已成功舉辦四屆，吸引海內外500余名專家學者參會。會議將圍繞"應用數學””建模與仿真“”智能計算“的最新研究領域，為來自國內外高等院校、科學研究所、企事業(yè)單位的專家、教授、學者、工程師等提供一個分享專業(yè)經驗，擴大專業(yè)網絡，面對面交流新思想以及展示研究成果的國際平臺，探討本領域發(fā)展所面臨的關鍵性挑戰(zhàn)問題和研究方向，以期推動該領域理論、技術在高校和企業(yè)的發(fā)展和應用，也為參會者建立業(yè)務或研究上的聯(lián)系以及尋找未來事業(yè)上的全球合作伙伴。
目錄
前言
一、CSS偽類選擇器分類
1. 動態(tài)偽類選擇器
常見的動態(tài)偽類
示例
2. 結構偽類選擇器
常見的結構偽類
示例
3. 語言和否定偽類選擇器
常見的語言和否定偽類
示例
4. UI偽類選擇器
常見的UI偽類
示例
二、總結
前言
本篇博客將深入講解CSS偽類選擇器，按照功能將其分類為：動態(tài)偽類、結構偽類、語言和否定偽類、以及UI偽類，并提供詳細的用法、示例和注意事項，幫助更好地掌握這些強大的工具。
一、CSS偽類選擇器分類
1. 動態(tài)偽類選擇器
動態(tài)偽類主要用于控制元素在不同交互狀態(tài)下的樣式變化，通常與用戶的鼠標操作或鍵盤操作相關。
常見的動態(tài)偽類
:hover—— 懸停狀態(tài):active—— 被點擊或按下的狀態(tài):focus—— 獲得焦點的狀態(tài):focus-within—— 如果某元素或其子元素獲得焦點:focus-visible—— 當元素具有焦點且被鍵盤聚焦時
示例
<button>點擊我</button>
<a href="#">懸停我</a>
<input type="text" placeholder="輸入文本">
/* 懸停狀態(tài) */
a:hover {color: red;
}/* 點擊狀態(tài) */
button:active {background-color: green;
}/* 焦點狀態(tài) */
input:focus {border: 2px solid blue;
}/* 焦點內狀態(tài) */
div:focus-within {border: 2px solid purple;
}/* 僅當鍵盤聚焦時顯示焦點 */
input:focus-visible {outline: 3px solid orange;
}
注意事項
:hover和:active通常用于交互元素（如按鈕、鏈接），能夠給用戶提供反饋。:focus-within特別適用于表單元素，能夠讓整個父容器在任意子元素獲取焦點時被高亮顯示。
2. 結構偽類選擇器
結構偽類選擇器幫助你根據元素在文檔中的位置或其父子關系來選中元素，而不依賴于元素的內容。
常見的結構偽類
:first-child—— 父元素的第一個子元素:last-child—— 父元素的最后一個子元素:nth-child(n)—— 父元素中第n個子元素:nth-last-child(n)—— 從后往前數的第n個子元素:only-child—— 父元素中唯一的子元素:nth-of-type(n)—— 同類型元素的第n個子元素:first-of-type—— 同類型元素的第一個:last-of-type—— 同類型元素的最后一個:empty—— 沒有任何子元素的元素
示例
<ul><li>第一項</li><li>第二項</li><li>第三項</li>
</ul>
/* 父元素的第一個子元素 */
ul li:first-child {color: blue;
}/* 父元素的最后一個子元素 */
ul li:last-child {color: red;
}/* 第2個子元素 */
ul li:nth-child(2) {font-weight: bold;
}/* 父元素中唯一的子元素 */
div:only-child {background-color: lightgray;
}/* 只有第一項是li標簽 */
ul li:first-of-type {font-size: 18px;
}
注意事項
:nth-child()可以接受數字、關鍵字odd（奇數）和even（偶數），也支持公式（如2n表示每兩個元素）。- 使用
:nth-of-type()時，確保你選擇的是同一類型的元素，如只選擇<li>標簽而不受其他標簽影響。
3. 語言和否定偽類選擇器
語言和否定偽類選擇器主要用于通過元素的語言、類名、或者排除某些條件來選擇元素。
常見的語言和否定偽類
:lang(language)—— 根據元素的語言屬性選擇元素:not(selector)—— 排除與給定選擇器匹配的元素
示例
<p lang="en">This is an English paragraph.</p>
<p lang="fr">C'est un paragraphe en fran?ais.</p>
/* 選擇所有英語段落 */
p:lang(en) {color: blue;
}/* 排除所有具有class="exclude"的元素 */
div:not(.exclude) {background-color: yellow;
}
注意事項
:lang()偽類選擇器非常適用于國際化（i18n）網頁設計，允許你根據不同的語言應用不同的樣式。:not()偽類可以用來排除不想匹配的元素，非常靈活，但要注意性能問題，在復雜選擇器中使用時要謹慎。
4. UI偽類選擇器
UI偽類選擇器用于根據元素的UI狀態(tài)（如是否選中、是否禁用等）進行選擇。
常見的UI偽類
:checked—— 選中狀態(tài)（如復選框或單選框）:disabled—— 禁用狀態(tài):enabled—— 啟用狀態(tài):required—— 必填狀態(tài):optional—— 可選狀態(tài):valid—— 表單元素內容有效:invalid—— 表單元素內容無效
示例
<input type="checkbox" checked> 選中
<input type="checkbox"> 未選中
<input type="text" required>
/* 選中狀態(tài) */
input:checked {background-color: lightgreen;
}/* 禁用狀態(tài) */
input:disabled {background-color: lightgray;
}/* 必填狀態(tài) */
input:required {border: 2px solid red;
}
注意事項：
:checked常用于復選框和單選框，能夠控制它們在選中狀態(tài)時的樣式。:required和:optional是表單控件的偽類，常用于表單驗證時應用不同樣式。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>UI偽類</title><style>/* 選中勾選的復選或者單選框 */input:checked{width:30px;height:30px;}/* 選中可用的輸入框 */input:enabled{background-color:green;}/* 選中禁用的輸入框 */input:disabled{background-color:grey;}input:required {border: 20px solid red;
}</style>
</head>
<body><input type="checkbox"><input type="radio" name="gender"><input type="radio" name="gender"><input type="password" required></input><input type="text" disabled></input>
</body>
</html>?
二、總結
CSS偽類選擇器為我們提供了強大的樣式控制功能。通過動態(tài)偽類、結構偽類、語言和否定偽類以及UI偽類，我們可以輕松地根據元素的不同狀態(tài)、位置、類型或語言來應用樣式。
掌握這些偽類選擇器的用法，能夠讓你的頁面更加智能和富有交互性，提升用戶體驗。在實際開發(fā)中，偽類選擇器不僅減少了對JavaScript的依賴，還大大簡化了樣式的管理和實現。
通過合理運用這些選擇器，你可以在不增加額外復雜度的情況下，讓你的網頁更具表現力和可訪問性。