web前端一起努力

属性选择器

2018-05-23  本文已影响0人  追逐_chase
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
上一篇下一篇

猜你喜欢

热点阅读