CSS3中的属性选择器

目录：html5+css3网页设计与制作目录

根据html元素的属性及属性的值来选择元素，分别增加了3种[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。

1.根据属性或属性值选中标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            a[title]{
                font-size: 18px;
                color: red;
            }
            
            p[class]
            {
                background-color: #008000;
            }
        </style>
    </head>
    <body>
        <p>这是没有class属性的p标签</p>
        <p class="test">这是p标签</p>
        <a href="#" >这是没有tilte属性的a标签</a>
        <a href="#" title="链接">这是测试的a标签</a>
    </body>
</html>

2.[att^=val]，att属性值包含前缀为value的字符串。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            p[id^=fi]{
                color: red;
            }
            
            p[id^=f]{
                color: green;
            }
            
            p[class^=pc]
            {
                background-color: bisque;
            }
            
            img[name^=tit]
            {
                border: 1px solid #FF0000;
            }
        </style>
    </head>
    <body>
        <p id="first">这是第一个P标签</p>

       <p class="pclass">这是第一个P标签</p>    
       
       <img src="" alt="这是一张图片" name="title" />
    </body>
</html>
View Code

3.[att$=val]，att属性值包含后缀为value的字符串。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            p[id$=st]{
                color: red;
            }
            
            p[id$=t]{
                color: pink;
            }
            
            p[class$=ss]
            {
                background-color:gold;
            }
            
            img[name$=e]
            {
                border: 2px double #b469ff;
            }
        </style>
    </head>
    <body>
        <p id="first">这是第一个P标签</p>

       <p class="pclass">这是第一个P标签</p>    
       
       <img src="" alt="这是一张图片" name="title" />
    </body>
</html>
View Code

4.[att*=val]，att属性值包含value为子字符串的字符串。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            p[id*=ir]{
                color: red;
            }
            
            p[id*=t]{
                color: peru;
            }
            
            p[class*=ass]
            {
                background-color:cyan;
            }
            
            img[name*=e]
            {
                border: 2px dotted #61ff61;
            }
        </style>
    </head>
    <body>
        <p id="first">这是第一个P标签</p>

       <p class="pclass">这是第一个P标签</p>    
       
       <img src="" alt="这是一张图片" name="title" />
    </body>
</html>
View Code

 

总结：CSS 属性选择器参考手册

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

参考文章：

http://caibaojian.com/w3c/css/css_syntax_attribute_selector.html

posted @ 2021-03-27 15:35  YorkShare  阅读(165)  评论(0)  编辑  收藏  举报