巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站专提News

详解CSS3中属性挑选器新增添的特征

一佰互联网站开辟设想(www.taishanly.com) 宣布日期 2020-04-21 17:23:36 阅读数: 122

零、概览
CSS2撑持的属性挑选器用一个抒发式[{属性 | 属性 {= | |= | ~=} 值}]
1.[class="a"]只能婚配class="a"的元素
2.[class~="a"]则能够婚配class="a"、class="a b"的元素
3.[lang|=en]则能够婚配lang="en"、lang="en-us"的元素。

CSS3新增*=、^=、$=三种婚配体例[{属性 | 属性 {*= | ^= | $=} 值}]:
1.*=表现恍惚婚配,[href="163"]能够婚配href="163.com"、href="mail.163.com"等元素;
2.^=表现以指定字符开首,[href^="/"]则婚配href="/a/a.htm"、href="/b"的元素
3.$=表现以指定字符开首,[scr$=".png"]则婚配一切png图片,如src="logo.png"

CSS3的属性挑选器首要包罗以下几种:
1.E[attr]:只利用属性名,但不肯定任何属性值;
2.E[attr="value"]:指定属性名,并指定了该属性的属性值;
3.E[attr~="value"]:指定属性名,并且具备属性值,此属性值是一个词列表,并且以空格离隔,此中词列表中包罗了一个value词,并且等号后面的“?”不能不写;
4.E[attr^="value"]:指定了属性名,并且有属性值,属性值因此value开首的;
5.E[attr$="value"]:指定了属性名,并且有属性值,并且属性值因此value竣事的;
6.E[attr*="value"]:指定了属性名,并且有属性值,并且属值中包罗了value;
7.E[attr|="value"]:指定了属性名,并且属性值是value或以“value-”开首的值(比方说zh-cn);

一、E[attr]:属性挑选器是CSS3属性挑选器中最简略的一种。若是你但愿挑选有某个属性的元素,而不管这个属性值是甚么,你就能够利用这个属性挑选器:

CSS Code复制内容到剪贴板
  1. .demo a[id] {backgroundbluecolor:yellow;font-weight:bold;}  

也能够利用多属性停止挑选元素,如E[attr1][attr2], 如许只需是同时具备这两属性的元素都将当选中:

CSS Code复制内容到剪贴板
  1. .demo a[href][title] {backgroundyellowcolor:green;}  

注:IE6不撑持这个挑选器。

二、E[attr="value"]:指定了属性值“value”

CSS Code复制内容到剪贴板
  1. .demo a[id="first"] {backgroundbluecolor:yellow;font-weight:bold;}  

注:属性和属性值必须完整婚配,出格是对属性值是词列表的情势时,如:
    test

CSS Code复制内容到剪贴板
  1. .demo a[class="links"]{color:red};   
  2. .demo a[class="links item"]{color:red};  

    IE6不撑持这个挑选器。

三、E[attr~="value"]:若是想按照属性值中的词列表的某个词来停止挑选元素,那末就须要利用这类属性挑选器:E[attr~="value"],这类属性挑选器是属性值是一个或多个词列表,若是是列表时,他们须要用空格离隔,只需属性值中有一个value相婚配就能够选中该元素,后面所讲的E[attr="value"]是属性值须要完整婚配才会当选中,他们二者区分便是一个有“?”号,一个不“?”号。

CSS Code复制内容到剪贴板
  1. .demo a[title~="website"]{background:orange;color:green;}  

注:属性挑选器中有波浪(?)时属性值有value时就相婚配,不波浪(?)时属性值要完整是value时才婚配。IE6不撑持E[attr~="value"]属性挑选器。

四、E[attr^="value"]:挑选attr属性值以“value”开首的一切元素,换句话说,挑选的属性其以对应的属性值因此“value”起头的。

CSS Code复制内容到剪贴板
  1. .demo a[href^="http://"]{background:orange;color:green;}  

注:IE6不撑持E[attr^="value"]挑选器。

五、E[attr$="value"]:E[attr$="value"]属性挑选器恰好与E[attr^="value"]挑选器相反,E[attr$="value"]表现的是挑选attr属性值以"value"开首的一切元素,换句话说便是挑选元素attr属性,并且他的属性值因此value开首的,这个应用在给你一些出格的链接加背景图片很便利的,比方说给pdf,png,doc等差别文件加上差别icon,咱们就能够利用这个属性来完成.

CSS Code复制内容到剪贴板
  1. .demo a[href$="png"]{background:orange;color:green;}  

注:IE6不撑持E[attr$="value"]属性挑选器。

六、E[attr*="value"]:挑选attr属性值中包罗子串"value"的一切元素。也便是说,只需你所挑选的属性,其属性值中有这个"value"值都将当选中。

CSS Code复制内容到剪贴板
  1. .demo a[title*="site"]{background:black;color:white;}  

注:IE6不撑持E[attr*="value"]挑选器。

七、E[attr|="value"]:称作为特定属性挑选器。这个挑选器会挑选attr属性值即是value或以value-开首的一切元素。

CSS Code复制内容到剪贴板
  1. .demo a[lang|="zh"]{background:gray;color:yellow;}  

注:经经常利用的处所是用来婚配说话,IE6不撑持E[attr|="value"]挑选器。

正文:
1.属性挑选器除IE6不撑持外,其余的阅读器都能撑持。
2.E[attr="value"]和E[attr*="value"]是最适用的,此中E[attr="value"]能帮咱们定位差别范例的元素,出格是表单form元素的操纵,比方说input[type="text"],input[type="checkbox"]等,而E[attr*="value"]能在网站中赞助咱们婚配差别范例的文件,比方说你的网站上差别的文件范例的链接须要利用差别的icon图标,用来赞助你的网站进步用户休会,就像后面的实例,能够经由过程这个属性给".doc",".pdf",".png",".ppt"设置装备摆设差别的icon图标。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

相干消息more

22
11月
互联网给中小网站带来的成长机缘

互联网的开放给中小网站带来的机缘(宣布:www.taishanly.com,www.yx10011.com)眼下,腾讯、百度、淘宝、付出宝等各个互联... >>概况

05
04月
收集推行的代价

咱们四周有如许的声响不少,甚么收集推行啦,各类推行啦……就连一些德律风推行职员那边都能够听到一个个洋气的单词,如S... >>概况

12
05月
专业网站扶植是咱们糊口中最可贵的财产

之前的人们总说,中国成长很掉队,非常封建,乃至还会被其余国度欺侮,但是此刻的中国完整翻了个身,咱们很荣幸的糊口在了这个时期里,咱们不愁吃、不... >>概况

28
04月
PHP读取txt文本文件并分页显现的体例

本文实例报告了PHP读取txt文本文件并分页显现的体例。分享给大师供大师参考。详细完成体例以下:复制代码 代码以下:<?php... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站