首页 > 教程 > 关键词 > CSS样式表最新资讯 > 正文

CSS样式表的属性选择器的四种格式

2010-03-05 13:48 · 稿源:中国站长站综合

属性选择器(Attribute Selectors),或许你不应该对属性选择器感到生疏,从本质上说,id跟类选择器其实就是属性选择器,只不过是选择了id或者类的值(value)而已。

属性选择器的格式是元素后跟中括号,中括号内带属性,或者属性表达式(不知道描述是否正确,自创的词),比如h1[title], h1[title="Logo"]等,你可以从我下面的论述中看到4种具体形式。

1、简易属性选择器

只顾其名不顾其值,这是简易属性选择器的特点。

h1[class] {color: silver;}将会作用于任何带class的h1元素,不管class的值是什么。所以<h1 class="hoopla">Hello</h1>、<h1 class="severe">Serenity</h1>、<h1 class="fancy">Fooling</h1>的h1都会受到这条规则的影响。

当然,这个“属性”不仅仅是class或者id,可以是该元素所有合法属性,比如img的alt,这样img[alt]{css declarations here;}将会作用于任何带有alt属性的img元素。那么a[href][title] {font-weight: bold;}呢?聪明的你一定已经知道,这会作用于同时带href和title属性的a元素,比如<a href="https://www.mb5u.com/" title="mb5u Home"></a>。

2、精确属性值选择器

id和类本质上就是精确属性值选择器,没错,h1#logo等于h1[id="logo"]。如前所述,我们不要局限于id或者class,我们可以使用任何属性!例如a[href="https://www.mb5u.com/"][title="W3C Home"] {font-size: 200%;}将会作用于<a href="https://www.mb5u.com/" title="mb5u Home"></a>。

3、部分属性值选择器

如其名,只要属性值部分匹配(这里的部分,实际上要匹配整个单词)就会作用于该元素。让我们来看个例子:

<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>p[class~="warning"] {font-weight: bold;}

p[class~="urgent"] {font-weight: bold;}

中任何一条都可以让这个p的字体变粗。

该选择器十分有用,比如你要样式化插图,其title中都含字符串”Figure”,如 title= "Figure 5:xxx说明",则你可以使用img[title~="Figure"] 。

需要注重的是,如我第一句就强调的,你需要匹配的是整个单词,img[title~="Figure"] 不会匹配title= "Figure5:xxx说明"。

另外,我做了个小小的测试,你把例子中的“Figure”改成“插图”,把img[title~="Figure"] 改成img[title~="插图"] ,在Firefox中依然可以匹配,不管编码(encoding)是GB2312还是UTF-8。看来CSS对中文的支持还不赖。

4、非凡属性选择器

有点怪,这个选择器。它是这样工作的,嗯,举个例子比描述更轻易。

*[lang|="en"] {color: white;},这条规则(rule)将会选择属性lang的值en或者en-打头的元素。就是说,它可以匹配<h1 lang="en">Hello!</h1>、<p lang="en-us">Greetings!</p>和<div lang="en-au">G'day!</div>而不匹配<p lang="fr">Bonjour!</p>和<h3 lang="cy-en">Jrooana!</h3>。

  • 相关推荐
  • 大家在看
  • 如何通过SSD服务器配置评测选择美国服务器

    独立服务器是目前比较常见的建站空间产品,用服务器的站长往往也是比较看重服务器的一些性能,包括存储空间,访问速度,稳定性,更高一点要求会对硬盘的存储速度也比较看重,因此目前很多的SSD固态硬盘独立服务器在市场上比较流行。 不过选择一款比较好的服务器还是非常有讲究的,从服务器商的实力,产品的配置,技术支持,售后服务等等,都要全方面的考虑。这篇文章分享一下如何从服务器口碑及产品配置细节来选择一款合适的独立?

  • 苹果中国应用商店下架RSS阅读器应用

    据外媒报道,苹果正在从中国区应用商店中下架的两款RSS阅读器应用,分别为Fiery Feeds 和 Reeder ,以遵守旨在阻止非法内容的有关规定。

  • SpaceX、蓝色起源和Dynetics的月球着陆器通过美国宇航局审查

    9月27日消息,据国外媒体报道,美国太空探索技术公司SpaceX、蓝色起源和Dynetics的月球着陆器通过了美国宇航局(NASA)的审查。完成对蓝色起源、Dynetics和SpaceX拟议的月球着陆器的“认证基准审查”,对于人类着陆系统(HLS)和Artemis项目来说是重要的一步。据悉,美国宇航局的Artemis项目旨在2024年前将宇航员送回月球,而月球着陆器是该项目的关键部分,该着陆器将携带两名宇航员(其中一名是女性)前往月球。本周

  • 和平精英ss11赛季什么时候开始 ss11赛季具体上线日期时间

    和平精英目前还是在SS10赛季中,但是不少玩家已经在期待下一个SS11赛季了,很多玩家还不清楚S11赛季什么时候开始,下面就来为大家详细的介绍一下。

  • 和平精英SS10赛季手册奖励内容汇总 SS10赛季手册全部内容一览

    和平精英在10月13日上线了SS10赛季的赛季手册,很多玩家还不清楚这次的赛季手册的奖励内容是什么,下面就来为大家详细的介绍一下。

  • RHFITNESS任和参展第38届体博会,诚邀您的莅临

    2020 年 9 月 28 日,第 38 届中国国际体育用品博览会(以下简称“ 2020 体博会”)将在国家会展中心(上海)举行。本届体博会是疫情防控工作进入常态化后国内举办的首场综合性国际体育用品展会,吸引了超过 1000 家企业共聚上海。 RHFITNESS任和品牌将携带旗下多款智能跑步机、走步机,参展本届体博会,为观展人员带来更智能、澎湃的健身体验。升级机型、智能触控……汇聚各类智能特色新品。 RHFITNESS任和品牌定位于中高端家用运动?

  • 长安CS55 PLUS新增车型售9.29万元起:发动机热效率达40%

    9月23日消息,长安汽车官方宣布,旗下紧凑型SUV——CS55 PLUS蓝鲸版新增3款车型,提供手动和自动可选,售价区间为9.29-11.39万元。CS55 PLUS蓝鲸版可以看做是CS75 PLUS的缩小版,

  • Bluehost SSD VPS主机真实详细评测数据

    VPS主机其价格优势相对独立服务器来说是非常有吸引力的,很多站长一般都会将VPS主机作为建站的首选,尤其是外贸行业,站群推广行业。虚拟主机可能在权限方面没有VPS主机高,独立IP配置可能也相对来说比较少,这也导致VPS主机成为了主流的建站空间。那么我们在选择VPS主机时,应该要考虑哪些因素呢?本文针对VPS主机做一个详细的评测,主要选择的产品是Bluehost SSD VPS云主机,下面具体分析。1、价格外贸行业目前压力也比较大,尤?

  • 玖富受邀香港银行学会(HKIB)和香港电脑学会(HKCS) 主持网络研讨会

    2020年9月14日,玖富集团受香港银行学会(HKIB)和香港电脑学会(HKCS)邀请,参与主题为“虚拟银行如何在传统银行模式下突围而出”的网络研讨会。玖富集团、玖富国际董事总经理陈颖峰为活动进行全程主持。本次网络研讨会由香港银行学会(HKIB)和香港电脑学会(HKCS)在香港举办,围绕“虚拟银行如何在传统银行模式下突围而出”的主题展开线上研讨,分享了虚拟银行如何在金融科技时代满足客户需求,如何在不断探索的商业模式中保持灵活性?

  • 《自然》子刊发表金斯瑞cPass™ sVNT Kit重要数据

    日前,全球著名科学杂志《自然》子刊Nature Biotechnology上发表了一篇重大技术创新发明论文。该文章领衔通讯作者是美国杜克大学医学院和新加坡国立大学Duke-NUS联合新发传染病研究所主任、全球领先的病毒传染病研究科学家王林发教授。凭借国际领先的蛋白和抗体试剂研发能力,金斯瑞已与王林发教授团队达成全球商业化合作,并从Duke-NUS获得全球独家性商业授权,还为王教授在研究阶段提供了所有重要的试验试剂,论文中对金斯瑞全球

  • 火币观察:阿根廷选择比特币对冲比索,比特币金融属性广泛深化

    近日,自阿根廷此前宣布对美元储蓄和海外购买征收35%的新税后,阿根廷比索大幅下跌。根据Paxful的数据显示,在过去的一个月内,阿根廷比特币的购买量大幅飙升,更多的阿根廷储户将持有的比索兑换成加密货币,以对冲本国货币贬值。在传统金融市场,由于缺乏投资通道和深刻的金融知识,更多的投资者是选择以购买黄金的方式对冲通胀或货币可能贬值的风险。但实际上,黄金对这两种风险的对冲能力都非常差,尤其是通货膨胀保值政府债券?

  • WordPress.com新功能:可将所有博文内容转换为推文

    今年早些时候通过推文风暴(tweetstorms)这种更轻松的方式,WordPress.com 宣布允许用户以“折叠”的方式将多条推文嵌入到博文中。今天 WordPress.com 再推出了双向通道,用户只需要轻松点击几下,就能将现有的 WordPress 博客文章转换为推文风暴。

  • PC党喜迎春天:SSD还要再跌价至少两成

    过去快两年时间,SSD的价格一直在走低,很多用户借此机会用上了大容量固态盘。而根据统计机构TrendForce的最新预测,上述趋势还将延续,至少到圣诞采买季前都会如此。报告称,SSD主要部件闪

    PC
  • 企业想要吸引“回头客”?天威诚信SSL证书为您助力

    众所周知,对于企业来说,用户的个性化体验是其提高客户满意度的关键,但想要成功做到这一点,吸引更多的“回头客”,就必须访问个人数据。近年来,围绕第三方积累和使用个人数据的隐私问题已成为消费者关注的焦点。据Privitar的一项调查结果显示,虽然消费者依旧担心与公司共享个人数据,但企业仍然有机会发挥领导作用,通过保护客户数据来建立品牌忠诚度。调查显示,43%的消费者不知道他们是否曾与受数据泄露影响的企业合作过。?

  • Facebook Messenger迎来全新彩色新图标并增加新功能

    Facebook正在对其Messenger应用进行改造,为该应用引入了一个新的采用多彩渐变色的图标,而不是至今为止使用的简单的蓝色标志。新图标的灵感似乎来自于Instagram的图标,而Instagram的图标也是由Facebook拥有的。

  • PS5的SSD焊死在主板上 坏了就报废?别担心了 很难写死

    索尼PS5、微软XSX两款新一代主机已经发布,价格也基本一致,PS5在性能上这次要输一点,但PS5的SSD性能是个亮点,5.5GB/s的速度比XSX的2.4GB/s高出一倍。然而,大家有了新的担心。这两天天索尼

    PS5
  • Facebook在Instagram和Messenger上推出跨平台信息传递功能

    Facebook在整合旗下各个消息平台方面迈出了迄今为止最大的一步,允许Messenger和Instagram上的部分用户在应用之间互相发消息。除了推出跨平台消息,Instagram还将对其DM系统进行重大改革,将扩展从Messenger中获取的功能。

  • DNF真理的意识之棺超详细攻略 真理的意识之棺boss处理机制

    DNF的希洛克的P2阶段的无形之棺1界中有个真理的意识之棺地下城很多玩家还不清楚怎么打,下面就来为大家分享一下真理的意识之棺地下城中的三个boss处理机制攻略。

    dnf
  • 安信证书聚惠双节:SSL证书申请特价,还有礼品卡赠送

    2020 年的中秋节和国庆节是同一天,为了迎接“双节”的到来,国内领先的HTTPS解决方案服务商安信证书推出特价SSL证书申请活动,更有超值礼品卡赠送,小米10、华为P40 等商品等你来拿。今年中秋和国庆节在同一天,8天的长假让大家有足够的时间与家人团聚或者出去旅旅游。然而对网站运营人员来说,这个时候也是网站被攻击最频繁的,网站上的隐私数据极易被窃取。如何保障网站在节假日期间用户能够安全访问,给网站部署SSL证书是非常?

  • Intel 11代酷睿首测!PCIe 4.0 SSD直冲5GB/s

    AMD平台已经全面支持PCIe 4.0,Intel也正在慢慢跟上,比如此前发布的数据中心级SSD P7-P5500/P5600,以及面向轻薄本的Tiger Lake 11代酷睿,而在桌面上,将于明年3月正式发布的同样隶属于11代酷

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签