黑马程序员技术交流社区
标题:
【上海校区】CSS属性选择器
[打印本页]
作者:
不二晨
时间:
2019-3-22 10:08
标题:
【上海校区】CSS属性选择器
具有特定属性的HTML元素样式
具有特定属性的HTML元素样式不仅仅是class和id。
注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
格式的样式以[ ]表示
属性和值选择器
下面的实例改变了标题[ = ]边框样式:
[title=runoob]
{
border:5px solid green;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<img title="runoob" src="logo.png" width="270" height="50" />
<br>
<a title="runoob" href="http://www.runoob.com/">runoob</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="runoob" href="http://www.runoob.com/">runoob</a>
[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>
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">
---------------------
【转载，仅作分享，侵删】
作者：前端小99
原文：
https://blog.csdn.net/qq_41328247/article/details/80001978
版权声明：本文为博主原创文章，转载请附上博文链接！
作者:
不二晨
时间:
2019-3-25 17:09
奈斯，感谢分享
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
奈斯，感谢分享