資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究偽類和所有 CSS 類
偽類關鍵字用於指定新增它的選擇器的特殊狀態。這給了我們更多的控制權，現在我們可以在選擇器處於特定狀態時（例如：懸停、選中、已訪問等）對其進行定位。
偽類
以下是幾個關鍵的偽類：
:active = 選擇活動連結
:checked = 選擇每個選中的<input>元素
:first-child = 選擇元素父元素的第一個子元素
:first-of-type = 選擇其父元素的第一個元素
:focus = 選擇具有焦點的元素
:hover = 選擇滑鼠懸停時的連結
:link = 選擇所有未訪問的連結
:not(selector) = 選擇不是<p>元素的每個元素
:nth-of-type(n) = 選擇其父元素的第二個元素
:only-of-type = 選擇其父元素中唯一的元素
:only-child = 選擇其父元素中唯一的子元素
:out-of-range = 選擇值超出指定範圍的元素
:valid = 選擇具有有效值的元素
:visited = 選擇所有已訪問的連結
使用 CSS 偽類操作連結
當我們使用<a>元素建立連結時，可以使用各種偽類來設定連結顏色、已訪問連結顏色、懸停、活動連結等。我們已經使用偽類實現了同樣的效果：
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
示例
讓我們看看程式碼：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
a {
font-size: 18px;
font-weight: bold;
}
a:link {
color: rgb(17, 0, 255);
}
a:visited {
color: rgb(128, 0, 107);
}
a:hover {
color: rgb(255, 105, 243);
}
a:active {
color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<h1>Pseudo class example</h1>
<a href="#">This is some sample link text</a>
<h2>Hover, click on the above link to see the pseudo class in action</h2>
</body>
</html>
nth-of-type 偽類
在此示例中，我們根據 nth-of-type() 偽類設定了不同的背景顏色：
child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
示例
讓我們看一個例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
}
input[type="button"] {
border-radius: 10px;
}
.child{
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Inline-level Elements and Inline Boxes</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</body>
</html>
：focus 偽類
要選擇具有焦點的元素，請使用 :focus 偽類。在這裡，當獲得焦點時，搜尋欄位將在搜尋框周圍顯示一個輪廓，供使用者輸入搜尋關鍵字：
.searchField:focus {
outline: 3px solid #ddd;
}
示例
讓我們看看示例：
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: rgb(76, 78, 175);
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #4f3e8e;
}
.searchField {
box-sizing: border-box;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
.searchField:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdownList {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdownList a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h1>Search/filterText Dropdown Example</h1>
<div class="dropdown">
<button class="dropbtn" onclick="showDropList()">Dropdown</button>
<div id="myDropdown" class="dropdownList">
<input type="text" placeholder="Search.." class="searchField">
<a href="#">Cow</a>
<a href="#">Cat</a>
<a href="#">Dog</a>
<a href="#">Giraffe</a>
<a href="#">Lion</a>
<a href="#">Leopard</a>
<a href="#">Cheetah</a>
</div>
</div>
<script>
function showDropList(){
let dropDiv = document.querySelector('.dropdownList');
if(dropDiv.style.display==="block"){
dropDiv.style.display = "";
} else {
dropDiv.style.display = "block";
}
}
document.querySelector('.searchField').addEventListener('keyup',filterDropdown);
function filterDropdown() {
var inputSearch, filterText, ul, li, links, i,div;
inputSearch = document.querySelector(".searchField");
filterText = inputSearch.value.toUpperCase();
div = document.getElementById("myDropdown");
links = div.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
txtValue = links[i].textContent || links[i].innerText;
if (txtValue.toUpperCase().indexOf(filterText) > -1) {
links[i].style.display = "";
} else {
links[i].style.display = "none";
}
}
}
</script>
</body>
</html>
更新於： 2023-12-26
165 次檢視
廣告