【Css】属性选择器

最新推荐文章于 2022-11-21 21:18:46 发布
最新推荐文章于 2022-11-21 21:18:46 发布
阅读量111 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39370093/article/details/100191680
版权

[attribute] 用于选取带有指定属性的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *[my-color-pink]{
            color: pink;
        }
    </style>
</head>
<body>
<ul>
    <li my-color-pink>1</li>
    <li my-color="red">2</li>   
</ul>
</body>
</html>


[attribute=value]用于选取带有指定属性和值的元素，属性的值必须完全匹配。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>       
        *[my-color='red']{
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li my-color-pink>1</li>
    <li my-color="red">2</li>
    <li my-color="blue color">3</li>
    <li my-color="color blue">4</li>
    <li my-color="color-blue">5</li>
    <li my-color="green-color">6</li>
    <li my-color="greenColor">7</li>
    <li my-color="gColor">8</li>
    <li my-color="yColor">9</li>
    <li my-color="color-pink">10</li>
    <li my-color="color-p">10</li>
    <li my-color="color-pink-on">11</li>
    <li my-color="color-pink-off">11</li>
</ul>
</body>
</html>

 

[attribute~=value]匹配单词，单词的意思就是匹配的内容前面或者后面有空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>  
        *[my-color~='blue']{
            color: blue;
        }
    </style>
</head>
<body>
<ul>
    <li my-color-pink>1</li>
    <li my-color="red">2</li>
    <li my-color="blue color">3</li>
    <li my-color="color blue">4</li>
    <li my-color="color-blue">5</li>
    <li my-color="green-color">6</li>
    <li my-color="greenColor">7</li>
    <li my-color="gColor">8</li>
    <li my-color="yColor">9</li>
    <li my-color="color-pink">10</li>
    <li my-color="color-p">10</li>
    <li my-color="color-pink-on">11</li>
    <li my-color="color-pink-off">11</li>
</ul>
</body>
</html>

[attribute|=value]以value-开头或者直接全等于value
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>      
        *[my-color|='green']{
            color: green;
        }
    </style>
</head>
<body>
<ul>
    <li my-color-pink>1</li>
    <li my-color="red">2</li>
    <li my-color="blue color">3</li>
    <li my-color="color blue">4</li>
    <li my-color="color-blue">5</li>
    <li my-color="green-color">6</li>
    <li my-color="greenColor">7</li>
    <li my-color="green">8</li>
    <li my-color="yColor">9</li>
    <li my-color="color-pink">10</li>
    <li my-color="color-p">11</li>
    <li my-color="color-pink-on">12</li>
    <li my-color="color-pink-off">13</li>
</ul>
</body>
</html>

[attribute^=value]只要以value开头即可
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *[my-color^='g']{
            color: green;
        }
    </style>
</head>
<body>
<ul>
    <li my-color-pink>1</li>
    <li my-color="red">2</li>
    <li my-color="blue color">3</li>
    <li my-color="color blue">4</li>
    <li my-color="color-blue">5</li>
    <li my-color="green-color">6</li>
    <li my-color="greenColor">7</li>
    <li my-color="green">8</li>
    <li my-color="yColor">9</li>
    <li my-color="color-pink">10</li>
    <li my-color="color-p">11</li>
    <li my-color="color-pink-on">12</li>
    <li my-color="color-pink-off">13</li>
</ul>
</body>
</html>

[attribute$=value]以value结尾即可
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>    
        *[my-color$='p']{
            color: pink;
        }
    </style>
</head>
<body>
<ul>
    <li my-color-pink>1</li>
    <li my-color="red">2</li>
    <li my-color="blue color">3</li>
    <li my-color="color blue">4</li>
    <li my-color="color-blue">5</li>
    <li my-color="green-color">6</li>
    <li my-color="greenColor">7</li>
    <li my-color="green">8</li>
    <li my-color="yColor">9</li>
    <li my-color="color-pink">10</li>
    <li my-color="color-p">11</li>
    <li my-color="color-pink-on">12</li>
    <li my-color="color-pink-off">13</li>
</ul>
</body>
</html>

[attribute*=value]value出现在任意位置都可以
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>      
        *[my-color*='or']{
            color: pink;
        }
    </style>
</head>
<body>
<ul>
    <li my-color-pink>1</li>
    <li my-color="red">2</li>
    <li my-color="blue color">3</li>
    <li my-color="color blue">4</li>
    <li my-color="color-blue">5</li>
    <li my-color="green-color">6</li>
    <li my-color="greenColor">7</li>
    <li my-color="green">8</li>
    <li my-color="yColor">9</li>
    <li my-color="color-pink">10</li>
    <li my-color="color-p">11</li>
    <li my-color="color-pink-on">12</li>
    <li my-color="color-pink-off">13</li>
</ul>
</body>
</html>

夜雨Gecer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 属性选择器_动力节点Java学院整理
09-24
总的来说，CSS属性选择器提供了一种强大且灵活的方法来定位和设计HTML文档中的特定元素，无论这些元素的类名或ID是什么。它们极大地扩展了CSS的选择能力，使开发者能够创建更为精细和动态的网页布局。在编写CSS时，...
CSS 属性 选择器
01-19
DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。 属性选择器 下面的例子是把包含标题（title）的所有元素变为蓝色： 实例 [title] { color:blue; }   属性和值选择器 下面的实例改变了标题title=’...
属性选择器
qq_58247332的博客
12-26 8978
1、属性选择器的写法： 标签名[属性] { 声明即样式 } 运行结果： 如上图，只要有 type 属性的 input 标签样式都会发生变化 当然，也可以给属性加上属性值来限制条件 运行结果： input[type="text"] ---- 只有 type 属性的属性值为 text 的 input 标签样式才会生效 2、进阶写法： ...
5、属性选择器
zhengqiqiqinqin的专栏
02-26 3631
以下公用如下的HTML代码 <p title="abc">这是第一个p</p> <p title="abcd">这是第二个p</p> <p title="hello">这是第三个p</p> <p>这是第四个p</p> <div title="abc">这是div里的内容</div> 一、属性选择器语法1：[属性名]选择含有指定属性的的元素。
简述css属性选择器的几种定义方式_CSS属性选择器的四种格式
weixin_39811150的博客
12-20 801
CSS属性选择器的四种格式互联网 发布时间：2008-10-17 19:26:55 作者：佚名 我要评论属性选择器(AttributeSelectors)，或许你不应该对属性选择器感到陌生，从本质上说，id跟类选择器其实就是属性选择器，只不过是选择了id或者类的值(value)而已。属性选择器的格式是元素后跟中括号，中括号内带属性，或者属性表达式(不知道描述是否正确，自创的属性选择器...
CSS的选择器(超详细)
热门推荐
前端开发,HTML5,css3,JavaScript,node.js,vue
11-21 7万+
一、常用的选择器 1.元素选择器 2.类选择器(class选择器) 3.id选择器 4.通配符选择器 二、群组选择器 三、关系选择器 1.后代选择器 2.子代选择器 3.相邻兄弟选择器 4.通用兄弟选择器 5.案例 四、属性选择器 五、伪类选择器 1.常用的伪类选择器 2.否定伪类 3.元素的伪类 六、伪元素选择器
全面了解css 属性选择器
09-24
下面小编就为大家带来一篇全面了解css 属性选择器。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS属性选择器的四种格式
12-11
属性选择器（AttributeSelectors），或许你不应该对属性选择器感到陌生，从本质上说，id跟类选择器其实就是属性选择器，只不过是选择了id或者类的值（value）而已。　属性选择器的格式是元素后跟中括号，中括号内带...
CSS属性选择器详解.pdf
02-28
CSS属性选择器详解 CSS中的属性选择器是一种强大的选择器，允许开发者根据HTML元素的属性值来选择元素。今天，我们将深入探讨CSS属性选择器的详细解释。 什么是CSS属性选择器？ --------------------- CSS属性...
属性选择器实例.html
08-22
学习css3过程中　写的一些test例子，根据图解ｃｓｓ３大漠老师写的。
html属性选择器怎么写,属性选择器
weixin_29635919的博客
07-02 1337
属性选择器在css2中引入，使我们可以根据元素的属性及属性值来选择元素。下面分别来说明：(1)简单属性选择器简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。使用方法为: 元素名[属性名] 或 *[属性名]。比如我们希望选择带有alt属性的所有img元素： img[alt] { ...}选择带有title属性的所有元素：*[title] { ...}。同类选择器类似，我们也可以根据...
CSS-属性选择器的用法详解
weixin_44486539的博客
09-29 7059
属性选择器可以为拥有指定属性的 HTML 元素设置样式；属性选择器通过 [] 来定义，[] 内部为元素的属性 el[attr=val] 选择 attr 为 val 的 el 元素 /* 选择 div 下的 p 标签的 class 属性值为 blue 的元素 */ div p[class="blue"] { background: blue; } <div> <p cl...
关于属性选择器的常用属性以及使用方法
m0_60273757的博客
08-03 1548
属性选择器 官方解释如下图，下面我们通过代码块来给大家解释具体意思； 这里我们用input标签详细解释一下： 首先在body里面构建一个表单from，然后在里面放许多input标签 <form action="#"> 文本框1：<input type="text" name="" id=""><br> 文本框2：<input type="text" name="" id=""><br> 文本框3.
CSS属性选择器
我的博客
01-24 2427
CSS属性选择器 CSS属性选择器即是通过html的属性来选择元素，下面来分别看下CSS的几种元素选择器。 1.E[att] 选择具有att属性的E元素 input[type]{height: 40px;background-color:red;} ""> type="text" name="name" placeholder="请输入用户名"/> type="p
第六章 属性选择器
唐僧的专栏
05-13 4969
我们平常提到的 属性选择器 是指 [type = "radio"] 这类选择器，实际上 这是一种简称。 指的是 “属性值匹配选择器”； 在正式文档中: 类选择器 和 ID 选择器都属于 属性选择器。 应为本质上 类选择器 是 匹配 HTML 中 class 的属性值， ID 选择器 是 匹配 HTML 中的 Id 属性值。 ID选择器 和 类选择器 ID选择器 和 类选择器 都属于 属性选择器， 他们的身份看起来 高贵而 特殊， 毕竟 HTML 原生属性那么多， 就 id 和 class 两..
CSS引入、选择器、优先级及权重
氧的博客
09-18 186
引入css的三种方式 <!-- 行间样式 --> <div style="width: 100px;height: 100px;background-color: #f40;"></div> <!-- 内嵌式css --> <style> div{ width: 200px; height: 200px; background-col
CSS选择器（三）属性选择器
丶梦里啥都有的博客
01-11 307
写法 描述 标签[属性名] div[class]选中的是所有包含class这个属性的div 元素[属性名=‘属性值’] 某属性名等于某属性值的元素将被选中 元素[属性名~=‘属性值’] 一个元素有多个属性的属性值时，只要含有其中一个，或者值列表只有一个该属性值时，元素被选中 元素[属性名^=‘属性值’] 某元素的属性值中，以某一字段或者某多段字段开头的元素都会被选中 ...
css属性选择器优先级
最新发布
05-14
具体来说，以下是影响CSS属性选择器优先级的因素： 1. 选择器中包含的ID选择器数量（#id） 2. 选择器中包含的类选择器、属性选择器和伪类选择器的数量（.class、[attr]、:hover等） 3. 选择器中包含的元素选择器和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值