CSS的属性选择器使用详解

2024-01-18 10:36 小编
  可以为拥有指定属性的HTML元素设置样式,而不仅限于class和id属性。
 
  注:只有在规定了!DOCTYPE时,IE7和IE8才支持属性选择器。在IE6及更低的版本中,不支持属性选择。
 
  属性选择器
 
  下面的例子为带有title属性的所有元素设置样式:
 
  [title]
 
  {
 
  color:red;
 
  }
 
  属性和值选择器
 
  下面的例子为title="W3School"的所有元素设置样式:
 
  [title=hello]
 
  {
 
  border:5pxsolidblue;
 
  }
 
  属性和值选择器-多个值
 
  下面的例子为包含指定值的title属性的所有元素设置样式。适用于由空格分隔的属性值:
 
  [title~=hello]{color:red;}
 
  下面的例子为带有包含指定值的lang属性的所有元素设置样式。适用于由连字符分隔的属性值:
 
  [lang|=en]{color:red;}
 
  设置表单的样式
 
  属性选择器在为不带有class或id的表单设置样式时特别有用:
 
  
 
  
 
  <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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>
 
  <formname="input"action=""method="get">
 
  <inputtype="text"name="Name"value="Bill"size="20">
 
  <inputtype="text"name="Name"value="Gates"size="20">
 
  <inputtype="button"value="ExampleButton">
 
  </form>
 
  </body>
 


Tag: 选择
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码