CSS3属性选择器

最新推荐文章于 2023-08-04 09:49:47 发布
最新推荐文章于 2023-08-04 09:49:47 发布
阅读量427 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zoebloom/article/details/104576307
版权

css3属性选择器

  1. 选择符[属性名] 只要带有当前属性名就会被选中
  2. 选择符[属性名=“属性值”] 不仅指定属性名，有指定属性值
  3. 选择符[属性名~=“属性值”] 属性值为一个词列表，只要包含当前词就会被选中
  4. 选择符[属性名^=“属性值”] 属性值必须是当前指定的属性值开头的
  5. 选择符[属性名$=“属性值”] 属性值必须是当前指定的属性值结尾的
  6. 选择符[属性名*=“属性值”] 属性值中只要包含了指定的字符就会被选中
  7. 选择符[属性名|=“属性值”] 属性值仅是当前指定的属性值，或者是以属性值- 开头 （ left-con ）

首先我们先导入三张图片设置宽高加上类名

在这里插入图片描述

效果如下

在这里插入图片描述

下面使用——1. 选择符[属性名] 只要带有当前属性名就会被选中

在这里插入图片描述
在这里插入图片描述

2. 选择符[属性名=“属性值”] 不仅指定属性名，有指定属性值

在这里插入图片描述
在这里插入图片描述

3. 选择符[属性名~=“属性值”] 属性值为一个词列表，只要包含当前词就会被选中

在这里插入图片描述
在这里插入图片描述

4. 选择符[属性名^=“属性值”] 属性值必须是当前指定的属性值开头的

属性值必须是当前指定的属性值开头，属性值换成M也能选中该图片
在这里插入图片描述
在这里插入图片描述

5. 选择符[属性名$=“属性值”] 属性值必须是当前指定的属性值结尾的

在这里插入图片描述
在这里插入图片描述

6. 选择符[属性名*=“属性值”] 属性值中只要包含了指定的字符就会被选中

在这里插入图片描述
在这里插入图片描述

7. 选择符[属性名|=“属性值”] 属性值仅是当前指定的属性值，或者是以属性值- 开头 （ left-con ）

第一种情况：属性值仅是当前指定的属性值
在这里插入图片描述
在这里插入图片描述
第二种情况：以属性值- 开头 （ left-con ）
在这里插入图片描述
在这里插入图片描述

以上就是CSS3属性选择器所有的类型！！！

zoebloom
关注
css3 - 属性选择器
ximingx
02-19 936
属性选择器的标志性符号是 []。 匹配含义： ^：开头 $：结尾 *：包含 格式： E[title] 选中页面的E元素，并且E存在 title 属性即可。 E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。 E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。 E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。 E[title^="a
CSS属性选择器选择属性值中包含指定字符串的元素
最新发布
u010234868的专栏
09-10 427
attr*=value]：选择器匹配包含指定属性且该属性值中包含指定字符串“value”的元素。[attr^=value]：选择器匹配包含指定属性且该属性值以指定字符串“value”开头的元素。这将会选择所有data-type属性中包含button字符串的元素，并应用相应的样式。这将会选择所有data-type属性以button字符串开头的元素，并应用相应的样式。这将会选择所有data-type属性以button字符串结尾的元素，并应用相应的样式。/* 样式规则 *//* 样式规则 */
CSS3的属性选择器
xuemoKingDeath的博客
05-12 341
html> html lang="en"> head> meta charset="UTF-8"> style> img[alt|="123"]{ margin: 30px; } li[class|="test3"] { color: #f00; } a[
css3中的属性选择器
qq_39579242的博客
07-17 158
属性选择器：将元素属性用于选择器中，从而获取指定元素属性或者值的元素 元素 [属性]：匹配具备 属性的 指定元素     p [id] ：匹配具备id属性的p元素    div [class]：匹配具有class属性的div 元素 [属性1] [属性2]：匹配出所有 具备属性1和属性2的 指定元素 p [id] [class] ：匹配出所有具备id属性，又具备class属性的p元素 元素 ...
CSS3 属性选择器( [] )
houyanhua1的专栏
03-21 295
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; h
css3属性选择器
......
03-31 102
下面的介绍都已p元素为例来写： 1. p[target] 选择出有target属性的所有p元素 2. p[target=_blank] 选择出 target属性是_blank的所有p元素 3. p[target~=abc] 和 p[target*=abc] 结果一样，都是选择出 target属性值包含abc的所有p元素 4. p[target|=abc] 和 p[target^=abc] 结果一样，都是选择出target属性值是以abc开头的所有p元素 5. p[target$=abc] 选择..
CSS3 属性选择器
qq_46405281的博客
05-16 145
css3 属性选择器
css3新属性介绍
Kami丶
10-03 2858
CSS3 css3新增的属性大多数要添加前缀以达兼容。 浏览器前缀 浏览器 -webkit- Google Chrome, Safari, Android Browser -moz- Firefox -o- Opera -ms- Internet Explorer, Edge -khtml- Konqueror 结构(位置)伪类选择器（CSS3) +：获取当前...
CSS3 - 属性选择器使用详解
ShenWangNian的博客
04-09 4398
（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）。
16CSS3选择器——属性选择器
Blog of Lytracy
09-26 194
文章目录1、E[attr^="value"]2、E[attr$="value"]3、E[attr*="value"] 1、E[attr^=“value”] 选择属性名为 attr ，属性值以 value 开头的元素。 <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> a[title^='test'] {
属性选择器
m0_65334415的博客
10-18 334
(选择属性值以指定值开头的元素，不管后面是什么，只要是以这个元素开头的都会被选择）（选择属性中含有某些值的元素的元素）(选择含有指定属性和属性值的元素）(选择属性以指定值结尾的元素）
CSS3.0筛选器包含某个特定字符串的使用方法
nanj的专栏
08-04 482
111
CSS3 属性选择器；属性选择器其特点就是通过属性来选择元素；属性选择器的语法： E:attr;
03-25
属性选择器其特点就是通过属性来选择元素 属性选择器的语法： E:[attr]; E表示元素，attr表示元素中的属性 E:[attr=val]; attr=val表示当元素中的属性值是指定值时，设置一个统一的样式 E:[attr^=val]; attr^=...
CSS3——属性选择器
leraning_的博客
05-16 1832
1.利用属性选择器可以不用借助类或者id选择器 例子：选择第一个input： <input type="text" value="请输入用户名"> <input type="text"> css3设置选择： /*应用范围必须是input 需要具有valuer这个属性,才可以选择这个元素*/ input[value]{ color: pink; } 2.属性选择器还可以选择=值的某些元素 例子：选择第一个input： <input type="..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值