上一篇文章写的特别混乱,现在重新把顺序捋一遍.说明一下,以后资料借鉴较多的地方来源于mdn-web-英文文档.建议大家还是看英文文档,因为中文文档翻译质量参差不齐,经常看着看着就一团浆糊了;而且最关键的demo居然看不到效果–因为有时候我是只看demo的..而且mdn的英文文档单次并不太陌生,很常见,所以对英语要求不高.
- 基本选择器
包括元素选择器,类选择器,ID选择器,通配选择器,属性选择器[attr=value].前三者接触地较多,这里只说说通配选择器,通配选择器是一个星号*,可以匹配会涉及到css命名空间的概念,一篇简书上的文章完全弄错了css命名空间的概念 , 对比一下zxx前辈的相关阐述还不错.根据维基百科的定义,namespace可以让XML文档可能包含来自多个XML词汇表的元素或属性彼此间没有冲突.例如常见的XHTML文档的命名空间:
<html xthml="http://www.w3.org/1999/xhtml>上面代码中的url就是个简单的命名空间名称,但是它并不一定指向实际的线上地址,浏览器不使用或者处理这个地址.07年Bert Bos指出引入CS命名空间的目的在于使用的选择器仅匹配特定命名空间下的元素.比如说SVG使用了和HTML一样的元素和属性,如果SVG和HTML这两个文档同时应用同一个样式文件的话,最好对SVG和HTML做样式分离以避免出现样式覆盖:
- 声明你的文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="en" lang="en"> - 在你的样式文件内为css规则定义默认命名空间
@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";- 有了上面的声明,就可以为SVG文件应用相应的CSS规则:
svgla {color: white;}可以了解到,如果SVG与HTML结合起来,css命名空间会有较大用途,其他情况就作用甚微,因为css @import工程化已经成为主流.
- 组合选择器
相邻adjacent兄弟选择器A + B
前方元素 + 目标元素{样式声明},他只会匹配紧跟前方元素的同胞元素.浏览器兼容性方面适用于IE7+,需要注意的是,在IE7+里面,当一个元素被动态地插入到文档内的目标元素之前时,浏览器不会正确的更新样式;在IE8中,如果一个元素是通过点击一个链接动态地被插入的话,此链接一旦失焦该元素的第一个子元素的样式立刻失效.
普通general兄弟选择器A ~ B
注意在满足’第二个元素是跟在第一个元素之后的同胞元素’这样的条件时,只会匹配成第二个元素,适用于IE7+.
示例:
p ~ span {
color: red;
}
<p>Paragragh.</p>
<code>Code.</code>
<span>Span.</span>注意只有 Span. 文本变红.
子选择器A > B
后代元素A B
相信把子选择和后代选择放在一起就不用多说,注意形式罢了.
- 伪元素
语法上,css3中,注意和伪类的单冒号前缀要区分开(嘻嘻,说实话有时候不看手册还真的过时地认为只有单引号..哪有地缝我要钻进去..),如果为了兼容ie8,应采用:after,不过咱们还是向css3靠齐吧,咱们得贡献自己的力量,尽全力加速IE的淘汰呀.相当重要的伪元素包括::after ::before,以::after为例,他用来匹配已选中元素的最后一个虚拟子元素——默认是一个行内元素.这两个伪元素经常和content属性还有其他一些属性结合使用.这里有一个codepen上面的例子,好像save之后就放在我的名下..
稍微常见的包括::first-letter ::first-line ::selection ::backdrop处于试验阶段的包括::placeholder ::marker ::spelling-error ::grammar-error.
- 伪类
伪类在数量上多于伪元素,经常用到的有LVHA—- :link :visited :hover :active, 以:active为例,当鼠标交互时,他代表的是用户按下按键和松开按键之间的时间.他用来匹配tab键交互,用于a,button标签等元素,对任何元素的支持限于IE8+.较为常见的有:any,示例如下:
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, 可以用来替换如下代码:
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
list-style-type: square;
}
/* 3 deep (or more) unordered lists use a square */
ol ol ul, ol ul ul, ol menu ul, ol dir ul,
ol ol menu, ol ul menu, ol menu menu, ol dir menu,
ol ol dir, ol ul dir, ol menu dir, ol dir dir,
ul ol ul, ul ul ul, ul menu ul, ul dir ul,
ul ol menu, ul ul menu, ul menu menu, ul dir menu,
ul ol dir, ul ul dir, ul menu dir, ul dir dir,
menu ol ul, menu ul ul, menu menu ul, menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir, menu ul dir, menu menu dir, menu dir dir,
dir ol ul, dir ul ul, dir menu ul, dir dir ul,
dir ol menu, dir ul menu, dir menu menu, dir dir menu,
dir ol dir, dir ul dir, dir menu dir, dir dir dir {
list-style-type: square;
}
是不是一看就懂,简而言之这是一种列举的简写方式.:checked和input表单元素相关,示例是让label和for搭配,以css伪类的方式通过浏览器自动检测input元素的checked属性而不是用js操作来变换其他tr元素,p元素的display属性, :default :dir()跟dir属性相关,:disabled和:enabled都和input表单元素有关,其实:enabled是默认的,在input标签末尾加了enabled和没加是一样的效果,但是样式选择器就不一样,加没加:enabled是有区别的,注意html当中没有: .
:empty示例如下:
.box {
background: red;
}
.box {
background: lime;
}<div class="box"><!-- I will be lime --></div>
<div class="box">I will be red</div>
<div class="box">
<!-- I will be red because of whitespace around this comment node-->
</div>现在知道empty的真实含义了吧.
:first :first-child :first-of-type 别把三者弄混了,first-child应该用得较多,:first跟文档打印相关,用得较少:
@page :first {
margin: 2in 3in;
}:first-of-type见如下代码:
div .first-of-type {
background: lime;
}<div>
<span>This span is first span.</span>
<span>I am not.:(</span>
<span>What about this<em>nested element</em>?</span>
<strike>This is another 'first' type</strike>
</div>这里有个很好的demo来鉴别first-child和first-of-type,两者必须用对用好才能起很好的作用
还有许多其他伪类,比如:fullscreen :focus等等,这里就不一一列举了.
好了,css回顾系列1之选择器结束,暂时告一段落.
扫一扫
1552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
