資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 CSS 屬性選擇器為表單設定樣式
使用 CSS 中的屬性選擇器，為具有特定屬性的 HTML 元素應用樣式。讓我們看看哪些屬性選擇器可用於規則。
[attribute] 選擇器
[attribute] 選擇器選擇具有指定屬性的元素。這裡，帶有 target 屬性的連結將被設定樣式 -
a[target] {
background-color: red;
color: white;
}
示例
讓我們看看這個例子 -
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: red;
color: white;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<a href="https://tutorialspoint.tw" target="_blank">Tutorialspoint</a>
<a href="http://www.tutorix.com">Tutorix</a>
</body>
</html>
[attribute="value"] 選擇器
[attribute="value"] 選擇器選擇具有指定屬性和值的元素。這裡，屬性是 target，值是 _blank。具有此 target 屬性和 _blank 值的 <a> 將被設定樣式 -
a[target="_blank"] {
background-color: red;
color: white;
}
示例
讓我們看看這個例子 -
<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
background-color: red;
color: white;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<a href="https://tutorialspoint.tw" target="_blank">Tutorialspoint</a>
<a href="http://www.tutorix.com" target="_self">Tutorix</a>
</body>
</html>
屬性選擇器應用了以下規則。
p[lang] - 選擇所有具有 lang 屬性的段落元素。
p[lang="fr"] - 選擇 lang 屬性值正好為“fr”的所有段落元素。
p[lang~="fr"] - 選擇 lang 屬性包含單詞“fr”的所有段落元素。
p[lang|="en"] - 選擇 lang 屬性值正好為“en”或以“en-”開頭的所有段落元素。
在下面的示例中，我們使用屬性選擇器為表單設定了樣式。讓我們看看它是如何實現的 -
設定 input 型別為 text 的樣式
這裡，我們使用 CSS [attribute] 選擇器為 input 型別為 text 的元素設定了樣式。以下樣式僅針對型別為 text 的 input 元素設定 -
input[type="text"] {
width: 300px;
display: block;
margin-bottom: 10px;
background-color: rgb(195, 250, 247);
font-size: 18px;
padding: 15px;
border: none;
}
設定 input 型別為 password 的樣式
這裡，我們使用 CSS [attribute] 選擇器為 input 型別為 password 的元素設定了樣式。以下樣式僅針對型別為 password 的 input 元素設定 -
input[type="password"] {
width: 300px;
padding: 10px;
background-color: red;
color: white;
border: none;
}
設定 input 型別為 button 的樣式
這裡，我們使用 CSS [attribute] 選擇器為 input 型別為 button 的元素設定了樣式。以下樣式僅針對型別為 button 的 input 元素設定 -
input[type="button"] {
padding: 10px;
font-size: 18px;
border: none;
outline: none;
background-color: rgb(75, 163, 16);
color: white;
}
示例
以下是程式碼 -
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input[type="text"] {
width: 300px;
display: block;
margin-bottom: 10px;
background-color: rgb(195, 250, 247);
font-size: 18px;
padding: 15px;
border: none;
}
input[type="button"] {
padding: 10px;
font-size: 18px;
border: none;
outline: none;
background-color: rgb(75, 163, 16);
color: white;
}
input[type="password"] {
width: 300px;
padding: 10px;
background-color: red;
color: white;
border: none;
}
</style>
</head>
<body>
<h1>Css attribute selector example</h1>
<form>
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname" value="Ron" />
<label for="lname">Last name:</label><br />
<input type="text" id="lname" name="lname" value="Shaw" />
<label for="pass">Password:</label><br />
<input type="password" id="pass" name="pass" value="password" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
更新於: 2023-12-27
327 次瀏覽
廣告