本文摘自PHP中文网,作者(*-*)浩,侵删。
对带有指定属性的 HTML 元素设置样式。 ( 推荐学习:CSS入门教程 )
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
注:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式:
属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式:
1 2 3 4 | [title=hello]
{
border:5px solid blue;
}
|
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:
1 | [title~=hello] { color:red; }
|
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:
1 | [lang|=en] { color:red; }
|
设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!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入门教程)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css如何改变图片的颜色
css transform-origin属性怎么用
css怎么设置div大小
css样式怎么写在jsp中
css定位图片位置不变的实现方法
在css样式中class是什么
css如何实现n宫格布局
css怎么设置上边框
css padding属性怎么用
深入浅析css属性选择器
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » CSS的属性选择器使用详解(css入门教程)