小白教程
所有教程
关于
Search
172.70.130.222
172.70.130.222
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS 属性选择器”的源代码
本页内容
上一节:
CSS_媒体类型
下一节:
CSS_表单
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS 属性选择器}}[[Category:CSS 教程|34]] = CSS 属性 选择器 = == 具有特定属性的HTML元素样式 == 具有特定属性的HTML元素样式不仅仅是class和id。 '''注意:'''IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。 == 属性选择器 == 下面的例子是把包含标题(title)的所有元素变为蓝色: <sample title="" desc="" lang="html" hererun="1"> [title] { color:blue; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <style> [title] { color:blue; } </style> </head> <body> <h2>Will apply to:</h2> <h1 title="Hello world">Hello world</h1> <a title="xiaobai.wang" href="http://www.xiaobai.wang/">xiaobai.wang</a> <hr> <h2>Will not apply to:</h2> <p>Hello!</p> </body> </html> </run> == 属性和值选择器 == 下面的实例改变了标题title='xiaobai'元素的边框样式: <sample title="" desc="" lang="html" hererun="1"> [title=xiaobai] { border:5px solid green; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> [title=xiaobai] { border:5px solid green; } </style> </head> <body> <h2>将适用:</h2> <img title="xiaobai" src="logo.png" width="270" height="50" /> <br> <a title="xiaobai" href="http://www.xiaobai.wang/">xiaobai</a> <hr> <h2>将不适用:</h2> <p title="greeting">Hi!</p> <a class="xiaobai" href="http://www.xiaobai.wang/">xiaobai</a> </body> </html> </run> == 属性和值的选择器 - 多值 == 下面是包含指定值的title属性的元素样式的例子,使用(~)分隔属性和值: <sample title="" desc="" lang="html" hererun="1"> [title~=hello] { color:blue; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> [title~=hello] { color:blue; } </style> </head> <body> <h2>将适用:</h2> <h1 title="hello world">Hello world</h1> <p title="student hello">Hello CSS students!</p> <hr> <h2>将不适用:</h2> <p title="student">Hi CSS students!</p> </body> </html> </run> 下面是包含指定值的lang属性的元素样式的例子,使用(|)分隔属性和值: <sample title="" desc="" lang="html" hererun="1"> [lang|=en] { color:blue; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> [lang|=en] { color:blue; } </style> </head> <body> <h2>将适用:</h2> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <p lang="en-gb">Ello!</p> <hr> <h2>将不适用:</h2> <p lang="us">Hi!</p> <p lang="no">Hei!</p> </body> </html> </run> == 表单样式 == 属性选择器样式无需使用class或id的形式: <sample title="" desc="" lang="html" hererun="1"> input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; } </style> </head> <body> <form name="input" action="demo-form.php" method="get"> Firstname:<input type="text" name="fname" value="Peter" size="20"> Lastname:<input type="text" name="lname" value="Griffin" size="20"> <input type="button" value="Example Button"> </form> </body> </html> </run>
返回至“
CSS 属性选择器
”。
上一节:
CSS_媒体类型
下一节:
CSS_表单