這篇文章主要為大家展示了“CSS類選擇器怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS類選擇器怎么用”這篇文章吧。
CSS 屬性選擇器
對帶有指定屬性的 HTML 元素設置樣式。
可以為擁有指定屬性的 HTML 元素設置樣式，而不僅限于 class 和 id 屬性。
只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。
在 IE6 及更低的版本中，不支持屬性選擇。
實例：屬性選擇器
<html>
<head>
<style type="text/css">
[title]{color:red;}
</style>
</head>
<body>
<h2>帶有 title 屬性，可以應用樣式：</h2>
<h3 title="Hello world">Hello world</h3>
<a title="demo" href="demo.html">Hello world</a>
<hr />
<h2>沒有 title 屬性，無法應用樣式：</h2>
<h3>Hello world</h3>
<a href="demo.html">Hello world</a>
</body>
</html>注釋：上面的例子為帶有 title 屬性的所有元素設置樣式。
實例：屬性和值選擇器
<html>
<head>
<style type="text/css">
[title=Hello]{border:5px solid blue;}
</style>
</head>
<body>
<h2>可以應用樣式：</h2>
<img title="Hello" src="hello.gif" />
<br />
<a title="Hello" href="hello.html">Hello world</a>
<hr />
<h2>無法應用樣式：</h2>
<p title="greeting">Hello world</p>
<a class="Hello" href="hello.html">Hello world</a>
</body>
</html>注釋：下面的例子為 title="Hello" 的所有元素設置樣式。
設置表單的樣式
屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用：
<!DOCTYPE html>
<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類選擇器怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
