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 @   YorkShare  阅读(182)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛