CSS05（属性选择器）

最新推荐文章于 2024-07-24 21:48:20 发布

悬梁锥刺股

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量59

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/qq_51224492/article/details/121560043

版权

CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

属性选择器

属性选择器就是把id与class结合起来使用

基础html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<p class="rainbowsix">
    <a href="http://www.baidu.com" id="ash">1</a>
    <a href="http://www.bilibili.com" class="zofia ela">2</a>
    <a href="1.jpg" class="links thermite emp">3</a>
    <a href="2345.jpg">4</a>
    <a href="r6.png">5</a>
    <a href="flash.png">6</a>
    <a href="" id="slenge">7</a>
    <a href="" class="rook doc">8</a>
</p>
</body>
</html>

基础css代码：

/*选中存在id标签的元素*/
.rainbowsix a{
    float: left;
    /*显示为块元素*/
    display: block;
    /*块的宽和高*/
    height: 50px;
    width: 50px;
    /*去除下划线*/
    text-decoration: none;
    /*块背景颜色*/
    background-color: deepskyblue;
    /*圆角边框*/
    border-radius: 10px;
    /*块的外边距*/
    margin-left: 10px;
    /*行高 控制字体上下居中*/
    line-height: 50px;
/*    控制字体左右居中*/
    text-align: center;
}

测试访问
在这里插入图片描述

选择带有id属性的标签

css代码：

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

测试访问
在这里插入图片描述

选择含有某种元素的标签

css代码

a[class*=zofia]{
background-color: green;
}

测试访问
在这里插入图片描述

选择某种元素为开头的标签

css代码

a[class^=rook]{
    background-color: green;
}

测试访问
在这里插入图片描述

选择以某个元素为结尾的标签

css代码

a[href$=png]{
    background-color: green;
}

测试访问
在这里插入图片描述

悬梁锥刺股

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS05（属性选择器）

属性选择器属性选择器就是把id与class结合起来使用基础html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><link rel="stylesheet" href="css/style.css"><body><p class
复制链接

扫一扫

专栏目录