:lang(en) > a#flag { background-image: url(english.gif); } :lang(fr) > a#flag { background-image: url(french.gif); }
-
1
-
2
这个选择器将会匹配相关的链接——如果页面的语言等于“en”或“fr”,或者以“en”或“fr”开头并在后面带个连字符“-”的话。
浏览器兼容性
不幸的是,只有IE浏览器中只有IE8支持该选择器,其它的主要浏览器都支持该伪类选择器。
5. CSS 3 伪类
:target
当你使用锚点(片段标识符 fragment identifier)的时候,比如,http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments,这“#comments”就是一个片段标识符,你就可以使用:target伪类来控制目标的样式。
举个例子,比如你有一个很长的使用了很多文字和h2标题的页面,然后在页面的头部有一个对这些标题的索引。如果在点击索引内的某个链接时,相应的标题以某种方式高亮,然后滚动到相应的位置,对读者就会很有用。很简单。
h2:target { background: #F2EBD6; }
- 1
浏览器兼容性
这一次,IE浏览器完全不支持:target伪类,另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器。但是其它的各个主流浏览器都支持该选择器。
UI元素状态伪类
有些HTML元素有enable 或disabled 状态(比如,文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可以使用:enabled、:disabled 或:checked 伪类来分别定位。
那么你就会想,如果任意一个禁用的(disabled)文本框应该使用浅灰色的背景和虚线边框:
input:disabled { border:1px dotted #999; background:#F2F2F2; }
- 1
你也可能会想让所有选中的复选框有个左边距(这样就可以在众多的复选框中很容易认出来):
input[type=”checkbox”]:checked { margin-left: 15px; }
- 1
浏览器兼容性
所有的主流浏览器,除了我们常常不报希望的IE系列浏览器,都支持UI元素状态伪类。如果你考虑只是添加附加级别的细节和增强网站的可用性,这个仍然是可以采用的。
6. CSS 3 结构伪类
:nth-child
:nth-child()伪类允许你定位某个父级元素的一个或多个特定的子元素.
你可以通过定义它的值为一个整数来定位某个单个子元素:
ul li:nth-child(3) { color: red; }
- 1
这将会让ul元素的第三个li元素的文字变成红色。注意如果在ul里面有个其它类型的元素(不是li),它也会算作其子元素。
你可以使用表达式来定位子元素。比如,下面的表达式将从第四个开始匹配每第三个元素。
ul li:nth-child(3n+4) { color: yellow; }
- 1
在上面的这个例子中,第一个黄色的li元素将会是第四个。如果也想从第一个开始匹配,你可以使用一个简单的表达式:
ul li:nth-child(3n) { color: yellow; }
- 1
这样的话,第一个黄色的li元素将会是第三个子元素,然后是它后面的每隔第三个。现在想象一下如果你只想匹配列表中的前四个子元素:
ul li:nth-child(-n+4) { color: green; }
- 1
:nth-child的值同样也可以被定义为“even” 或“odd”,和“2n” (第偶数个) 或“2n+1” (第奇数个)的效果是一样的。
:nth-last-child
:nth-last-child伪类基本上和:nth-child伪类的作用相同,但是它从最后一个元素开始算。
使用上面的一个例子来看看:
ul li:nth-child(-n+4) { color: green; }
- 1
不是匹配最前面的四个li元素,该选择器匹配最后面的四个元素。
你同样可以使用“even” 或“odd”只,同样与nth-child不同的是,这是从最后面的元素开始算的:
ul li:nth-last-child(odd) { color: grey; }
- 1
:nth-of-type
:nth-of-type伪类和:nth-child也很像,不同的是它只计算选择器中指定的那个元素。
这对定位元素中包含大量不同的元素的情况会很有用。比如,我们想控制一个文本块中的每隔一个段落,但是我们又想要无视其它元素比如图片和引用块:
p:nth-of-type(even) { color: blue; }
- 1
你也可以使用一些值,就像在:nth-child中使用的一样。
:nth-last-of-type
你能猜到它吧?!:nth-last-of-type 伪类可以像前面提到的:nth-last-child一样使用,但是这次,它将之匹配你在选择器中指定的元素类型:
ul li:nth-last-of-type(-n+4) { color: green; }
- 1
我们可以更加的聪明一些,在一个大的块级选择器中结合多种这样的伪类。比如我们想让文章中的所有的图片左浮动,除了第一个和最后一个(我们可以假设他们是满宽的,无须浮动):
.post img:nth-of-type(n+2):nth-last-of-type(n+2) { float: left; }
- 1
所以在这个选择器的第一部分,我们从第二个图片开始定位每一个图片。在第二部分中,我们定位所有的图片,除了最后一个。因为这两个选择器并非互斥的,我们可以同时使用它们,这样就可以一下子排除第一个和最后一个元素!
:last-child
:last-child伪类的作用类似于:first-child 伪类,但是会定位父级元素的最后一个子元素。
让我们假设你不想让你的日志的div的最后一个段落也有一个底部边距:
.post > p:last-child { margin-bottom: 0; }
- 1
该选择器将定位class为”post”的元素的最后一个直接子级段落。
:first-of-type 和:last-of-type
:first-of-type 伪类用于定位一个父级元素下的第一个同类子元素。
比如,你可以定位某个特定的div的第一个子级段落§,并让其第一行字母大写:
.post > p:first-of-type:first-line { font-variant: small-caps; }
- 1
在这个选择器中,你可以确定你是在只定位class为”post”的元素的直接子级p元素,而且还是匹配第一个子级p元素。
:last-of-type伪类与此类似,只是匹配最后一个子元素。
only-child
o nly-child伪类表示一个元素是它的父级元素的唯一一个子元素。
比如说,你有一些盒子(“news”),里面有一些文字段落,当你有多于一个段落的时候,你想让文字比只有一个段落的时候小一些:
div.news > p { font-size: 1.2em; } div.news > p:only-child { font-size: 1.5em; }
- 1
第一个选择器中,我们定义”news”div的所有子级p元素的字体大小。在第二个中,我们覆盖之前的字体大小,如果该p元素是“news” div的唯一子元素的时候,它的字体大小会比较大一些。
only-of-type
only-of-type伪类表示一个元素是它的父级元素的唯一一个相同类型的子元素。
这有用什么用?假设你有一些日志,每一篇都有个class为”post”的div,他们中的一些有多于一张图片,但是有些可能就只有一张图片。你想让后者中的图片水平居中,而在其它的有多于一张图片的日志中,就将它左浮动。这个需求用这个选择器就很容易实现:
.post > img { float: left; } .post > img:only-of-type { float: none; margin: auto; }
-
1
-
2
:empty
:empty伪类表示一个元素里面没有任何内容。
这个选择器可以用很多种用途。比如,你在你的“sidebar”中有若干个盒子,但是不想让空盒子显示出来:
#sidebar .box:empty { display: none; }
- 1
注意,就算”box”div里面只有一个空格,它也不会被css当作空标签的,这样就不能匹配该选择器了。
浏览器支持
Internet Explorer (直到8.0版本)都不支持结构伪类。Firefox、Safari 和Opera 在其最新版本的浏览器中指出这些选择器。这意味着,使用这些选择器对网站的可用性和可访问性是很有用的,或者如果网站的用户中的大部分是使用IE而且你不想在某些细节上无视他们,最好还是保持使用通用的class和简单的选择器来迎合这些选择器。否则你会被搞疯的!
7. 否定选择器
否定选择器:not(),可以让你定位不匹配该选择器的元素
比如,如果你需要定义表单元素中的input元素,但是又不想包括submit类型的input的时候会灰常有用——你想它们有不同的样式,以看起来像按钮:
input:not([type=“submit”]) { width: 200px; padding: 3px; border: 1px solid #000000; }
- 1
另一个例子,你想你的日志的div中的所有段落§有比较大的字体,除了表示时间和日期的段落:
.post p:not(.date) { font-size: 13px; }
- 1
你可以想象这个选择器能带给你的潜力了吧,你能够从你的CSS文件中剥离(剔除)的无用的大量选择器也被它广泛支持吗?
浏览器支持
Internet Explorer在这里常常是让我们感到扫兴的东西:一点都不支持,甚至在IE8中。这大概意味着这些选择器将仍不得不等到一些开发者开始不再顾虑将它添加到他们的样式表中才会普及。
8. 伪元素
伪元素允许你操作HTML中不是真实存在的元素,比如一个文本块的第一行或者第一个字母。
伪元素在CSS 2.1中就已经存在,但是CSS 3说明书表示他们应该使用双冒号“::”,以与伪类区分开来。在CSS 2.1中,他们也是使用单个冒号“:”的。浏览器会将能够接受两种格式,除非这些伪元素只存在于CSS3中。
::first-line
::first-line伪元素将匹配block、inline-block、table-caption、table-cell等等级别元素的第一行
这对在你的文字块上添加一些微妙的排版细节相当有用,比如,将一片文章的第一行文字改成小写字母:
h1 + p::first-line { font-variant: small-caps; }
- 1
如果你专心的阅读了我们前面的内容,你将会了解到上面的语法意味着,紧紧的跟在H1标签之后(+)的段落会将其第一行文字显示为小写字母。
你也可以针对相关的div的第一行,而不用针对实际的段落标签§:
div.post p::first-line { font-variant: small-caps; }
- 1
或者更进一步,定位某个特低的div的第一个段落的第一行:
div.post > p:first-child::first-line { font-variant: small-caps; }
- 1
这里,“>”符号表示你指定的是post div的直接子级元素,这样如果段落被包括在第二级div中,它就不会匹配这个选择器。
::first-letter
::first-letter伪元素将会匹配一个文本块的第一个字母,除非在同一行里面包含一些其它元素,比如图片。
和::first-line伪类一样,::first-letter通常用于给文本元素添加排版细节,比如下沉字母或首字母。
这里是如何使用::first-letter伪元素创建首字下沉的例子:
p { font-size: 12px; } p::first-letter { font-size: 24px; float: left; }
- 1
注意如果你在某些元素中同时使用::first-line 和::first-letter ,::first-letter 属性将覆盖从::first-line中继承下来的某些属性。
如果你不知道W3C规则的话,这个元素有时会产生意想不到的结果:它事实上是使用最长的规则的选择器!所以如果你计划使用它的话最好仔细的阅读一下 (其它选择器也一样)。
::before 和 ::after
::before和::after 伪元素用于在一个元素的前面或后面插入内容,纯CSS方法。
这些元素将继承它们将附加的元素的大部分属性。
假设你想在你的页面中的图标的描述前面添加文字“Graphic number x:”。你将无需写文字“Graphic number”,或者自己手动添加数字:
.post { counter-reset: image; } p.description::before { content: "Figure number " counter(image) ": "; counter-increment: image; }
-
1
-
2
React
-
介绍一下react
-
React单项数据流
-
react生命周期函数和react组件的生命周期
-
react和Vue的原理,区别,亮点,作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗,虚拟DOM是怎么对比的呢
-
项目里用到了react,为什么要选择react,react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
-
setState之后的流程
-
react高阶组件知道吗?
-
React的jsx,函数式编程
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西,接受几个参数
-
redux请求中间件如何处理并发