属性选择器

作者: 追逐_chase | 来源:发表于2018-05-23 11:03 被阅读0次
timg.jpg
/*属性选择器*/

        input[type="submit"] {

            width: 60px;
            height: 25px;
            margin-top: 15px;

        }

        .attr1 a[href="./a.rmvb"] {
            color: red;
            text-decoration: none;
        }
        /*指定class为 download 所有元素设置样式
        用于选取属性值中包含指定词汇的元素  */
        .attr2 a[class~="download"]{

            color: aquamarine;

        }

        /* 带有包含指定值的 class类的download字段的开头所有元素设置样式  这个字段必须是整个单词*/
        .attr3 a[class|="download"]{
            text-decoration: none;

            color: #036663;
        }
        /*设置 class 属性值包含 "download" 的所有 a 元素的字体颜色*/
        .attr4 a[class*="download"]{
            color: #c77405;
        }

        .attr5 a[class^="download"]{
                color: red;
        }

        .attr6 a[class$="download"]{
            color: red;
        }


| 选择器 | 描述 |
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute=value*] | 匹配属性值中包含指定值的每个元素。 |

xuanzeqi.jpg
xuanzeqi1.jpg

相关文章

  • 00.CSS基础知识回顾

    1.选择器 元素选择器 id选择器 类选择器 属性选择器[属性名]选取含有指定属性的元素[属性名="属性值"]选取...

  • 选择器

    标签选择器 class 属性选择器 id 属性选择器

  • html5选择器

    html5选择器 属性选择器 层级选择器 伪选择器 属性选择器 属性选择器和标签选择器、id选择器、类选择器一样,...

  • HTML5-Day3

    选择器:属性选择器、伪类选择器、伪元素选择器 属性选择器:属性是相对于标签而言,所谓属性选择器就是根据指定名称的属...

  • css选择器

    1.CSS选择器常见的有几种? 基础选择器 组合选择器 属性选择器属性选择器可以根据某个属性是否存在或属性的值寻找...

  • CSS:选择器、继承、权重、文本标签、列表、单位、颜色

    选择器: 属性选择器:[属性名]:设置名称为属性名 [属性名="属性值"]:属...

  • css学习笔记

    一、基础选择器 标签选择器:标签名 { css属性名:属性值; } 类选择器:.类名 { css属性名:属性值; ...

  • 第二章始

    目录 第二章 选择器 元素选择器 选择器分组 通配选择器 多类选择器 属性选择器 根据具体属性值选择 根据部分属性...

  • CSS选择器(转载)

    CSS属性选择器 CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入...

  • jQuery入门(2)

    jQuery选择器 属性筛选选择器 子元素筛选选择器 表单元素选择器 表单对象属性筛选选择器 特殊选择器this ...

网友评论

    本文标题:属性选择器

    本文链接:https://www.haomeiwen.com/subject/bjzcjftx.html