前端学习之CSS——（6）

最新推荐文章于 2024-07-24 10:40:52 发布

努力编程的阿曼

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量27

点赞数

分类专栏：前端学习文章标签：前端学习 css

本文链接：https://blog.csdn.net/qq_62965644/article/details/132817232

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、属性选择器（常用选择器）

例如我们有很多的属性

<body>
    <a href="http://www.baidu.com" class="link1" id="first">1</a>
    <a href="" class="link2" target="_blank" title="test" id="second">2</a>
    <a href="images/111.html" class="link3">3</a>
    <a href="images/444.html" class="link4">4</a>
    <a href="images/555.jpg" class="link5">5</a>
    <a href="/a.doc">6</a>
    <a href="/add.pdf">7</a>
    <a href="ccc.doc">8</a>
    <a href="wwwda.doc">9</a>
    <a href="adcd.pdf">10</a>
</body>

使用以下的方法我们可以改变所有的a元素

    <style>
        a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: aqua;
            text-align: center;
            color: bisque;
            text-decoration: none;
            margin-right: 10px;
            font: bold 20px/50px Arial;
        }
    </style>

但是假如现在，我们需要选择所有的，拥有id属性的a标签选出操作就可以使用属性选择器，a[属性]{}是一种属性选择器

        a[id]{
            background-color: yellow;
        }

例如添加以上代码后可以发现所有的带有id属性的标签都被选中变为了黄色

但是如果我们需要具体到某一个id呢这时我们的a[属性]就可以变为a[属性=某一个具体的属性名称]，例如

        a[id=first]{
            background-color: blue;
        }

当然，有时我们也可以选择一些属性中包含某些名称的内容例如

        a[class*="link"]{
            background-color: brown;
        }

所有类元素中含有“link”的都会被选择

在css中“=”表示绝对等于，而“*=”就为包含这个内容的量

除此之外我们还可以选择以xxx开头，以xxx结尾的内容，例如我们要选择href中以http开头的元素可以使用以下内容

        a[href^=http]{
            background-color: green;
        }

同理，以$=就可以选择以xxx为结尾的内容

        a[href$=doc]{
            background-color: gray;
        }

以上就是属性选择器的所有内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: aqua;
            text-align: center;
            color: bisque;
            text-decoration: none;
            margin-right: 10px;
            font: bold 20px/50px Arial;
        }
        /* 属性名，属性名=属性值
        =绝对等于 *=包含这个元素 
        ^=以这个开头
        $=以这个结尾*/
        /* 选择存在id属性的元素     a[]{} */
        a[id]{
            background-color: yellow;
        }
        a[id=first]{
            background-color: blue;
        }
        a[class*="link"]{
            background-color: brown;
        }
        /* 选择href中http开头的元素 */
        a[href^=http]{
            background-color: green;
        }
        a[href$=doc]{
            background-color: gray;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" class="link1" id="first">1</a>
    <a href="" class="link2" target="_blank" title="test" id="second">2</a>
    <a href="images/111.html" class="link3">3</a>
    <a href="images/444.html" class="link4">4</a>
    <a href="images/555.jpg" class="link5">5</a>
    <a href="/a.doc">6</a>
    <a href="/add.pdf">7</a>
    <a href="ccc.doc">8</a>
    <a href="wwwda.doc">9</a>
    <a href="adcd.pdf">10</a>
</body>
</html>

努力编程的阿曼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习之CSS——（6）

除此之外我们还可以选择以xxx开头，以xxx结尾的内容，例如我们要选择href中以http开头的元素可以使用以下内容。但是假如现在，我们需要选择所有的，拥有id属性的a标签选出操作就可以使用属性选择器，a[属性]{}是一种属性选择器。但是如果我们需要具体到某一个id呢这时我们的a[属性]就可以变为a[属性=某一个具体的属性名称]，例如。例如添加以上代码后可以发现所有的带有id属性的标签都被选中变为了黄色。当然，有时我们也可以选择一些属性中包含某些名称的内容例如。使用以下的方法我们可以改变所有的a元素。
复制链接

扫一扫

专栏目录