CSS学习日记5-选择器3-属性选择器1

最新推荐文章于 2024-11-05 20:00:00 发布

此时的你才是你

最新推荐文章于 2024-11-05 20:00:00 发布

阅读量180

点赞数

分类专栏： CSS 学习日记文章标签： css

本文链接：https://blog.csdn.net/qq_24681419/article/details/107818406

版权

CSS 学习日记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

二.各种选择器
（一）基本选择器
（二）结构选择器
（三）属性选择器
可以选择html标签里的各种属性。属性用 [ ] 括起来。有时候不用定义类，可以直接找到其属性，就可以对其进行修饰。

.
1.可以光秃秃的，只选择属性
凡是有title属性的，都被选中。

 <!-- html -->
<body>
    <main>
        <article>
            
            <h1 title>
             我只有title属性,没有名字
            </h1>
            <h1 title="youming">我只有title，但是比上面大哥好，我有名字</h1>
             <h1>我一无所有</h1>
            <h1 title id>我有title，还有id，气不气</h1>
            <h1 id>我只有id</h1>
        </article>
    </main>
</body>

 <!-- CSS -->
     <style>
        h1[title]{
            color: red;

        }
    </style>

在这里插入图片描述

2.可以选择特定的属性
给title属性加上了名字 ，只有有名字的才会被选中

 <!-- CSS -->
        <style>
            h1[title="youming"]{
                color: red;

            }
        </style>

.
3.还可以多个属性放在一起。
id和title同时存在的才会被选中。

 <!-- CSS -->
        <style>
            h1[title][id]{
                color: red;
                }
        </style>

在这里插入图片描述
4.还可以更详细的选择属性
1）选择以某字段开始的属性，用 ^ 符号。下面以www开头的被选中了

 <!-- html -->
<body>
    <main>
        <article>
            <h1 title="www.baidu.com">百度网址www.baidu.com</h1>
            <h1 title="www.google.com">谷歌网址www.google.com</h1>
            <h1 title="baidu.com">简写百度网址baidu.com</h1>
            <h1 title="baidu">就是个名字baidu</h1>
        </article>
    </main>
</body>

 <!-- CSS -->
        <style>
            h1[title^="www"] {
                color: red;
            }
        </style>

在这里插入图片描述

5.还可以选择以某字段结尾

 <!-- CSS -->
        <style>        
            h1[title$="com"] {
                color: red;
            }

        </style>

在这里插入图片描述

此时的你才是你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录