您好!欢迎来到静学网! 注册 登入
  • 致力中国及国外独立搜索引擎技术及第三方网站搜索引擎SEO排名研究

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

课程目录 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)
踩一下
(0)
畅所欲言
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论
友情链接:
网站优化
本网站所刊载信息,不代表静学网观点。 刊用本网站稿件,务经书面授权或注明来源。 未经授权禁止转载、摘编、复制及建立镜像,违者将依法追究法律责任。 投稿邮箱:1870447831@qq.com | 举报邮箱:1870447831@qq.com