类别：CSS / 日期：2019-11-27 / 浏览：190 / 评论：0
对带有指定属性的 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入门教程）的细致内容，更多请关注ki4网别的相干文章！
版权声明 : 本文未使用任何知识共享协议授权，您可以任何形式自由转载或使用。
