web前端 ——【属性选择器 & 通用选择器】

1.通用选择器
*：将属性应用于页面的所有元素

2.属性选择器
eg. #list{...} a{...}

3.按属性或属性值选择【selecting by attribute or value of attribute】

[title]{    /*所有有title属性的元素*/
    background-color:red;
}

[title="bestpaper"]{    /*title属性为bestpaper的元素*/
    text-decoration: line-through;
}

4.按值的开始或结束选择【selecting by beginning or end of value】
(可以是多个字母)
^= : 开头   eg.[title^="S"]
$= : 结尾   eg.[title$="at"]

5.包含某个值【selecting by other parts of value】
(1)只要包含就算

[title*="sia"]{
    border:3px dotted blue;
}

(2)包含的值为单独的一个单词

[title~="Singapore"]{
    text-decoration: underline;
}

(3)作为前缀 以prefix或prefix-开头

[title|="Chantilly"]{
    border: 3px dotted red;
}

5.其他的一些情况
(1) 不区分大小写匹配  添加 i

[title*="sia" i]{...}

(2)

img[alt="cat"]{...}

img[alt="cat"][src^="nicecat"]{...}