21-属性选择器下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-属性选择器下</title> <style> /* img[alt^=abc]{ color: red; } */ /* img[alt|=abc]{ color: red; } img[alt$=abc]{ color: blue; } */ /* img[alt*=abc]{ color: red; } */ img[alt~=abc]{ color: red; } </style> </head> <body> <!-- 1.属性的取值是以什么开头的 [attribute|=value] CSS2 [attribute^=value] CSS3 两者之间的区别: CSS2中的只能找到value开头,并且value是被-和其它内容隔开的 CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开 2.属性的取值是以什么结尾的 [attribute$=value] CSS3 3.属性的取值是否包含某个特定的值得 [attribute~=value] CSS2 [attribute*=value] CSS3 两者之间的区别: CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的 CSS3中的只要包含value就可以找到 --> <!-- <img src="" alt="abcdef"> <img src="" alt="abc-www"> <img src="" alt="abc ppp"> <img src="" alt="defabc"> <img src="" alt="ppp abc"> <img src="" alt="www-abc"> <img src="" alt="qq"> <img src="" alt="yy"> --> <img src="" alt="abcwwwmmm"> <img src="" alt="wwwmmmabc"> <img src="" alt="wwwabcmmm"> <img src="" alt="www-abc-mmm"> <img src="" alt="www abc mmm"> <img src="" alt="qq"> </body> </html>