热门关键字:
jquery > jquery教程 > css3 > CSS的属性选择器使用详解(css入门教程)

CSS的属性选择器使用详解(css入门教程)

376
作者:管理员
发布时间:2020/3/4 17:19:54
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=972
    可以为拥有指定属性的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>
    </html>



如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:CSS
友荐云推荐