CSS的屬性選擇器使用詳解（css入門教學）
- (*-*)浩原創
- 2019-11-26 13:38:133043瀏覽
對具有指定屬性的 HTML 元素設定樣式。 ( 建議學習：CSS入門教學 )
可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限於 class 和 id 屬性。
註：只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支援屬性選擇器。在 IE6 及更低的版本中，不支援屬性選擇。
屬性選擇器
下面的範例為所有帶有title 屬性的元素設定樣式：
[title]
{
color:red;
}屬性和值選擇器
下面的範例為title="W3School" 的所有元素設定樣式：
[title=hello]
{
border:5px solid blue;
}#屬性與值選擇器- 多個值
#下面的範例為包含指定值的title 屬性的所有元素設定樣式。適用於由空格分隔的屬性值：
[title~=hello] { color:red; }下面的範例為帶有包含指定值的 lang 屬性的所有元素設定樣式。適用於連字符分隔的屬性值：
[lang|=en] { color:red; }設定表單的樣式
屬性選擇器在設定為不帶有class 或id 的表單時特別有用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>以上是CSS的屬性選擇器使用詳解（css入門教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn