首页 > 分享 > css属性选择器 [title~=hello],*=,

css属性选择器 [title~=hello],*=,

最新推荐文章于 2025-02-11 11:07:28 发布

冲鸭0202 于 2019-02-19 13:03:34 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

一、知识点罗列:

1、title 属性的所有元素设置样式:

[title]

{

color:red;

}

2、title="W3School" 的所有元素设置样式:

[title=W3School]

{

border:5px solid blue;

}

3、包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:

[title~=hello] { color:red; } 4、带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:

[lang|=en] { color:red; } 5、总结:

 ["属性选择器"],~=  ,  |=,*=  ,  ^=  ,  $=

6、示例:

1.attribute属性中包含value: 

1、[attribute~="value"] 属性中包含独立的单词为value

   eg:[title~=flower]  <img src="/i/eg_tulip.jpg" title="tulip flower" />

2、[attribute*=value] 属性中做字符串拆分,只要能拆出来value这个词就行

   eg:[title*=flower]  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2.attribute属性以value开头:

1、[attribute|=value] 属性中必须是完整且唯一的单词,或者以-分隔开

   eg:[lang|=en]  <p lang="en">  <p lang="en-us">

2、[attribute^=value] 属性的前几个字母是value就可以

    e.g:[lang^=en]  <p lang="ennn">

3.attribute属性以value结尾:

1、[attribute$=value] 属性的后几个字母是value就可以

    eg:[src$=".pdf"] <img src="test.pdf">

相关知识

css属性选择器 [title~=hello],*=,
网页制作学习之CSS选择器
深度选择器:解决Scoped样式穿透问题详解
宠物主题网站制作全面指南
python自动化测试——元素定位
小猫咪能有什么坏心思呢?只是想要你带它回家啦~
DNF110级版本hello光环宠物属性是什么 DNF110级版本光环宠物属性解析
前端实战:宠物网页设计与HTML/CSS/JS代码详解
CSS 实现“前进/后退”按钮的功能
java程序SQl

网址: css属性选择器 [title~=hello],*=, https://m.mcbbbk.com/newsview1100849.html

所属分类:萌宠日常
上一篇: 为什么要使用href=”java
下一篇: isTrusted=false