码迷,mamicode.com
首页 > Web开发 > 详细

回顾CSS,查缺补漏(二)

时间:2019-08-27 00:55:46      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:htm   border   col   开头   att   选中   子串   使用   一个   

属性选择符,根据部分属性值选择

使用属性选择符匹配子串

[foo|="bar"] 选择的元素有foo属性,且其值以bar和一个英文破折号(U+002D)开头,或者本身就是bar本身

[foo|="bar"]选择的元素有foo属性,且其值是包含bar这个词的一组词

[foo|="bar"]选择的元素有foo属性,且其值包含子串bar

[foo|="bar"]选择的元素有foo属性,且其值以bar开头

[foo|="bar"]选择的元素有foo属性,且其值以bar结尾

eg:[ lang | = "en" ] {

    color:white;

   }

这个规则选择lang属性值为en或以en-开头的元素

<h1 lang="en">属性选择符匹配子串</h1>
<p lang="en-us">选择en或者以en-开头的元素</p>
<div lang="en-au">头三个适用上述规则</div>
<p lang="fr">这个不会被选中</p>
<h2 lang="cy-en">这个也不会被选中</h2>

一般来说,[ att | = "val" ]形式可用于选择任何属性及其值。假设一个html文档中有一系列插图,而插图的文件名是figure-1.gif和figure-2.jpg这样的。

使用下述选择符可以匹配所有插图:

img[src|="figure"] {

  border: 1px solid gray;

  } 

回顾CSS,查缺补漏(二)

标签:htm   border   col   开头   att   选中   子串   使用   一个   

原文地址:https://www.cnblogs.com/hcr926622/p/11415659.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!