Menu
Woocommerce Menu

神通广大的CSS3选择器,个有趣的

0 Comment


2017%20年%204%20月:15%20个有趣的%20JS%20和%20CSS%20库

2017/04/12%20·%20CSS%20·
CSS,
JS

原文出处:%20Danny
Markov   译文出处:IT程序狮   

15%20个有趣的%20JS%20和%20CSS%20库(2017%20年%204%20月)

时光如白驹过隙,%20Tutorialzine%20为我们带来了%202017%20年%204
月份一些精心挑选的优秀%20Web
开发资源。前端开发者们,让我们一起先睹为快吧!


H5页面快速搭建之高级字体应用实践

2016/04/15%20·%20HTML5%20·
字体

原文出处:%20淘宝前端团队(FED)-
龙驭   

神通广大的CSS3选择器

2016/02/04%20·%20CSS%20·%202
评论%20·
选择器

原文出处:
大额_skylar(@大额大额哼歌等日落)   

每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分。但是,大家可能每天写的大多是#id,.class这样的选择器,这并不稀奇,但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器,就可以简化我们的代码。

我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度,如果有需要,可以在这里查看它的浏览器支持情况:「caniuse.com」。

1.%20Core%20UI

Core%20UI%20是一个基于%20Bootstrap%204
的管理模板,它提供了创建控制面板的高度自定义解决方案。同时,为了让你快速的将它与一些流行的框架整合使用(AngularJS,Angular
2,React.js%20和%20Vue.js.),它还提供了一些独立的样板版本。

项目地址:【传送门】

背景

  • 最近在开发一个%20H5
    活动页快速搭建平台,可以通过拖拽编辑图片,文字等元素组件,快速搭建出一个移动端的活动页面,基本交互和成品效果类似
    PPT
    软件。这类活动大量在微信等平台上传播,其中会包含各种动画和特效,而各类高级艺术字体(如:方正兰亭黑,方正彩云,方正大草,方正剑体等)的应用也非常广泛。
  • 之前用户只能通过%20ps
    等软件将文字转化为图片再贴到平台上使用。使用成本很高,修改,调试都非常不便,而且图片占用的资源也比较多,为了降低用户的使用成本,基于一站式搭建的理念,我们需要将高级字体的使用透明化,使用户和使用
    PPT%20一样直接选择字体使用即可。

一、基本选择器

 1.%20通配选择器%20「*」

CSS

*{margin:%200;padding:%200}
//选择页面中的所有元素并设置margin和padding值为0%20.demo
*{background:#000}
//选择类名为demo的元素下面的所有元素并设置背景为黑色

1 2 %20*{margin:%200;padding:%200}%20//选择页面中的所有元素并设置margin和padding值为0 %20.demo%20*{background:#000}%20//选择类名为demo的元素下面的所有元素并设置背景为黑色

 

2.元素选择器%20「Element」

CSS

body{background:#ccc}%20//选择body元素%20ul{background:#fff}
//选择列表ul元素

1 2 %20body{background:#ccc}%20//选择body元素%20 %20ul{background:#fff}%20//选择列表ul元素

 

3.ID选择器%20「#id」

CSS

html:%20<div%20id=”demo”></div>%20css:%20#demo{do%20something}

1 2 3 4 html: %20<div%20id="demo"></div> %20css: %20#demo{do%20something}

 

4.类选择器%20「.class」

CSS

html:%20<ul%20class=”demo”></ul>%20css:%20.demo{do%20something}
ul.demo{do%20something}%20//这样只会选择有demo类名的ul元素

1 2 3 4 5 html:   <ul%20class="demo"></ul>   css:   .demo{do%20something}   ul.demo{do%20something}%20//这样只会选择有demo类名的ul元素

需要注意的是:多个页面元素可以有相同的类名,但是元素的id在页面中必须是唯一的。

 

5.群组选择器%20「selector1,…,selectorN」

CSS

html:%20<div%20class=”section-1″></div>%20<div
class=”section-2″></div>%20<div
class=”section-3″></div>%20ccss:
.section-1,.section-2,.section-3{do%20something}
//给三个页面元素定义公用的样式

1 2 3 4 5 6 html: <div%20class="section-1"></div> <div%20class="section-2"></div> <div%20class="section-3"></div> ccss: .section-1,.section-2,.section-3{do%20something}%20//给三个页面元素定义公用的样式

 

2.%20React%20Trend

这是由Unsplash团队出品的一款%20React
组件,用于创建展示趋势与活动指标的优雅的线型图。该项目遵循极简化的解决理念,并提供给你一个用来解决具体问题的简单、优雅的解决方案。另外,它还有非官方的Vue
接口,但不会提供完整的图表库。

项目地址:【传送门】

技术选型

  • 第一种方案是通过用户输入的文字,和选择的字体,通过服务器生成对应的图片来使用。这种方案的优点是逻辑简单,缺点是搭建/修改时增加了复杂度,调试时无法实时预览文字在活动中的效果。而且容易出现大量冗余图片,最终页面的图片请求也会增加。
  • 第二种方案是调用%20iconfont.cn
    的服务接口,通过传递字体和文字内容来获取字体文件。这种方案的优点是可以直接利用现有成熟平台,开发成本低,可靠。缺点是增加了外部依赖,不但面临合作方配合的限制,而且无法自行控制可供的选择字体等。
  • 最终采用的的第三种方案是直接使用%20iconfont.cn%20的%20Node.js%20模块
    (font-carrier)%20,自行解析/生成字体,将生成的字体放在我们自己申请的
    OSS%20中存储使用。这种方法的开发量最大,且要消耗额外的%20OSS
    资源,但是整个流程独立自主,可以不断定制优化,自行添加字体等,由于我们的服务只面向移动端,所以只需要生成
    ttf%20或者%20woff%20一种文件类型即可兼容。

二、层次选择器

6.后代选择器「E%20F」

选择匹配E的元素内的所有匹配F的元素。

XHTML

html:%20<div%20class=”parent”>%20<div%20class=”child”></div>
<div%20class=”child”>%20<div%20class=”c-child”>%20<div
class=”c-c-child”></div>%20</div>%20</div>%20</div>
css:%20.parent%20div{do%20something}
//会选择parent里面的所有div,不管是子元素.child还是孙元素.c-child和.c-c-child

1 2 3 4 5 6 7 8 9 10 11 12 13 html: <div%20class="parent">         <div%20class="child"></div>         <div%20class="child">             %20<div%20class="c-child">                   <div%20class="c-c-child"></div>             </div>         </div>     </div>   css:   .parent%20div{do%20something}%20//会选择parent里面的所有div,不管是子元素.child还是孙元素.c-child和.c-c-child

 

7.子选择器「E%20>%20F」

选择配配E的元素的匹配F的直系子元素。

XHTML

html:%20<div%20class=”parent”>%20<div%20class=”child”></div>
<div%20class=”child”>%20<div%20class=”c-child”>%20<div
class=”c-c-child”></div>%20</div>%20</div>%20</div>
css:%20.parent%20>%20div{do%20something}
//只会选择.parent元素的直系子元素,也就是只会选择到%20.child元素

1 2 3 4 5 6 7 8 9 10 11 12 html:   <div%20class="parent">           <div%20class="child"></div>           <div%20class="child">               %20<div%20class="c-child">                     <div%20class="c-c-child"></div>               </div>           </div>       </div>   %20css: %20.parent%20>%20div{do%20something}%20//只会选择.parent元素的直系子元素,也就是只会选择到%20.child元素

 

8.相邻兄弟元素选择器「E%20+%20F」

E和F是同辈元素,具有相同的父元素,并且F元素紧邻在E元素的后面,此时可以使用相邻兄弟选择器。

XHTML

html:%20<div>%20<div%20class=”demo”>1</div>
<div>2</div>%20<div>3</div>%20</div>%20css:
.demo%20+%20div%20{do%20something}//会选中内容为2的div

1 2 3 4 5 6 7 8 9 10 html: <div>     <div%20class="demo">1</div>     <div>2</div>     <div>3</div> </div>   css:   .demo%20+%20div%20{do%20something}//会选中内容为2的div

 

9.通用兄弟选择器「E%20~%20F」

E和F是同辈元素,具有相同的父元素,并且F元素在E元素之后,E%20~
F将选中E元素后面的所有F元素。

XHTML

html:%20<div>%20<div%20class=”demo”>1</div>
<div>2</div>%20<div>3</div>
<div>4</div>%20</div>%20css:%20.demo%20~%20div%20{do
something}//会选中内容为2,3,4的div

1 2 3 4 5 6 7 8 9 10 11 html:   <div>       <div%20class="demo">1</div>       <div>2</div>       <div>3</div>       <div>4</div>   </div>     css:   %20.demo%20~%20div%20{do%20something}//会选中内容为2,3,4的div

 

3.%20Element

Element%20是一款基于%20Vue.js%202.0%20的%20UI%20组件库。它包含了%2050+
的组件,并遵循一致性的设计原则,即界面中的设计样式、颜色搭配保持一致。同时,每个元素都易于定制,并可在任何的
Vue.js%20项目中使用。这还有一个用于构建实体模型的实用的Sketch
Template组件,你也可以看看。

项目地址:【传送门】

字体文件解析的基本原理

三、伪类选择器

10.动态伪类选择器「E:link,E:visited,E:active,E:hover,E:focus」

E:link{do%20something}%20//选择定义了超链接但链接还未被访问过的元素
E:visited{do%20something}%20//选择定义了超链接并且链接已经被访问过的元素
E:active{do%20something}
//选择匹配的E元素,且元素被激活,常用在锚点和按钮上%20E:hover{do
something}%20//选择鼠标停留的匹配的E元素%20E:focus{do%20something}
//选择匹配的E元素,且元素获得焦点

1 2 3 4 5 %20E:link{do%20something}%20//选择定义了超链接但链接还未被访问过的元素 %20E:visited{do%20something}%20//选择定义了超链接并且链接已经被访问过的元素 %20E:active{do%20something}%20//选择匹配的E元素,且元素被激活,常用在锚点和按钮上 %20E:hover{do%20something}%20//选择鼠标停留的匹配的E元素 %20E:focus{do%20something}%20//选择匹配的E元素,且元素获得焦点

 

11.目标伪类选择器「E:target」

选择匹配E的所有元素,且匹配元素被相关URL指向。

通俗点说,页面的url如果带有#something这样的字样(https://rawgit.com/zhangmengxue/Practice/master/demo.html\#section-1)那么:target就是用来匹配页面中id为#something(section-1)的元素的。

这里有一个demo,利用:target实现纯css的手风琴效果:[查看源码][运行demo]

 

12.语言伪类选择器「E:lang(language)」

用来选择指定了lang属性的元素,其值为language。

CSS

html:%20<html%20lang=”en-US”></html>%20css:%20:lang(en-US)%20{do
something}

1 2 3 4 5 %20html: %20<html%20lang="en-US"></html>   %20css: %20:lang(en-US)%20{do%20something}

有时候网页切换不同的语言版本的时候,可以通过这个选择器做一些特殊的处理。

 

13.状态伪类选择器「E:checked,E:enabled,E:disabled」

E:checked{do%20something}%20//匹配表单中被选中的单选按钮或复选按钮
E:enabled{do%20something}%20//匹配所有起用的表单元素%20E:disabled{do
something}%20//匹配所有禁用的表单元素

1 2 3 %20E:checked{do%20something}%20//匹配表单中被选中的单选按钮或复选按钮 %20E:enabled{do%20something}%20//匹配所有起用的表单元素 %20E:disabled{do%20something}%20//匹配所有禁用的表单元素

 

14.结构伪类选择器「E:first-child,E:last-child,E:root,E:nth-child(n),E:nth-last-child(n),E:nth-of-type(n),E:nth-last-of-type(n),E:first-of-type,E:last-of-type,E:only-child,E:only-of-type,E:empty」

 

14.1%20[E:first-child]

用来选取特定元素的第一个子元素。

XHTML

html:%20<ul>%20<li>1</li>%20<li>2</li>
<li>3</li>%20<li>4</li>%20<li>5</li>
</ul>%20css:%20ul%20>%20li:first-child%20{do%20something}
//用来选取ul中的第一个li元素

1 2 3 4 5 6 7 8 9 10 11 html: <ul>     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li>     <li>5</li> </ul> css:   ul%20>%20li:first-child%20{do%20something}%20//用来选取ul中的第一个li元素

 

14.2%20[E:last-child]

用来选取特定元素的最后一个子元素。

XHTML

html:%20<ul>%20<li>1</li>%20<li>2</li>
<li>3</li>%20<li>4</li>%20<li>5</li>
</ul>%20css:%20ul%20>%20li:last-child%20{do%20something}
//用来选取ul中的最后一个li元素

1 2 3 4 5 6 7 8 9 10 html:   <ul>       <li>1</li>       <li>2</li>       <li>3</li>       <li>4</li>       <li>5</li>   </ul>   css:   ul%20>%20li:last-child%20{do%20something}%20//用来选取ul中的最后一个li元素

 

14.3%20[E:nth-child()],[E:nth-last-child()]

用来选取某个父元素的一个或多个特定的子元素,其中的n可以是数值(从1开始),也可以是包含n的表达式,也可以是odd(奇数),even(偶数)。

E:nth-last-child()选择器的使用方法于E:nth-child()是相同的,不同的是E:nth-last-child()选择的元素是从父元素的最后一个子元素开始算起。

XHTML

html:%20<ul>%20<li>1</li>%20<li>2</li>
<li>3</li>%20<li>4</li>%20<li>5</li>
</ul>%20css:%20ul%20>%20li:nth-child(2n+1)%20{do%20something}
//用来选取ul中的第2n+1(奇数)个li元素

1 2 3 4 5 6 7 8 9 10 html:     <ul>         <li>1</li>         <li>2</li>         <li>3</li>         <li>4</li>         <li>5</li>     </ul>   css:   %20ul%20>%20li:nth-child(2n+1)%20{do%20something}%20//用来选取ul中的第2n+1(奇数)个li元素

 

14.4%20 [E:root]

用来匹配元素E所在的文档中的根元素,在html文档中根元素就始终是html。

 

14.5%20[E:nth-of-type(),E:nth-last-of-type()]

E:nth-of-type()只计算父元素中指定的某种类型的子元素,当某个元素的子元素类型不只是一种时,使用nth-of-type来选择会比较有用。

E:nth-last-of-type()的用法同E:nth-of-type()相同,不同的是:nth-last-of-type()也是从父元素的最后一个子元素开始算起。

li:nth-of-type(3)的话就会标识它只会选择第三个li元素,别的元素会忽略掉,如:

XHTML

html:%20<ul>%20<li>1</li>%20<li>2</li>
<div>3</div>%20<div>4</div>%20<li>5</li>
<li>6</li>%20<li>7</li>%20<li>8</li>
</ul>%20ul%20>%20li:nth-of-type(3){do%20something}
//会选中内容为5的li元素

1 2 3 4 5 6 7 8 9 10 11 12 13 html: <ul>     <li>1</li>     <li>2</li>     <div>3</div>     <div>4</div>     <li>5</li>     <li>6</li>     <li>7</li>     <li>8</li> </ul>   ul%20>%20li:nth-of-type(3){do%20something}%20//会选中内容为5的li元素

 

但是使用nth-child就会是这样:

XHTML

html:%20<ul>%20<li>1</li>%20<li>2</li>
<div>3</div>%20<div>4</div>%20<li>5</li>
<li>6</li>%20<li>7</li>%20<li>8</li>
</ul>%20ul%20>%20li:nth-child(3){do%20something}
//会选中内容为3的div元素

1 2 3 4 5 6 7 8 9 10 11 12 13 html: <ul>     <li>1</li>     <li>2</li>     <div>3</div>     <div>4</div>     <li>5</li>     <li>6</li>     <li>7</li>     <li>8</li> </ul>   ul%20>%20li:nth-child(3){do%20something}%20//会选中内容为3的div元素

 

14.6%20[E:first-of-type,E:last-of-type]

:first-of-type和:last-of-type这两个选择器类似于:first-child和:last-child,不同的就是指定了元素的类型。

XHTML

html:%20<ul>%20<div>1</div>%20<div>2</div>
<li>3</li>%20<li>4</li>%20<li>5</li>
<li>6</li>%20</ul>%20CSS:%20ul%20>%20li:first-of-type{do
something}%20//会选中内容为3的li元素

1 2 3 4 5 6 7 8 9 10 11 html:   <ul>       <div>1</div>       <div>2</div>       <li>3</li>       <li>4</li>       <li>5</li>       <li>6</li> %20</ul> %20CSS: %20ul%20>%20li:first-of-type{do%20something}%20//会选中内容为3的li元素

 

14.7%20[E:only-child]

匹配的元素E是其父元素的唯一子元素,也就是说匹配元素的父元素只有一个子元素。

XHTML

html:%20<div%20class=”demo”>%20<p>1-1</p>
<p>1-2</p>%20</div>%20<div%20class=”demo”>
<p>2-1</p>%20</div>%20css:%20.demo%20>%20p:only-child{do
something}//会选取到内容为2-1的p元素

1 2 3 4 5 6 7 8 9 10 11 html: <div%20class="demo">   %20<p>1-1</p>   %20<p>1-2</p> </div> <div%20class="demo">   %20<p>2-1</p> </div>   css: .demo%20>%20p:only-child{do%20something}//会选取到内容为2-1的p元素

 

14.8%20[E:only-of-type]

:only-of-type用来选择一个元素,他的类型在他父元素的所有子元素中是唯一的。也就是说,一个父元素有很多子元素,而其中只有一个子元素的类型是唯一的,那么就可以使用:only-of-type来选取这个元素。

这个属性说起来有点绕口,写了个简陋的demo说明意思:[查看源码][运行demo]

 

14.9%20[E:empty]

:empty用来选择没有任何内容的元素,哪怕是一个空格都没有的元素。

 

15%20否定伪类选择器「E:not(F)」

可以用来选取所有除了F外的所有元素。

input:not([type=submit]){do%20something}
//可以用来给表单的所有input元素定义样式,除了submit按钮之外

1 %20input:not([type=submit]){do%20something}%20//可以用来给表单的所有input元素定义样式,除了submit按钮之外

 

4.%20Extension%20Boilerplate

这个项目为我们创建跨浏览器扩展奠定了坚实的基础。Boilerplate
基于WebExtensions,可以一次写入扩展名,并可以将它们同时部署到
Chrome,Opera%20和%20Firefox%20上。它还具备一些其他很酷的功能,例如实时重载。

项目地址:【传送门】

字体文件的核心结构

以%20ttf
文件为例,字体文件中主要包含了字体头表,位置索引表和图元数据表等等,其中最核心的部分就是图元数据表,也就是字形描述表,它可以包含可变数目的图元,每个图元可以有不同数目的控制点,甚至还可以有数量可变的图元指令,通过位置索引表对应到每个字符上,通过图元数据表,使其只包含需要使用的字符的图元描述。即可最小化字体,使其可用于生产环境的页面中,其他类型的字体文件(如
woff,%20eot,%20svg
等)原理也是大同小异,仅仅是压缩方式和字形描述规范不同,也可以互相转化。

四、伪元素

以前我们使用的伪元素是:first-letter,:first-line,:before,:after,这样的。但css3定义的伪元素变成了双冒号,主要用来区分伪类和伪元素。对于IE6-8,仅支持单冒号表示方法,但是其他现代浏览器两种表示方法是都可以的,也就是说在现代浏览器中伪元素使用双冒号和单冒号都是会识别的。

16.%20「::first-letter」

::first-letter用来选择文本块的第一个字母,常用于文本排版方面。

XHTML

html:%20<div>%20<p>this%20is%20test%20line…..</p>
</div>%20css:%20div%20p::first-letter{do%20something}
//将会选中<p>中的第一个字母t

1 2 3 4 5 6 7 8 html: %20<div>     %20<p>this%20is%20test%20line…..</p> %20</div>   css:   div%20p::first-letter{do%20something}%20//将会选中<p>中的第一个字母t

 

17.%20「::first-line」

::first-line用于匹配元素的第一行文本,也是常用于文本排版。

XHTML

html:%20<div>%20<p>%20this%20is%20first%20line……….省略…….
this%20is%20the%20second%20line%20…省略….%20</p>%20</div>%20css:%20div
p::first-line{do%20something}%20//将会选中<p>中的第一行文字

1 2 3 4 5 6 7 8 9 10 11 html:   <div>       <p>         %20this%20is%20first%20line……….省略…….         %20this%20is%20the%20second%20line%20…省略….     %20</p>   </div>   %20css:   %20div%20p::first-line{do%20something}%20//将会选中<p>中的第一行文字

 

18.%20「::before,::after」

::before,::after同我们之前熟用的:before和:after使用方法相同,它们不是指存于标记中的内容,是配合使用content属性可以插入额外内容的位置,尽管生成的内容不会成为DOM的一部分,但它同样可以设置样式。

 

19.%20「::selection」

css3新定义的伪元素::selection用来匹配突出显示的文本。但是使用前需要确认浏览器对它的支持程度。

浏览器默认的情况下,我们选中的文本背景是蓝色,字体是白色。通过使用::selection,我们可以改变它的效果。

::selection{background:#ccc;color:red}
//这样改写后我们选中的文本背景颜色和文字颜色就可以自定义了

1 %20::selection{background:#ccc;color:red}%20//这样改写后我们选中的文本背景颜色和文字颜色就可以自定义了

但是需要注意的是,::selection仅接受两个属性,一个是background,一个是color。

 

5.%20BigPicture

一款轻量级的灯箱插件,它能够同时为图像和视频,提供流畅的动画叠加弹出窗口。BigPicture
提供了一个很棒的功能,即它可以与`标签和background-image`元素一同工作,而开发者也可以进行自由的标记。至于视频格式
–%20YouTube、Vimeo%20和直接视频链接均可支持。

项目地址:【传送门】

font-carrier%20模块基本原理

font-carrier%20模块使用%20OpenType%20模块分析%20ttf
文件,可以文件的内容脚本化,使其成为一个字符%20unicode
编码和其字形描述的键值对象。通过对这个对象的%20min
方法,可以使其最小化,并且再逆向生成文件%20Buffer%20供用户使用。

五、属性选择器

在html中,通过给元素添加属性,给以给元素添加一些附加的信息,属性选择器就可以通过定位属性来选取特定的元素。

20.%20「%20E[attr]%20」

用来选择有某个属性的元素,不论这个属性的值是什么。

XHTML

html:%20<div%20id=”demo”>%20<a%20href=””%20id=”test”></a>%20<a
href=”www.taobao.com”%20class=”taobao”></a>%20<a%20href=”#”
id=”show”>%20</div>%20css:%20a[id]{do%20something}
//将会选择具有id属性的a标签

1 2 3 4 5 6 7 8 html: <div%20id="demo">   <a%20href=""%20id="test"></a>   <a%20href="www.taobao.com"%20class="taobao"></a>   <a%20href="#"  id="show"> </div> css: a[id]{do%20something}%20//将会选择具有id属性的a标签

 

21.%20「%20E[attr=val]%20」

用来选取具有属性attr并且属性值为val的元素。

XHTML

html:%20<div%20id=”demo”>%20<a%20href=””%20id=”test”
title=”test”></a>%20<a%20href=”www.taobao.com”
class=”taobao”></a>%20<a%20href=”#”%20id=”show”%20title=”test”>
</div>%20css:%20a[id=test][title]{do%20something}
//将会选择具有id属性值为test且具有title属性的a标签

1 2 3 4 5 6 7 8 html: %20<div%20id="demo">   %20<a%20href=""%20id="test"%20title="test"></a>   %20<a%20href="www.taobao.com"%20class="taobao"></a>   %20<a%20href="#"  id="show"%20title="test"> </div> %20css: %20a[id=test][title]{do%20something}%20//将会选择具有id属性值为test且具有title属性的a标签

 

22.%20「%20E[attr|=val]%20」

E[attr|=val]用来选择具有属性attr且属性的值为val或以val-开头的元素(其中-是不可或缺的)。

XHTML

html:%20<div%20id=”demo”>%20<a%20href=””%20id=”test”%20title=”test”
lang=”zh”></a>%20<a%20href=”www.taobao.com”%20class=”taobao”
lang=”zh-cn”></a>%20<a%20href=”#”%20id=”show”%20title=”test”>
</div>%20css:%20a[lang|=zh]{do%20something}
//将会选择具有lang属性值为zh或属性值以zh开头的a标签

1 2 3 4 5 6 7 8 html:   <div%20id="demo">     <a%20href=""%20id="test"%20title="test"%20lang="zh"></a>     <a%20href="www.taobao.com"%20class="taobao"%20lang="zh-cn"></a>     <a%20href="#"  id="show"%20title="test"> %20</div> %20css:   a[lang|=zh]{do%20something}%20//将会选择具有lang属性值为zh或属性值以zh开头的a标签

 

23.%20「%20E[attr~=val]%20」

当某个元素的某个属性具有多个用空格隔开的属性值,此时使用E[attr~=val]只要attr属性多个属性值中有一个于val匹配元素就会被选中。

XHTML

html:%20<div%20id=”demo”>%20<a%20href=””%20id=”test”%20title=”test
first”></a>%20<a%20href=”www.taobao.com”%20class=”taobao%20web”
title=”second%20test”></a>%20<a%20href=”#”%20id=”show”
title=”test”>%20</div>%20css:%20a[title~=test]{do%20something}
//将会选择具有title属性且其中一个属性值为test的a标签

1 2 3 4 5 6 7 8 html:   <div%20id="demo">     <a%20href=""%20id="test"%20title="test%20first"></a>     <a%20href="www.taobao.com"%20class="taobao%20web"%20title="second%20test"></a>     <a%20href="#"  id="show"%20title="test"> %20</div>   css:   a[title~=test]{do%20something}%20//将会选择具有title属性且其中一个属性值为test的a标签

 

24.%20「%20E[attr*=val]%20」

这个属性选择器使用了通配符,用来选择具有属性attr并且只要属性值中包含val字符串的元素。也就是说只要所选属性中有val字符串,不管是不是多个用空格分隔的属性值,都将被选中。

XHTML

html:%20<div%20id=”demo”>%20<a%20href=””%20id=”test”%20title=”test
first”></a>%20<a%20href=”www.taobao.com”%20class=”taobao%20web”
title=”secondtest”></a>%20<a%20href=”#”%20id=”show”
title=”testlink”>%20</div>%20css:%20a[title*=test]{do%20something}
//将会选择具有title属性且其属性值包含test字符串的a标签

1 2 3 4 5 6 7 8 html:     <div%20id="demo">       <a%20href=""%20id="test"%20title="test%20first"></a>       <a%20href="www.taobao.com"%20class="taobao%20web"%20title="secondtest"></a>       <a%20href="#"  id="show"%20title="testlink">   %20</div>   css:     a[title*=test]{do%20something}%20//将会选择具有title属性且其属性值包含test字符串的a标签

 

25.%20「%20E[attr^=val]%20」

用来选择属性attr的属性值是以val开头的所有元素,注意它与E[attr|=val]的区别,attr|=val中-是必不可少的,也就是说以val-开头。

XHTML

html:%20<div%20id=”demo”>%20<a%20href=”%20″
id=”test”%20title=”test%20first”></a>%20<a%20href=”www.taobao.com”
class=”taobao%20web”%20title=”secondtest”></a>%20<a%20href=”#”
id=”show”%20title=”testlink”>%20</div>%20css:%20a[href^=http]{do
something}%20//将会选择href属性以http开头的a标签

1 2 3 4 5 6 7 8 html:     %20<div%20id="demo">       %20<a%20href="%20http://zhangmengxue.com"%20id="test"%20title="test%20first"></a>       %20<a%20href="www.taobao.com"%20class="taobao%20web"%20title="secondtest"></a>       %20<a%20href="#"  id="show"%20title="testlink">     </div>   css:     %20a[href^=http]{do%20something}%20//将会选择href属性以http开头的a标签

 

26.%20「%20E[attr$=val]%20」

这个选择器刚好跟E[attr^=val]相反,用来选择具有attr属性且属性值以val结尾的元素。

XHTML

html:%20<div%20id=”demo”>%20<a%20href=”
“%20id=”test”%20title=”test
first”></a>%20<a%20href=”www.taobao.com/title.jpg”%20class=”taobao
web”%20title=”secondtest”></a>%20<a%20href=”#”%20id=”show”
title=”testlink”>%20</div>%20css:%20a[href$=png]{do%20something}
//将会选择href属性以png结尾的a标签

1 2 3 4 5 6 7 8 html:     %20<div%20id="demo">         <a%20href="%20http://zhangmengxue.com/header.png"%20id="test"%20title="test%20first"></a>         <a%20href="www.taobao.com/title.jpg"%20class="taobao%20web"%20title="secondtest"></a>         <a%20href="#"  id="show"%20title="testlink">     %20</div> %20css:       a[href$=png]{do%20something}%20//将会选择href属性以png结尾的a标签

%201%20赞%20%206%20收藏%20%202
评论

%20

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图