属性选择器的使用

最新推荐文章于 2024-04-29 13:37:01 发布
最新推荐文章于 2024-04-29 13:37:01 发布
阅读量518 收藏
点赞数
文章标签： css3 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lonelydesertea/article/details/121761967
版权
本文深入探讨了CSS中三种特殊的属性选择器：[attr|=val]，用于选取lang属性值为特定单词或以该单词开头的元素；[attr~=val]，匹配属性值中包含指定单词的元素；以及[attr$=val]，用于选取属性值以指定单词结尾的元素。这些选择器在网页样式控制中起到关键作用，尤其是在处理国际化和语言特定样式时。
摘要由CSDN通过智能技术生成

属性选择器-[attr|=val]

■title属性值恰好等于one或者 以单词one开头且后面紧跟着连字符-的元素

  • 一般是用在lang属性上面

属性选择器-[attr~=val]

属性选择器-[attr$=val]

Lonelydesertea
关注
前端开发：CSS属性选择器
软贱开发攻城狮
09-30 1649
做前端开发的都知道，CSS的选择器常用的大概分为四类：元素选择器、id选择器、类选择器、属性选择器。而且CSS的选择器也是根据优先级顺序来执行的，实际开发中会根据业务场景的需要结合选择器的顺序，来选择使用选择器。本章博文就来分享一下常用的CSS的选择器中的属性选择器，也叫做通配选择器，总结一下，方便查阅使用。属性选择器是在CSS 2的时候才产生的，属性选择器可以通过元素的属性以及属性值来选择元素的操作。一般情况下把HTML元素属性放在中括号中，就称之为属性选择器，如：[attribute]。
k8s标签选择器使用详解
congge
03-22 8419
k8s标签选择器使用详解
CSS属性选择器的7个常见用法！
最新发布
u013179804的博客
04-29 1384
属性选择器是 CSS 中一种强大的选择器，它允许我们根据元素的属性及属性值来选择特定的元素，从而实现精准的样式控制。它主要的应用场景是，为表单字段设置统一样式、模块化CSS以避免命名冲突、标识表单控件的不同交互状态、定制多语言环境下的文本展示、响应不同媒体查询条件等。好，那我们一起来看看它的 7 个常见用法吧。
属性选择器使用
weixin_45502106的博客
04-20 272
1.如button或者input按钮 button[disabled]:not([type]) { color: rgba(255, 255, 255, .6); background: #DDDDDD; } 意思是button按钮的disabled属性触发时,颜色变成 rgba(255, 255, 255, .6),背景变成#DDD ...
【CSS3】属性选择器的使用
weixin_43013118的博客
01-19 169
CSS3属性选择器
【CSS】属性选择器
热门推荐
luckyboy!的博客
08-20 1万+
属性选择器是通过元素的属性及属性值来选择元素的。下面介绍属性选择器的五种用法。
css属性选择器应用
bangxionger9224的博客
03-14 145
代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head&...
简述css属性选择器的几种定义方式_CSS简介,语法,选择器分类使用,属性设置
weixin_39673051的博客
12-20 1675
1.CSS简介CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)，主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。这里要说一下 w3c标准： h...
在js中如何使用jquery的属性选择器
weixin_57760860的博客
04-20 1587
个人理解： 可以更快捷的改变标签的属性 第一步先创建好需要用的标签： <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> ...
DOM - 节点选择器和属性选择器
Jared864的博客
05-12 1415
Day21 一、DOM 介绍 概念：DOM（document of module）、 DOM不属于BOM window对象身上有提供document对象 DOM主要控制页面（html文件），所有的页面操作都需要通过DOM DOM的结构，html结构：属性结构，包含结构，家族结构（父子级，兄弟级） html根元素：head，body DOM树形结构的每个组成部分，都叫节点。所有节点，都是对象 选择器 元素节点选择器（只有元素节点） 直接选择器 id选择器：document.getELe
jquery 属性选择器用法
ling811的专栏
12-20 689
无标题文档 $(document).ready(function(){ $("[id]").css("color","blue"); }) 实验element 这是个带class的p1 p标签2 p标签3 h3 这是个div li1 li2 li3 效果图： 无标题文档 $(function(){ $("body [id!=main
css中属性选择器用法总结c
kbx8916的博客
12-06 697
css中属性选择器的书写方式: 1. [title] { } 2.属性和值 [title=hello] { corlor:red; } 3.用于选取属性值中包含指定词汇的元素。(注意是词汇，就是单个单词) [title~=hello]元素的属性值中包含hello词汇 { color:red } 4. [title|=en]用于选取title属
CSS3 - 属性选择器使用详解
ShenWangNian的博客
04-09 4351
（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）。
属性选择器
s2421458535的博客
07-17 529
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;属性选择器&lt;/title&gt;     &lt;style type="text/css"&gt;         
CSS-属性选择器的用法详解
weixin_44486539的博客
09-29 7165
属性选择器可以为拥有指定属性的 HTML 元素设置样式；属性选择器通过 [] 来定义，[] 内部为元素的属性 el[attr=val] 选择 attr 为 val 的 el 元素 /* 选择 div 下的 p 标签的 class 属性值为 blue 的元素 */ div p[class="blue"] { background: blue; } <div> <p cl...
关于属性选择器的常用属性以及使用方法
m0_60273757的博客
08-03 1584
属性选择器 官方解释如下图，下面我们通过代码块来给大家解释具体意思； 这里我们用input标签详细解释一下： 首先在body里面构建一个表单from，然后在里面放许多input标签 <form action="#"> 文本框1：<input type="text" name="" id=""><br> 文本框2：<input type="text" name="" id=""><br> 文本框3.
属性选择器怎么使用
05-30
属性选择器（attribute selector）是一种 CSS 选择器，可以通过 HTML 元素的属性来选中元素。属性选择器的语法如下： ```css [attribute] /* 选中具有指定属性的元素 */ [attribute=value] /* 选中具有指定属性且属性值等于指定值的元素 */ [attribute~=value] /* 选中具有指定属性且属性值包含指定值的元素 */ [attribute|=value] /* 选中具有指定属性且属性值以指定值开头的元素 */ [attribute^=value] /* 选中具有指定属性且属性值以指定值开头的元素 */ [attribute$=value] /* 选中具有指定属性且属性值以指定值结尾的元素 */ [attribute*=value] /* 选中具有指定属性且属性值包含指定值的元素 */ ``` 其中，`attribute` 是 HTML 元素的属性名，`value` 是属性值。以下是一些示例： ```css /* 选中具有 title 属性的所有元素 */ [title] { color: red; } /* 选中具有 href 属性且属性值等于 "#" 的所有链接 */ a[href="#"] { text-decoration: none; } /* 选中具有 class 属性且属性值包含 "active" 的所有元素 */ [class~="active"] { background-color: yellow; } /* 选中具有 class 属性且属性值以 "menu" 开头的所有元素 */ [class^="menu"] { font-weight: bold; } /* 选中具有 class 属性且属性值以 "btn" 结尾的所有元素 */ [class$="btn"] { border: 1px solid black; } /* 选中具有 class 属性且属性值包含 "btn" 的所有元素 */ [class*="btn"] { background-color: blue; } ``` 在实际使用中，属性选择器可以结合其他选择器一起使用，以实现更精确的选择。需要注意的是，属性选择器是一种相对较慢的选择器，因为浏览器需要对每个元素的属性进行匹配，所以在使用时应该尽量避免过多的属性选择器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值