您好!欢迎来到静学网! 注册 登入

  • 静学网专注SEO优化技术视频教程案例分析、算法知识,在这里免费学习到最新的SEO技术,让你轻松通往SEO高工程师级之路,全新的SEO算法将在这里得到解剖。同时静学网提供网站开发、app开发、移动开发、电商、自媒体、行业资讯等内容,丰富及弥补自己的知识体系,让你在未来更具有竞争力。

CSS选择器:属性选择器语法结构及使用详解(三)

SEO优化 SEO资深顾问 次浏览
CSS属性选择器一般来将用不到,比较复杂一些,所谓的属性就是某个标签中含有固有属性,如果针对某个标签进行样式修改,那么必须包含改样式属性,否则不起作用。这么说大家可能不明白,没关系我们举个例子就知道了。我们先来汇总一下属性标签的语法,语法结构比较多些,但是如果细心观察也并不是很复杂。
 
1)属性选择器[attribute]

这个是最基本的选择器,也是最基础的,可认为是用于选取带有指定属性的元素,这个属性不是乱取的,不然是不起作用的,具体html全局属性有(accesskey、class、contenteditable、contextmenu、data-*、dir、draggable、dropzone、hidden、id、lang、spellcheck、style、tabindex、title、translate)。比如我要改变一个段落字体颜色,示例如下。值得注意的是属性用的是中括号。
<p title=”这是属性”>这是属性</p>
<style>
p[title]{
color:red;
}
</style>
 
2)属性[attribute=value]

这是一个指定属性和值的元素,也就是属性和值一起书写才有效,比如一下代码示例:
<p class=”imagery impact”>这是属性</p>
<style>
p[class=”imagery impact”]{
color:red;
}
</style>
如果class的值只写一个的话,那么就不能有效的匹配,比如只写class=”imagery“,那么显而易见这是违背了语法结构,将得到错误的结果。下一个我们将讲到模糊匹配。
css属性选择器
 
3)属性选择器[attribute~=value]

这是一个模糊匹配选择器,也就是说只要有其中一个选择器匹配就能成功改变,当前所有的主流浏览器都支持该属性,值得注意的是如果IE8及更老的浏览器不支持的话,可以声明<!DOCTYPE>。代码示例如下:
<p class=”imagery impact”>这是属性</p>
<style>
[class=”page impact”]{
color:red;
}
</style>
这个实例中它是可以匹配得到的,因此可以改变样式。
 
4)属性 [attribute|=value] 选择器

“|=”这个符号是 C语言中或运算符号,不过在这里它不代表任何运算符号,只是一个表示,其功能是“以什么开头”的意思,值得注意的是该属性选择器的值如果除了选定属性值之外,还有其它单词,需要横杠隔开,也就是单词独立性,否则不匹配。示例如下:
<p class=”page-imagery impact”>这是属性</p>
<style>
[class|=”page”]{
color:red;
}
</style>
 
5) 属性[attribute^=value]选择器

“^=”符号在C中为位异或的意思,这里是以什么开头的意思,与[attribute|=value]不同的是,只要是以value开头的就能匹配,不管你后面有多少都可以匹配,不需要横杠。示例如下:
<p class=”pageddddd”>这是属性</p>
<p class=”page”>这是属性</p>
 
<style>
[class^=”page”]
{
color:red;
}
</style>
 
6) 属性[attribute$=value] 选择器

“$”代表以什么结尾的意思,与[attribute^=value]正好相反,不在赘述。
<p class=”dddddpage”>这是属性</p>
<p class=”page”>这是属性</p>
 
<style>
[class^=”page”]
{
color:red;
}
</style>

7)属性[attribute*=vaule]选择器

“*”代表的是0个或者多个字符,
[attribute*=vaule]比较灵活,不管值在什么地方,只要包含value值,就能正确的匹配。代码示例如下:
<p class=”dddpagedd”>这是属性</p>
<p class=”page”>这是属性</p>
<style>
[class*=”page”]
{
color:red;
}
</style>
 
属性选择器比较多,具体应用还得根据实际需要及个人喜好选择,只要觉得方便那就用,一切为高效而写。


静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明CSS选择器:属性选择器语法结构及使用详解(三)
顶一下
(2)
100%
踩一下
(0)
0%
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
用户名: 验证码:点击我更换图片
合作伙伴:
SEO 关键词排名 SEO优化