CSS 属性选择器（重要）

最新推荐文章于 2024-04-29 13:37:01 发布
最新推荐文章于 2024-04-29 13:37:01 发布
阅读量132 收藏
点赞数
分类专栏： Java CSS 文章标签： css3 属性选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45672377/article/details/111183631
版权
Java 同时被 2 个专栏收录
40 篇文章 1 订阅
订阅专栏
CSS
10 篇文章 0 订阅
订阅专栏

格式：标签[属性选择]{}

绝对相等属性（=）实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .Test a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        a[id = test03]{
            background: red;
        }

    </style>
</head>
<body>
<p class="Test">
    <a href="https://www.baidu.com" class="test test01" >1</a>
    <a href="" class="test" >2</a>
    <a href="image.png" id="test03" >3</a>
    <a href="image.pdf" class="test test01" >4</a>
    <a href="http" class="test test01 test04" >5</a>
    <a href="https://www.baiduyun.com" class="test" >6</a>
</p>
</body>
</html>

在这里插入图片描述

包含（*=）属性实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .Test a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        /*a[id = test03]{*/
        /*    background: red;*/
        /*}*/
        a[class *= test]{
            background: red;
        }

    </style>
</head>
<body>
<p class="Test">
    <a href="https://www.baidu.com" class="test test01" >1</a>
    <a href="" class="test" >2</a>
    <a href="image.png" id="test03" >3</a>
    <a href="image.pdf" class="test test01" >4</a>
    <a href="http" class="test test01 test04" >5</a>
    <a href="https://www.baiduyun.com" class="test" >6</a>
</p>
</body>
</html>

在这里插入图片描述

属性首部等于（^=）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .Test a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        /*a[id = test03]{*/
        /*    background: red;*/
        /*}*/
        /*a[class *= test]{*/
        /*    background: red;*/
        /*}*/
        a[href ^= image]{
            background: red;
        }

    </style>
</head>
<body>
<p class="Test">
    <a href="https://www.baidu.com" class="test test01" >1</a>
    <a href="" class="test" >2</a>
    <a href="image.png" id="test03" >3</a>
    <a href="image.pdf" class="test test01" >4</a>
    <a href="http" class="test test01 test04" >5</a>
    <a href="https://www.baiduyun.com" class="test" >6</a>
</p>
</body>
</html>

在这里插入图片描述

属性尾部等于（$=）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .Test a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            color: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器*/
        /*a[id = test03]{*/
        /*    background: red;*/
        /*}*/
        /*a[class *= test]{*/
        /*    background: red;*/
        /*}*/
        /*a[href ^= image]{*/
        /*    background: red;*/
        /*}*/
        a[href $= com]{
            background: red;
        }

    </style>
</head>
<body>
<p class="Test">
    <a href="https://www.baidu.com" class="test test01" >1</a>
    <a href="" class="test" >2</a>
    <a href="image.png" id="test03" >3</a>
    <a href="image.pdf" class="test test01" >4</a>
    <a href="http" class="test test01 test04" >5</a>
    <a href="https://www.baiduyun.com" class="test" >6</a>
</p>
</body>
</html>

在这里插入图片描述

向阳的人生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全面了解css 属性选择器
12-13
下面我们将详细探讨标题和描述中提到的CSS属性选择器： 1. `[class~="flower"]`：这个选择器用于选取包含`flower`类的元素。如果元素的`class`属性中包含了`flower`这个词，不论其在`class`属性值中的位置如何，该...
CSS3 选择器 属性选择器介绍
09-25
CSS3的属性选择器是CSS样式规则中的一个重要组成部分，它允许开发者根据HTML元素的特定属性来应用样式，从而实现更加精确的样式控制。在CSS2中，属性选择器就已经存在，但在CSS3中得到了更丰富的扩展和应用。 首先...
CSS中所有选择器详解
杨杨吖的博客
08-04 7271
作用：通过id属性值，找到页面中带有这个id属性值的标签，并设置样式。作用：通过类名，找到页面中所有的带有这个类名的标签，并设置样式。作用：通过标签名，找到页面中所有的这类标签，并设置样式。作用：找到页面中所有的标签，然后设置样式。作用：选中页面中同时满足多个选择器的标签。作用：同时选择多组标签，设置相同的样式。作用：选中含有指定属性和指定属性值。作用：选中含有指定属性和指定属性值。作用：选中含有指定属性的元素。作用：选中含有指定属性和。作用：选择某元素后面的。作用：选中指定属性和。
CSS3 - 属性选择器使用详解
ShenWangNian的博客
04-09 4300
（1）选择指定 class 属性值为“class”的任意类型的任意多个元素。选择匹配的 F 元素，且匹配的 F 元素被包含在匹配的 E 元素内。这里 F 不管是 E 元素的子元素或者是孙元素，都将被选中。其中 n 可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）。（1）如果父元素下的子元素类型都是一样的，那么上面的 *type 和 *child 选择器使用起来效果是一样的。其中 n 同样可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）。
CSS属性选择器的7个常见用法！
最新发布
u013179804的博客
04-29 1057
属性选择器是 CSS 中一种强大的选择器，它允许我们根据元素的属性及属性值来选择特定的元素，从而实现精准的样式控制。它主要的应用场景是，为表单字段设置统一样式、模块化CSS以避免命名冲突、标识表单控件的不同交互状态、定制多语言环境下的文本展示、响应不同媒体查询条件等。好，那我们一起来看看它的 7 个常见用法吧。
CSS选择器详解及部分元素属性
小小码农
03-12 2458
CSS选择器详解及部分元素属性
CSS 选择器的常见用法
达斯米奇的博客
06-04 1484
CSS 选择器的常见用法
【CSS】属性选择器
weixin_43790653的博客
08-16 3959
【CSS】属性选择器
CSS属性简写和选择器的优先级问题
09-24
- 类选择器、属性选择器或伪类：10 - 标签选择器、伪元素或子选择器：1 计算选择器优先级时，将所有这些权重相加。如果有多个规则具有相同的优先级，则按照“后来者居上”（或者称为层叠）的原则，后面的规则覆盖...
CSS 选择器支持列表
09-25
CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML 元素 * `.class`：选择...
CSS3 选择器 基本选择器介绍
12-13
第二部分我把他称作是属性选择器，第三部分我把他称作伪类选择器，这一部分也是最难理解和掌握的部分，今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图 下面我们先看看上
CSS第一章：5.属性选择器
要思考，要努力
04-26 876
一、属性选择器（attribute selectors）1.属性选择器的几种形式：[属性名*=属性值]2.HTML代码：3.CSS代码：3.1 语法格式1：[属性名]· 功能：选中所有带 title标签 的 某类型元素 · 代码： · 运行结果： 3.2 语法格式2：[属性名=属性值] · 功能：选中所有带 title 标签且 title 标签值为 指定值 的 某类型元素 · 代码： · 运行结果： 3.3 语
属性选择器
qq_58247332的博客
12-26 9011
1、属性选择器的写法： 标签名[属性] { 声明即样式 } 运行结果： 如上图，只要有 type 属性的 input 标签样式都会发生变化 当然，也可以给属性加上属性值来限制条件 运行结果： input[type="text"] ---- 只有 type 属性的属性值为 text 的 input 标签样式才会生效 2、进阶写法： ...
css属性选择器总结
qwguo
03-18 1047
css 属性选择器总结
CSS各种选择器详解
陈瑾
10-17 2535
本文主要介绍了12种选择器的功能及使用，重点讲述了伪类选择器和伪元素选择器。除此之外，本文最后还讲解了复杂选择器的优先级比较。
【web前端开发】CSS最常用的11种选择器
云泽野の编程日记
03-09 5277
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。CSS的作用:给HTML里面的标签设置样式简单点来说就是让HTML的页面变得更加好看。
CSS6大种选择器(超详细!!!!!!)
热门推荐
weixin_52682014的博客
11-05 2万+
注意：1.所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）/* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px *//* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 *//*选择属性名为title和属性值为ab的元素 ,设置字体颜色绿色 *//* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */语法：[属性值*=属性名]{} */作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式。
CSS选择器大全
认真学习前端的博客
03-08 1500
CSS选择器中的通用 ID class 标签 属性以及交集 并集选择器，伪类，伪元素选择器等等 还有选择器的优先级权值等内容
CSS的选择器(标签、类、id、通配符、后代、子元素、并集、链接伪类、focus伪类)
Bulut0907
01-23 4897
目录1. 标签选择器2. class类选择器3. id选择器4. 通配符选择器 1. 标签选择器 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> p { font-family: 宋体, sans-serif,
CSS选择器详解：元素、关系、属性、伪元素与伪类
"CSS选择器.pdf" 在前端开发中，CSS（Cascading Style Sheets）是用于控制...同时，随着CSS版本的更新，例如CSS3引入了更多的选择器，如更强大的伪类和伪元素，以及更精确的属性选择符，使得CSS的表达能力进一步增强。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值