CSS属性选择器

最新推荐文章于 2024-08-16 23:09:58 发布

lxl211

最新推荐文章于 2024-08-16 23:09:58 发布

阅读量795

点赞数

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

本文链接：https://blog.csdn.net/lxllxl211/article/details/128206268

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

直接上代码：

<body>
    <p align="center">lxl</p>
    <p align="right">李旭亮1</p>
    <p align="left">李旭亮2</p>
    <!-- 3 -->
    <h2 align="center">李旭亮3</h2>
    <!-- 4 -->
    <font class="a">a</font>
    <font class="ab1">ab</font>
    <font class="abc">abc</font>
    <font class="abcd">abcd</font>
    <font class="abcde">abcde</font>
</body>

运行结果：
在这里插入图片描述

1、[属性名]：选中所有是这个属性名的元素

语法：
[属性名]{

}
添加样式

[align]{
       color: aqua;//蓝色吧
}

在这里插入图片描述

2、标签[属性名]（中间没有空格）：选中这个标签下是这个属性名的所有元素

/* 先匹配p标签，再看是否有align这个属性 */
p[align]{
    color: rgb(255, 0, 0);
}

李旭亮3因为是h2标签，不是p标签，所有没有被选中换颜色
在这里插入图片描述

3、[属性名=“属性值” ] 匹配属性等于值的所有元素

[align="center"]{
    color: yellow;
}

在这里插入图片描述

4、标签[属性名^=“属性值”]：选中这个标签下，属性值以某些元素开头的元素

/* 先匹配font标签 然后再来匹配class的属性值以abc开头的元素 */
font[class^="abc"]{
    color: chartreuse;//绿色
}

在这里插入图片描述
5、标签[属性名$=“属性值”]：选中这个标签下，属性值以某些元素结尾的元素

/* 先匹配font标签 然后再来匹配class的属性值以1结尾的元素 */
font[class$="b1"]{
     font-size: 40px ;
     color: chocolate;/*橘色吧*/
}

在这里插入图片描述
5、标签[属性名*=“属性值”]：选中这个标签下，属性名以某些元素结尾的元素

/* 先匹配font标签 然后再来匹配class的属性值中包含de的元素 */
font[class*="de"]{
     font-size: 50px;
     color: deeppink;
}

在这里插入图片描述

lxl211

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS属性选择器

1、[属性名]：选中所有是这个属性名的元素

2、标签[属性名]（中间没有空格）：选中这个标签下是这个属性名的所有元素

3、[属性名=“属性值” ] 匹配 属性等于值的所有元素

4、标签[属性名^=“属性值”]：选中这个标签下，属性值以某些元素开头的元素

3、[属性名=“属性值” ] 匹配属性等于值的所有元素