CSS属性选择器

最新推荐文章于 2024-03-06 11:42:17 发布

小简(JanYork)

最新推荐文章于 2024-03-06 11:42:17 发布

阅读量303

点赞数 10

分类专栏： HTML5基础知识 CSS3基础讲解文章标签： css html html5 前端

本文链接：https://blog.csdn.net/qq_60750453/article/details/120765677

版权

HTML5基础知识同时被 2 个专栏收录

14 篇文章 10 订阅

订阅专栏

CSS3基础讲解

10 篇文章 4 订阅

订阅专栏

属性选择器

温馨提示：建议自己尝试运行代码结合说明观察规律

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>属性选择器</title>
    <style>
        /* 使用属性选择器选择title属性 */
        [title]{
            color: brown;
            /* 使用color属性改变了所有存在有title属性的标签的内容的颜色 */
            /* 这个效果对应29~31行代码 */
        }

        /* ---------------------------------------- */

        /* 使用带标签的属性选择器进行选择 */
        p[id]{
            color: coral;
            font-size: 25px;
            /* 这里，我们对含有id属性的p标签进行字体与颜色改变 */
            /* 也就是说，必须满足两个条件，既要是<p>标签，又必须含有id属性 */
                /* 这个效果对应38、40行代码 */
        }

        font[id]{
            color: fuchsia;
            /* 这个是改变含有id属性的font标签里面的内容颜色 */
            /* 对应46与44行代码 */
        }
        
        /* ---------------------------------------- */

        [class=aaa]{
            color: green;
            font-size: 23px;
            /* 这个效果对应57和59局，57与59句代码的class属性值都是aaa，而58句代码class属性值是bbb */
            /* 所以第58句不会被这个选择器选择，因此没有变色也没有改变字体大小 */
        }

        /* ---------------------------------------- */
        /* 选择class值为aaa开头的标签 */
        [class^=aaa]{
            color: firebrick;
            font-size: 20px;
        }
        /* 选择class值为bb结尾的标签 */
        [class$=bb]{
            color: mediumblue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>属性选择器</h1>
    <p>属性选择器语法</p>
    <p>格式：[属性名]{}</p>
    <p>作用：选择含有指定属性的元素</p>
    <p title="abc">我们在这句代码来实现一下</p>
    <p title="efg">我们在这两个p标签里使用一个title元素<br>在上面的style标签里面使用属性选择器，选择title属性</p>
    <font title="hjk">不管是什么标签，只要里面存在有title属性</font>
    <font>我们的属性选择器就可以对这个标签里面的内容进行css样式改变 </font>
    <p>而我们标签相同，但是标签里没有选中的属性时，是不会受到属性选择器的影响的！</p>
    <!-- --------------------------分割线--------------------------------------------- -->
    <p id="a">但是，又有一个问题，如果我只想让p标签或者font标签里面含有指定属性的内容进行样式改变呢?</p>
    <font id="b">先看看我们的属性选择器语法：[属性名]</font>
    <p id="c">如果，我在这个属性前面加一个html的标签呢？没错，他会先选择html的标签，再选择标签中含有指定属性的标签，对其内容进行改变</p>
    <font title="d">我们来试试看，使用这个格式：标签+[属性]{}</font>
    <p title="e">格式：标签+[属性]{}</p>
    <p title="f">作用：选择含有指定属性又满足指定标签的元素</p>
    <p>我们再style里面实验一下</p>
    <!-- 注意：我们上面这四个标签里面都有id属性存在，并且我们的属性选择器跟属性值没有关系，简单点说，就是和属性的名字没啥关系 -->
    <!-- --------------------------分割线--------------------------------------------- -->
    <p class="aaa">有人说，既然元素的值没什么用，那我们要它干嘛？</p>
    <p class="bbb">当然不可能没用，我们可以使用另一种语法，比如，选择属性相同并且要求属性值也相同的标签，怎么办？</p>
    <font class="aaa">来看看啊，我们给我们上面两句和这句都设置一个class属性啊，51句代码我们取值bbb，这句和50句，我们取值aaa</font>
    <p>格式：[标签=属性值]{}</p>
    <p>作用：选择含有指定元素又满足指定属性值的标签内容</p>
    <!-- 我们使用属性选择器让aaa改变颜色与字体样式 -->
    <!-- --------------------------分割线--------------------------------------------- -->
<h2 style="color: deeppink;">重点</h2>
    <p class="aaaduh">有时候，我们不能让属性值名字相同，但是又想让它一起选择，怎么办？</p>
    <p class="aaabsadb">比如：id属性值规范中不允许重复，但是我想选择id属性中的部分怎么办？</p>
    <p class="asjdbb">我们可以再为id属性取值时，让它值的开头或者结尾存在共同点</p>
    <p class="gjbb">比如：id="aaashkjd"与id="aaankwhw" / 或者是：id="shdsajkidbb"与id="sabb"</p>
    <font class="abb">它们都是相同开头（aaa开头）后面那个例子是相同结尾（bb结尾）,<br>这里因为id属性被全选了，我们用class属性，在style里面改变一下试试</font>
    <!-- 使用css将class属性并且是aaa开头的属性值的标签变红色，bb结尾的class属性值变蓝色 -->
    <h2>语法：</h2>
    <p>选择相同开头的属性：</p>
    <p>[属性^=属性值相同开头]</p>
    <p>选择相同结尾的属性：</p>
    <p>[属性$=属性值相同结尾]</p>
</body>
</html>

代码效果图文对比图

CSS效果全览图

对比全览图

小简(JanYork)

关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
4
评论
CSS属性选择器

属性选择器温馨提示：建议自己尝试运行代码结合说明观察规律<!DOCTYPE html><html lang="zh"><head> <title>属性选择器</title> <style> /* 使用属性选择器选择title属性 */ [title]{ color: brown; /* 使用color属性改变了所有存在有ti
复制链接

扫一扫