• 技术文章 >web前端 >css教程

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

    (*-*)浩(*-*)浩2019-11-26 13:38:13原创1040

    对带有指定属性的 HTML 元素设置样式。 ( 推荐学习:CSS入门教程 )

    可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

    注:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

    属性选择器

    下面的例子为带有 title 属性的所有元素设置样式:

    [title]
    {
    color:red;
    }

    属性和值选择器

    下面的例子为 title="W3School" 的所有元素设置样式:

    [title=hello]
    {
    border:5px solid blue;
    }

    属性和值选择器 - 多个值

    下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:

    [title~=hello] { color:red; }

    下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:

    [lang|=en] { color:red; }

    设置表单的样式

    属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:

    <!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入门教程)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS
    上一篇:css的类选择器是怎么样的(代码) 下一篇:css如何插入样式表
    Web大前端开发直播班

    相关文章推荐

    • CSS编码规范• CSS 派生选择器通过什么来定义• CSS的id选择器怎么定义• css的类选择器是怎么样的(代码)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网