金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > css选择器知识汇总,30个你必须记住的CSS选择符

css选择器知识汇总,30个你必须记住的CSS选择符

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-12-21 21:59

它会选中`#container`下的所有元素。当然,我还是不建议你去使用它,如果可能的话。DEMO兼容性IE6+FirefoxChromeSafariOpera2. #X

 

9. X ~ Y

ul ~ p {  
   color: red;  
}  

 这是兄弟选择符和X + Y一样,然而,它没有约束。与相邻选择符(ul + li)仅选择前一个选择符后面的第一个元素比起来,兄弟选择符更宽泛。它会选择,我们上面例子中更在ul后面的任何p元素。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera
ul:first-of-type  li:nth-child(2) { font-weight: bold;}

7. X+Y

ul + p {
   color: red;
}

这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有`ul`标签后面的第一段,并将它们的颜色都设置为红色。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

译者注

本文问翻译文章,原文为“The 30 CSS Selectors you Must Memorize”

金沙棋牌官方平台 1 支持我继续翻译吧。

金沙棋牌官方平台 2更多文章请访问的我的博客。

金沙棋牌官方平台 3 关注我的微博吧。

a:link {color:red;}a:visited {color: purple;}

26. X:first-child

ul li:first-child {
   border-top: none;
}

这个结构性的伪类可以选择到第一个子标签,你会经常使用它来取出第一个和最后一个的边框。

假设有个列表,没个标签都有上下边框,那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

 5. X

a { color: red; }  
ul { margin-left: 0; }   

如果你想匹配页面上的所有的元素,根据他们的类型,而不是id或类名?显而易见,使用类型选择符。如果你需要选择所有的无序列表,请使用ul {}。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

这个叫属性选择器,上面的这个例子中,只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。那再想想如果你想更加具体的去筛选?那…DEMO兼容性IE7+FirefoxChromeSafariOpera11. X[href="foo"]

在Windows系统上的Firefox 6上,我测得了一个简单类选择器的(reflow figure)重绘速度为10.9ms,而ID选择器为12.5ms,所以事实上ID比类选择器重绘要慢一点点。

27. X:last-child

ul > li:last-child {  
   color: green;  
}

与first-child相反,last-child会选择父节点的最后一个子节点。 
例子: 
我们建立一些例子来示范这些类的可能的用法。我们会建立一种风格来展示。 
标记

<ul>  
   <li> List Item </li>  
   <li> List Item </li>  
   <li> List Item </li>  
</ul> 

没啥特别的,就是一个简单的序列。 
Css 

ul {  
 width: 200px;  
 background: #292929;  
 color: white;  
 list-style: none;  
 padding-left: 0;  
}  

li {  
 padding: 10px;  
 border-bottom: 1px solid black;  
 border-top: 1px solid #3c3c3c;  
} 

金沙棋牌官方平台 4

这个样式会设置一个背景,删除浏览器默认的ul的padding值,并定义边框给每一个li来提供一点深度。

如上图所示,唯一的问题是最上面的边框和最下面的边框看起来有点儿怪。让我们来使用:first-child和:last-child来解决这个问题。

li:first-child {  
    border-top: none;  
}  

li:last-child {  
   border-bottom: none;  
} 

 金沙棋牌官方平台 5

看上图,解决了不是。

查看例子

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

是滴,IE8支持 first-child 不过不支持last-child。

金沙棋牌官方平台 6

金沙棋牌官方平台 7

17. X:checked

input[type=radio]:checked {  
   border: 1px solid black;  
}  

这种伪类只会匹配已经被选中的单选元素。就是这么简单。

查看例子

兼容性

  • E9+
  • Firefox
  • Chrome
  • Safari
  • Opera

专家提示:border-bottom:1px solid black;比text-decoration:underline;要好看很多。兼容性IE6+(IE6只能在锚点标签上起作用)FirefoxChromeSafariOpera20. X:not(selector)

2. #X

#container {
   width: 960px;
   margin: auto;
}

在选择器中使用`#`可以用id来定位某个元素。大家通常都会这么使用,然后使用的时候大家还是得相当小心的。
需要问自己一下:我是不是必须要给这个元素来赋值个id来定位它呢?

`id`选择器是很严格的并且你没办法去复用它。如果可能的话,首先试试用标签名字,HTML5中的新元素,或者是伪类。

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性。在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用。

div:hover { background: #e3e3e3;}

 

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {  
   border: 1px solid black;  
} 

没错,我们一样可以使用nth-last-of-type来从结束开始回溯这个选择器,来找到我们想要的元素 

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

给这些元素设置了这个标志之后,我们就可以使用`~`来定位这些标签了。

最基本的选择器是元素选择器(比如div),ID选择器(比如#header)还有类选择器(比如.tweet)。一些的不常见的选择器包括伪类选择器(:hover),很多复杂的CSS3和正则选择器,比如:first-child,class ^= “grid-”。CSS选择器具有高效的继承性,引用Steve Souders的话, CSS选择器效率从高到低的排序如下:

29. X:only-of-type

li:only-of-type {  
   font-weight: bold;  
} 

金沙棋牌官方平台,这种结构的伪类有几种灰常聪明的用法。它可以选定在其父节点内没有兄弟节点的元素。例如,我们可以选择只有一个li作为其子孩子的ul。 
首先,取决于你想怎样完成这一目标。你可以使用 ul li,不过,这回选择所有li元素。唯一的办法是使用only-of-type。 

ul > li:only-of-type {  
   font-weight: bold;  
}

查看例子

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

上面的代码将设置背景色,移除浏览器默认的内边距,为每个`li`设置边框以凸显一定的深度。DEMO兼容性IE9+FirefoxChromeSafariOpera28. X:only-child

怎么提升CSS选择器性能?

1、避免使用通用选择器

.content * {color: red;}

浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素,直到文档的根节点。因此其匹配开销是非常大的,所以应避免使用关键选择器是通配选择器的情况。

 

2、避免使用标签或 class 选择器限制 id 选择器

BAD
button#backButton {…}
BAD
.menu-left#newMenuIcon {…}
GOOD
#backButton {…}
GOOD
#newMenuIcon {…}

3、避免使用标签限制 class 选择器

BAD
treecell.indented {…}
GOOD
.treecell-indented {…}
BEST
.hierarchy-deep {…}

4、避免使用多层标签选择器。使用 class 选择器替换,减少css查找

BAD
treeitem[mailfolder="true"] > treerow > treecell {…}
GOOD
.treecell-mailfolder {…}

5、避免使用子选择器

BAD
treehead treerow treecell {…}
BETTER, BUT STILL BAD 
treehead > treerow > treecell {…}
GOOD
.treecell-header {…}

6、使用继承

BAD 
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
GOOD
#bookmarkMenuItem { list-style-image: url(blah) }

12. X[href*="nettuts"]

a[href*="tuts"] {  
  color: #1f6053; /* nettuts green */  
} 

 来了不是~这就是我们需要的代码。*号指定了包含该属性的值必须包含定义的值。就是说,这句代码包含了href值为 nettuts.com,net.tutsplus.com或者tutsplus.com。 
记住这个描述过于宽泛,如果是某个锚点标签链接到某个连接中带有tuts非Envato的网站(tutsplus属于Envato旗下网站)呢?因此你需要更多特性来限制,分别使用^和&来限定字符串的开始和结束。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

同样,也可以类似的使用`nth-last-of-type`来倒序的获取标签。兼容性IE9+Firefox3.5+ChromeSafariOpera26. X:first-child

选择器的优先级是怎么规定的呢?

一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。通常我们用1表示标签名选择器的优先级,用10表示类选择器的优先级,用100标示ID选择器的优先级。比如上例当中 .polaris span {color:red;}的选择器优先级是 10 + 1 也就是11;而 .polaris 的优先级是10;浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌:

div.test1 .span var 优先级 1+10 +10 +1  
span#xxx .songs li 优先级1+100 + 10 + 1  
#xxx li 优先级 10

对于什么情况下使用什么选择器,用不同选择器的原则是:

 

1、准确的选到要控制的标签;

 

2、使用最合理优先级的选择器;

 

3、HTML和CSS代码尽量简洁美观。通常:

 

①最常用的选择器是类选择器。

 

②li、td、dd等经常大量连续出现,并且样式相同或者相类似的标签,我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的方式选择。

 

③极少的情况下会用ID选择器,当然很多前端开发人员喜欢header,footer,banner,conntent设置成ID选择器的,因为相同的样式在一个页面里不可能有第二次。

 

在这里不得不提使用在标签内引入CSS的方式来写CSS,即:

<div style="color:red">polaris</div> 

这时候的优先级是最高的。我们给它的优先级是1000,这种写法不推荐使用,特别是对新手来说。这也完全违背了内容和显示分离的思想。DIV+CSS的优点也不能再有任何体现。


8. X > Y

div#container > ul {  
  border: 1px solid black;  
}  

X Y和X > Y之间的不同点是后者只选择直接子代。例如,考虑如下的标记。

<div id="container">  
   <ul>  
      <li> List Item  
        <ul>  
           <li> Child </li>  
        </ul>  
      </li>  
      <li> List Item </li>  
      <li> List Item </li>  
      <li> List Item </li>  
   </ul>  
</div> 

选择符#container > ul将只选择id为container的div的直接子代ul。它不匹配更深层的li的子代的ul。

因此,使用子代选择符有性能上的优势。事实上,这同样适用于基于css选择器的javascript引擎。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera
ul:nth-of-type(3) { border: 1px solid black;}

在一个标签选择器(a)的测试上显示,它比类或ID选择器的速度慢了很多。在一个嵌套很深的后代选择器的测试上,显示数据为440左右!从这里我们可以看出ID/类选择器 和 元素/后代选择器中间的差异较大,但是相互之间的差异较小。

19. X:hover

div:hover {  
  background: #e3e3e3;  
}  

我去,这个你必须懂。典型的官方形式的用户触发伪类。听起来会有点迷惑,不过实际上并非如此。想在用户在某个元素上面悬停时定义个特别的样式?这个属性就是做这个的。

记住啦,较old版本的IE,只能在锚点标签后使用这个hover。

这个选择器你用得最多的情况,估计可能就是在锚点的悬停时加个border-bottom啦。

a:hover {  
 border-bottom: 1px solid black;  
}  

 小贴士: border-bottom:1px solid black;比 text-decoration:underline;好看一点哦。(真的?我去)

兼容性

  • IE6+ (In IE6, :hover must be applied to an anchor element)
  • Firefox
  • Chrome
  • Safari
  • Opera
a[data-info~="external"] { color: red;} a[data-info~="image"] { border: 1px solid black;}

12. X[href*="strongme"]

a[href*="strongme"] {
  color: #1f6053;
}

Tada,正是我们需要的,这样,就指定了`strongme`这个值必须出现在锚点标签的`href`属性中,不管是`strongme.cn`还是`strongme.com`还是`www.strongme.cn`都可以被选中。
但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是`strongme`相关的站点,如果要更加具体的限制的话,那就使用`^`和`$`,分别表示字符串的开始和结束。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

15. X[data-*="foo"]

a[data-filetype="image"] {  
   color: red;  
}  

回顾最近一条,我们如何能包含各种图片类型:png,jpeg,jpg,gif?很容易想到,我们能通过多个选择器来不是,像这样:

a[href$=".jpg"],  
a[href$=".jpeg"],  
a[href$=".png"],  
a[href$=".gif"] {  
   color: red;  
} 

 不过,这样很蛋疼,效率极低。另一个解决办法是使用自定义属性。如果我们加了一种自己的 data-filetype 属性给每一个链接到图片的锚点的话呢?

    <a href="path/to/image.jpg" data-filetype="image"> Image Link </a>  

 这样关联后,我们就能使用标准的属性选择器来指定这些链接啦。看下面:

a[data-filetype="image"] {  
   color: red;  
}

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

这里没啥内容,就是一个了 List。

21. X::pseudoElement

p::first-line {
  font-weight: bold;
  font-size:1.2em;
}

我们可以使用`::`来选中某标签的部分内容,如地一段,或者是第一个字没有。但是记得必须使用在块式标签上才起作用。

伪标签是由两个冒号 :: 组成的。

定位第一个字

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

上面这段代码会找到页面上所有段落,并且指定为每一段的第一个字。

它通常在一些新闻报刊内容的重点突出会使用到。

定位某段的第一行

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

跟`::first-line`相似,会选中段落的第一行 。

为了兼容性,之前旧版浏览器也会兼容单冒号的写法,例如`:first-line`,`:first-letter`,`:before`,`:after`.但是这个兼容对新介绍的特性不起作用。

 

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

18. X:after

before 和 after 伪类也很蛋疼。貌似人们每天都能找到或者发明一些新办法来有效地使用它们。它们很容易控制选择器周围的内容。 
很多第一次使用是因为他们需要对clear-fix进行改进。

.clearfix:after {  
    content: "";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    font-size: 0;  
    height: 0;  
    }  

.clearfix {   
   *display: inline-block;   
   _height: 1%;  
}

这个改进使用了:after伪类元素来在元素后增加一个空间,然后清除它。这个牛X的技巧你应该收藏到工具包里,特别是当overflow:hidden方法无能为力的时候。 
想看看其他创造性的用法:访问我滴创建阴影的窍门

通过Css3选择器的标准说明书,你应该有技巧地使用这些伪类语法——双冒号::。不过为了兼容,浏览器会接受一个双引号。

兼容性

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera
.error { color: red;}

22. X:nth-child(n)

li:nth-child(3) {
   color: red;
}

还记得我们面对如何取到推跌式标签的第几个元素是无处下手的时光么,有了`nth-child`那日子就一去不复返了。

请注意`nth-child`接受一个整形参数,然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是`li:nth-child(2)`.

我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用`li:nth-child(4n)`去每隔3个元素获取一次标签。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

7. X + Y

ul + p {  
   color: red;  
} 

这被称作相邻选择符。它将只选择紧贴在X元素之后Y元素。上面的例子,仅每一个ul之后的第一个段落元素的文本为红色。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera
#container * { border: 1px solid black;}

10. X[title]

a[title] {
  color: green;
}

这个叫属性选择器,上面的这个例子中,只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。那再想想如果你想更加具体的去筛选?那…

 

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

26. X:first-child

ul li:first-child {  
   border-top: none;  
}  

这个结构的伪类让我们可以选择某个元素的第一个子孩子。你通常可以使用这个办法来删除第一个或者最后一个元素的边框。 
例如,你有一系列的rows,每一个都有border-top 和border-bottom。这种情况下,第一行和最后一行看起来会灰常怪。 
很多设计师会使用first和last类来弥补这个缺陷。相反,你可以使用这些伪类来解决这些问题。 

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera
ul li List Item /li li List Item /li li List Item /li/ul

必须记住的30类CSS选择器

大概大家读知道“id”,“class”以及“descendant”选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式。下面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面。

 

14. X[href$=".jpg"]

a[href$=".jpg"] {  
   color: red;  
}  

又来了,我们还是使用正则表达式符号,$(dolor),来作为字符串的结束标记。这种情况下,我们就会搜索所有url以.jpg为结尾的锚点啦。记住记住这种情况下gif和png格式的图片不会被选择哦。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera
div p:only-child { color: red;}

1. *

* {
  margin: 0;
  padding: 0;
}

在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空`margin`和`padding`。当然你在练习的时候使用这个没问题,但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。
`*`也可以用来选择某元素的所有子元素。

#container * {
  border: 1px solid black;
}

它会选中`#container`下的所有元素。当然,我还是不建议你去使用它,如果可能的话。

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {  
   border: 1px solid black;  
}

你应该有很多时候想要元素类型来选择元素而不是通过孩子。 
想象一下标记5个无序列表(UL)。如果你想定义第三个ul,并且没有一个唯一的id来找到它,你就可以使用 nth-of-type(3)伪类了。在上面这个代码段中,只有第三个ul才会有黑色的边框。

查看例子

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有`ul`标签后面的第一段,并将它们的颜色都设置为红色。DEMO兼容性IE7+FirefoxChromeSafariOpera8. XY

9.伪类选择器(a:hover, li:nth-child)

16. X[foo~="bar"]

 a[data-info~="external"] {  
   color: red;  
}  

a[data-info~="image"] {  
   border: 1px solid black;  
} 

这儿有个鲜为人知的特殊技巧,绝对让你印象时刻。~(tilda)符,它可以帮助我们指向那些以空格隔开多个值的属性的元素(真拗口,这翻译我自己都看不懂,水平问题) 
以我们第15条的自定义属性为例,上面的代码中我们创建了 data-info属性,这个属性可以定义以空格分隔的多个值。这样,这个链接本身就是个icon,并且指向的也是一个图片链接,像下面这样。

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>  

有了这样适当的标记,通过使用 ~ 属性选择器的技巧,我们就可以指向任何具有着两种属性的任何一种啦。

/* Target data-info attr that contains the value "external" */  
a[data-info~="external"] {  
   color: red;  
}  

/* And which contain the value "image" */  
a[data-info~="image"] {  
  border: 1px solid black;  
}

 很棒,不是吗?

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

结论

如果你想向旧版本浏览器妥协,比如IE6,那你用这些新的选择器的时候还是得小心点。但别别让IE6组织你去学这些新的技能。那你就对自己太残忍了。记得多查查[兼容性列表]( Edward's excellent IE9.js script ](

第二个,使用向jQuery的时候,尽量使用原生的CSS3选择器。可能 活让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器,而不是选择器自己的。

3. .X

.error {  
  color: red;  
}

现在介绍的是类选择符。id和类的不同之处在于后者可以多次使用。当你想给一组元素应用样式的时候可以使用类选择符。另外,当你紧想给特殊元素应用样式的时候才使用id。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

下一个常用的就是`descendant`选择器。如果你想更加具体的去定位元素,你可以使用它。例如,假如,你不需要定位所有的`a`元素,而只需要定位`li`标签下的`a`标签?这时候你就需要使用`descendant`选择器了。专家提示:如果你的选择器像`X Y Z A B.error`这样,那你就错了。时刻都提醒自己,是否真的需要对那么多元素修饰。DEMO兼容性IE6+FirefoxChromeSafariOpera5. X

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

同样,也可以类似的使用`nth-last-of-type`来倒序的获取标签。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

  • Opera

28. X:only-child

div p:only-child {  
   color: red;  
}

实话说,你很可能会发现你不会经常使用 only-child伪类。尽管如此,它确实有用,你应该需要它。 
它可以帮助你选择是父节点的独生子(没别的孩子啦)的元素。例如,使用上面的代码,只有是div的唯一子孩子的p段落才会定义其颜色为red。 
让我们来假定下面的标记。

<div><p> My paragraph here. </p></div>  

<div>  
   <p> Two paragraphs total. </p>  
   <p> Two paragraphs total. </p>  
</div> 

这样,第二个div的p标签的内容不会被选中。只有第一个div的p才会被选中。 

查看例子

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

跟`first-child`相反,`last-child`取的是父标签的最后一个标签。例如标签

8. X>Y

div#container > ul {
  border: 1px solid black;
}

`X Y`和`X > Y`的差别就是后面这个指挥选择它的直接子元素。看下面的例子:

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

`#container > ul`只会选中`id`为’container’的`div`下的所有直接`ul`元素。它不会定位到如第一个`li`下的`ul`元素。
由于某些原因,使用子节点组合选择器会在性能上有许多的优势。事实上,当在javascript中使用`css`选择器时候是强烈建议这么做的。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

2.#X

#container {  
   width: 960px;  
   margin: auto;  
}  

井号前缀允许我们选择id。这是最常见的用法,不过应该慎重使用ID选择器。

反复问自己:我一定需要id来匹配要选择的元素吗?

id选择符是唯一的,不允许重复使用。如果可能的话,先尝试使用一个标签名称,一个新的HTML5元素,甚至是一个伪类。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera
a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"] { color: red;}

纵使ID选择器很快、高效,但是它也仅仅如此。从Steve Souders的CSS Test我们可以看出ID选择器和类选择器在速度上的差异很小很小。

23. X:nth-last-child(n)

li:nth-last-child(2) {  
   color: red;  
} 

如果我有灰常多的li在ul里面,我只想要最后3个li怎么办?不必使用li:nth-child(397),你可以使用nth-last-child伪类。 
这种技巧和第六条几乎一样有效,不过两者的不同之处在于它从结束开始收集,用回溯的方式进行。

查看例子

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera
p::first-line { font-weight: bold; font-size: 1.2em;}

简洁、高效的CSS

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误:

 

金沙棋牌官方平台 8

 

不要在ID选择器前使用标签名

一般写法:DIV#divBox

更好写法:#divBox

解释: 因为ID选择器是唯一的,加上div反而增加不必要的匹配。

 

不要再class选择器前使用标签名

一般写法:span.red

更好写法:.red

解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:

  1. p.red{color:red;}  
  2. span.red{color:#ff00ff} 

如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写

 

尽量少使用层级关系

一般写法:#divBox p .red{color:red;}

更好写法:.red{..}

 

使用class代替层级关系

一般写法:#divBox ul li a{display:block;}

更好写法:.block{display:block;}


1.*

* {  
 margin: 0;  
 padding: 0;  
}

对于初学者,在学习更多高级选择器之前,最先了解的选择器。

星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为零。虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它。它给浏览器带来大量不必要的负担。

* 也能作为子选择符使用。

#container * {  
 border: 1px solid black;  
} 

这将匹配#container div的每一个后代元素。再次强调,尽量不要使用这种技术。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera
p::first-line { font-weight: bold; font-size:1.2em;}

11. X[href="foo"]

a[href="http://strongme.cn"] {
  color: #1f6053; /* nettuts green */
}

上面这片代码将会把`href`属性值为`

注意我们将值用双引号括起来了。那么在使用Javascript的时候也要使用双引号括起来。可以的话,尽量使用标准的CSS3选择器。

这样可以用了,但是还是有点死,如果不是这个链接,而是类似的链接,那么这时就得用正则表达式了。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

结论

如果你仍在为解决old浏览器的缺陷而纠结,如IE6。在使用这些新的选择器方面,你仍然需要非常小心。不过,别因为这个阻碍了你对这些新玩意儿的学习。别虐待自己。确保关注这里的兼容性列表。应一方面,你可以使用 Dean Edward's excellent IE9.js script 来为旧浏览器提供新的选择器支持。(我去。cool) 
其次,当使用javascript库时,如流行的jQuery,最好尽可能使用这些css3本身的选择器而不是使用库的自定义方法/选择器。这能让你的代码更快哦,因为这些选择器引擎本身就能被浏览器解析,而不是用这些库选择器。 
感谢阅读,希望你能学到一两个技巧。

#container { width: 960px; margin: auto;}

9. X ~ Y

ul ~ p {
  color: red;
}

兄弟节点组合选择器跟`X+Y`很相似,然后它又不是那么的严格。`ul + p`选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器,会选择跟在目标元素后面的所有匹配的元素。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

6. X:visited and X:link

a:link { color: red; }  
a:visited { color: purple; } 

我们使用:link 伪类选择符选择所有已经被点击过的锚标签。

此外,我们也有:visited伪类选择符,正如你期望的,允许我们仅给页面上被点击过的或被访问过的锚标签应用样式。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera
a { color: red; }ul { margin-left: 0; }

6. X:visited 和 X:link

a:link {color:red;}
a:visited {color: purple;}

我们使用`:link`这个伪类来定位所有还没有被访问过的链接。
另外,我们也使用`:visited`来定位所有已经被访问过的链接。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

21. X::pseudoElement

p::first-line {  
   font-weight: bold;  
   font-size: 1.2em;  
}

我们可以使用伪元素(以::为表示)来定义元素的样式。例如第一行,第一个字符,记住啦,这种方法只能应用于同级元素才有效。

伪元素由两个冒号组成:::

指定p的第一个字符的样式

p::first-letter {  
   float: left;  
   font-size: 2em;  
   font-weight: bold;  
   font-family: cursive;  
   padding-right: 2px;  
}

这段代码会找到所有段落,然后再从中定义这些段落的第一个字符。 
这常常使用在仿报纸的文章首字母样式。 
指定p的首行样式 

p::first-line {  
   font-weight: bold;  
   font-size: 1.2em;  
} 

同样,这个::first-line伪元素会像我们期望的那样,只定义段落的第一行的样式。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera
a[title] { color: green;}

ID选择器和类选择器在速度上的差异基本上没有关系。

 13. X[href^="http"]

a[href^="http"] {  
   background: url(path/to/external/icon.png) no-repeat;  
   padding-left: 10px;  
}   

有没有想过某些网站是如何定义一个图标的链接的?我确定你肯定看到过。这些链接很容易让你跳转到另一个网站。 
使用^(carat)符灰常简单啦。这个符号常常在正则表达式中表示字符串的开始。如果我们想指向所有以"http"开头的"href"属性的锚点的话,我们就可以使用类似于上面的那段代码啦。 

注意啦,我们不需要搜索"

如果我们想为所有链接到图片的链接定义样式咋办?这种情况下,我们得搜索字符串的结束了不是。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的`ul`标签?使用`ul li`会选中所有`li`标签。这时候就要使用`only-of-type`了。

19. X:hover

div:hover {
  background: #e3e3e3;
}

不用说,大家肯定知道它。官方的说法是`user action pseudo class`.听起来有点儿迷糊,其实还好。如果想在用户鼠标飘过的地方涂点儿彩,那这个伪类写法可以办到。

注意旧版本的IE只会对加在锚点`a`标签上的`:hover`伪类起作用。

通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。

a:hover {
 border-bottom: 1px solid black;
}

专家提示:border-bottom:1px solid black;比text-decoration:underline;要好看很多。

兼容性

  • IE6+(IE6只能在锚点标签上起作用)

  • Firefox

  • Chrome

  • Safari

  • Opera

 10. X[title]

a[title] {  
   color: green;  
} 

被称为属性选择器,在我们上面的例子里,这只会选择有title属性的锚标签。没有此属性的锚标签将不受影像。但如果你需要更多的特性怎么办呢?呵呵……

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera
a href="path/to/image.jpg" data-info="external image" Click Me, Fool /a

4. X Y

li a {
  text-decoration: none;
}

下一个常用的就是`descendant`选择器。如果你想更加具体的去定位元素,你可以使用它。例如,假如,你不需要定位所有的`a`元素,而只需要定位`li`标签下的`a`标签?这时候你就需要使用`descendant`选择器了。

专家提示:如果你的选择器像`X Y Z A B.error`这样,那你就错了。时刻都提醒自己,是否真的需要对那么多元素修饰。

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

30. X:first-of-type

first-of-type 伪类可以让你选择该类型的第一个兄弟节点。 
一个测试 
为了更好地理解它,让我们来测试一下啊。拷贝下面的标记到你的编辑器。

<div>  
   <p> My paragraph here. </p>  
   <ul>  
      <li> List Item 1 </li>  
      <li> List Item 2 </li>  
   </ul>  

   <ul>  
      <li> List Item 3 </li>  
      <li> List Item 4 </li>  
   </ul>     
</div>  

现在,别急着往下读,试试看如何能只选择'LIST ITEM 2'?如果你搞定了(或者放弃了),继续读。 

解决办法1

有很多办法能搞定这个测试。我们回顾其中一小部分。以使用first-of-type开始。

ul:first-of-type > li:nth-child(2) {  
   font-weight: bold;  
} 

这个代码段本质上表示,“找到第一个无序列表,然后找到这里面的li,然后,继续使用过滤器直到找到第二个li。 

解决办法2

另一个可行的办法是毗邻选择器。 

p + ul li:last-child {  
   font-weight: bold;  
} 

在这个方案中,我们找到p的临近节点ul,然后找到ul的li的最后一个孩子。 

解决办法3

我们可以随心所欲滴选择这些选择器。

ul:first-of-type li:nth-last-child(1) {  
   font-weight: bold;     
}

这次,我们取到第一个ul,然后找到第一个元素,不过是从最后一个开始数。哈哈。 

查看例子

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

`#container ul`只会选中`id`为’container’的`div`下的所有直接`ul`元素。它不会定位到如第一个`li`下的`ul`元素。由于某些原因,使用子节点组合选择器会在性能上有许多的优势。事实上,当在javascript中使用`css`选择器时候是强烈建议这么做的。DEMO兼容性IE7+FirefoxChromeSafariOpera9. X ~ Y

18. X:after

`before`和`after`这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。
当使用`.clear-fix`技巧时许多属性都是第一次被使用到里面的。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }

.clearfix { 
   *display: inline-block; 
   _height: 1%;
}

上面这段代码会在目标标签后面补上一段空白,然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当`overflow:hidden`方法不顶用的时候,这招就特别管用了。

根据CSS3标准规定,可以使用两个冒号`::`。然后为了兼容性,浏览器也会接受一个双引号的写法。其实在这个情况下,用一个冒号还是比较明智的。

兼容性

  • IE8+

  • Firefox

  • Chrome

  • Safari

  • Opera

11. X[href="foo"]

a[href="http://net.tutsplus.com"] {  
  color: #1f6053; /* nettuts green */  
} 

上面的代码段将给所有href属性为

注意我们将href值用引号包裹。记住,当使用javascript的css选择符引擎时也这么做。如果可能的话,尽可能使用css3选择符代替非官方的方法。

这工作的很好,但有点不够灵活。如果链接确实直接连接到Nettus+还好,但是,也许路径是到nettust的相对路径呢?在这种情况下,我们可以使用一点正则表达式语法。

查看例子

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

找到第一个`ul`标签,然后找到直接子标签`li`,然后找到第二个子节点。解决办法2另一个解决办法就是邻近选择器。这种情况下,找到`p`下的直接`ul`标签,然后找到它的最后一个直接子标签。解决办法3我们可以随便玩耍这些选择器。来看看:

24. X:nth-of-type(n)

ul:nth-of-type(3) {
   border: 1px solid black;
}

曾几何时,我们不想去选择子节点,而是想根据元素的类型来进行选择。

想象一下有5个`ul`标签。如果你只想对其中的第三个进行修饰,而且你也不想使用`id`属性,那你就可以使用`nth-of-type(n)`伪类来实现了,上面的那个代码,只有第三个`ul`标签会被设置边框。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

20. X:not(selector)

div:not(#container) {  
   color: blue;  
}

not伪类灰常有用。例如我要选择所有的div,除了有id为container的。上面那个代码片段就能完美的实现。 
如果我想选择除了p以外的所有元素,我可以这么做:

*:not(p) {  
  color: green;  
} 

 查看例子

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

ul  li:only-of-type { font-weight: bold;}

13. X[href^="href"]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

大家肯定好奇过,有些站点的锚点标签旁边会有一个外链图标,我也相信大家肯定见过这种情况。这样的设计会很明确的告诉你会跳转到别的网站。
用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头。如果我们想定位锚点属性`href`中以`http`开头的标签,那我们就可以用与上面相似的代码。

注意我们没有搜索

那如果我们想找到所有指向一张图片的锚点标签呢?那我们来使用下`&`字符。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

22. X:nth-child(n)

li:nth-child(3) {  
   color: red;  
} 

想想那些没法从元素堆中选择元素的日子。nth-child伪类解决了这个问题。 
请注意 nth-child接收整数和变量,不过不是从0开始的,如果你想选定第二个li,使用 li:nth-child(2). 
我们甚至使用这个办法来选择任意的子元素。例如,我们可以用 li:nth-child(4n)来完成4为倍数的所有元素的选择。

查看例子

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

我们可以使用`::`来选中某标签的部分内容,如地一段,或者是第一个字没有。但是记得必须使用在块式标签上才起作用。伪标签是由两个冒号 :: 组成的。定位第一个字

 

4. X Y

li a {  
  text-decoration: none;  
}

 下一个最常用的选择符是后代选择符。当你需要给你的选择符增加特殊性的时候你可以使用。例如,如果你只想匹配无序列表下的锚元素?此时后代选择符派上用场。

小贴士——如果你的选择符看起来像这样 X Y Z A B.error,那你就错了。时刻问自己使用这高的权重是否有必要。

查看例子

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

曾几何时,我们不想去选择子节点,而是想根据元素的类型来进行选择。想象一下有5个`ul`标签。如果你只想对其中的第三个进行修饰,而且你也不想使用`id`属性,那你就可以使用`nth-of-type(n)`伪类来实现了,上面的那个代码,只有第三个`ul`标签会被设置边框。DEMO兼容性IE9+Firefox3.5+ChromeSafari25. X:nth-last-of-type(n)

3. .X

.error {
  color: red;
}

这是个`class`选择器。它跟`id`选择器不同的是,它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用`class`。当你要对某个特定的元素进行修饰那就是用`id`来定位它。

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

大家肯定好奇过,有些站点的锚点标签旁边会有一个外链图标,我也相信大家肯定见过这种情况。这样的设计会很明确的告诉你会跳转到别的网站。用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头。如果我们想定位锚点属性`href`中以`http`开头的标签,那我们就可以用与上面相似的代码。注意我们没有搜索,那是没必要的,因为它都不包含。那如果我们想找到所有指向一张图片的锚点标签呢?那我们来使用下``字符。DEMO兼容性IE7+FirefoxChromeSafariOpera14. X[href$=".jpg"]

28. X:only-child

div p:only-child {
   color: red;
}

说实话,你会发现你几乎都不会用到这个伪类。然而,它是可用的,有会需要它的。

它允许你获取到那些只有一个子标签的父标签。就像上面那段代码,只有一个段落标签的`div`才被着色。

<div><p> My paragraph here. </p></div>

<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>

上面例子中,第二个`div`不会被选中。一旦第一个`div`有了多个子段落,那这个就不再起作用了。

 

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

还记得我们面对如何取到推跌式标签的第几个元素是无处下手的时光么,有了`nth-child`那日子就一去不复返了。请注意`nth-child`接受一个整形参数,然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是`li:nth-child(2)`.我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用`li:nth-child(4n)`去每隔3个元素获取一次标签。DEMO兼容性IE9+Firefox3.5+ChromeSafari23. X:nth-last-child(n)

5. X

a { color: red; }
ul { margin-left: 0; }

如果你想定位页面上所有的某标签,不是通过`id`或者是’class’,这简单,直接使用类型选择器。

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

a[data-filetype="image"] { color: red;}

23. X:nth-last-child(n)

li:nth-last-child(2) {
   color: red;
}

假设你在一个`ul`标签中有N多的元素,而你只想获取最后三个元素,甚至是这样`li:nth-child(397)`,你可以用`nth-last-child`伪类去代替它。

这个技巧可以很正确的代替第16个TIP,不同的就是它是从结尾处开始的,倒回去的。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

  • Opera

说实话,你会发现你几乎都不会用到这个伪类。然而,它是可用的,有会需要它的。它允许你获取到那些只有一个子标签的父标签。就像上面那段代码,只有一个段落标签的`div`才被着色。

14. X[href$=".jpg"]

a[href$=".jpg"] {
  color: red;
}

这次我们又使用了正则表达式`$`,表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接,或者其它链接是以`.jpg`结尾的。但是记住这种写法是不会对`gifs`和`pngs`起作用的。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

a[href$=".jpg"] { color: red;}

27. X:last-child

ul > li:last-child {
   color: green;
}

跟`first-child`相反,`last-child`取的是父标签的最后一个标签。

例如
标签

<ul>
   <li> List Item </li>
   <li> List Item </li>
   <li> List Item </li>
</ul>

这里没啥内容,就是一个了 List。

ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}

li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

上面的代码将设置背景色,移除浏览器默认的内边距,为每个`li`设置边框以凸显一定的深度。

金沙棋牌官方平台 9

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

li a { text-decoration: none;}

16. X[foo~="bar"]

a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

这个我想会让你的小伙伴惊呼妙极了。很少有人知道这个技巧。这个`~`符号可以定位那些某属性值是空格分隔多值的标签。
继续使用第15条那个例子,我们可以设置一个`data-info`属性,它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

给这些元素设置了这个标志之后,我们就可以使用`~`来定位这些标签了。

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

## 17. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

上面这个伪类写法可以定位那些被选中的单选框和多选框,就是这么简单。

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

兄弟节点组合选择器跟`X+Y`很相似,然后它又不是那么的严格。`ul + p`选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器,会选择跟在目标元素后面的所有匹配的元素。DEMO兼容性IE7+FirefoxChromeSafariOpera10. X[title]

对大多技术人员来说都比较熟悉CSS选择器,举一例子来说,假设给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用。通过Firebug查看,发现没有起作用的属性被覆盖了,这个时候突然意识到了CSS选择器的优先级问题。严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=""的方式,应该是CSS的一种引入方式,而不是选择器,因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起,所以就有了5种或6种选择器了。

ul  li:last-child { color: green;}

29. X:only-of-type

li:only-of-type {
   font-weight: bold;
}

结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的`ul`标签?

使用`ul li`会选中所有`li`标签。这时候就要使用`only-of-type`了。

ul > li:only-of-type {
   font-weight: bold;
}

 

兼容性

  • IE9+

  • Firefox 3.5+

  • Chrome

  • Safari

  • Opera

 

30. X:first-of-type `first-of-type`

伪类可以选择指定标签的第一个兄弟标签。

测试

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>

   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>   
</div>

来你把List Item 2取出来,如果你已经取出来或者是放弃了,来继续。

解决办法1
办法很多,我们看一些比较方便的。首先是`first-of-type`。

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

找到第一个`ul`标签,然后找到直接子标签`li`,然后找到第二个子节点。
解决办法2
另一个解决办法就是邻近选择器。

p + ul li:last-child {
   font-weight: bold;
}

这种情况下,找到`p`下的直接`ul`标签,然后找到它的最后一个直接子标签。

解决办法3
我们可以随便玩耍这些选择器。来看看:

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;   
}

先获取到页面上第一个`ul`标签,然后找到最后一个子标签。

兼容性

  • IE9+

  • Firefox 3.5+

  • Chrome

  • Safari

  • Opera

li:nth-last-child(2) { color: red;}

 

/* Target data-info attr that contains the value "external" */a[data-info~="external"] { color: red;} /* And which contain the value "image" */a[data-info~="image"] { border: 1px solid black;}

15. X[data-*="foo"]

a[data-filetype="image"] {
   color: red;
}

在回到第8条,我们如何把所有的图片类型都选中呢`png`,`jpeg`,’jpg’,'gif’?我们可以使用多选择器。看下面:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

但是这样写着很蛋疼啊,而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性`data-filetype`指定这个链接指向的图片类型。
[html]
Image Link </a[/html]
那有了这个钩子,我们就可以去用标准的办法只去选定文件类型为`image`的锚点了。

a[data-filetype="image"] {
   color: red;
}

 

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

ul + p { color: red;}

1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.相邻选择器(h1+p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器(*)
8.属性选择器(a[rel="external"])

上面例子中,第二个`div`不会被选中。一旦第一个`div`有了多个子段落,那这个就不再起作用了。DEMO兼容性IE9+FirefoxChromeSafariOpera29. X:only-of-type

20. X:not(selector)

div:not(#container) {
   color: blue;
}

`取反`伪类是相当有用的,假设我们要把除`id`为`container`之外的所有`div`标签都选中。那上面那么代码就可以做到。

或者说我想选中所有出段落标签之外的所有标签。

*:not(p) {
  color: green;
}

 

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}
a[href*="strongme"] { color: #1f6053;}
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%;}
* { margin: 0; padding: 0;}

这个结构性的伪类可以选择到第一个子标签,你会经常使用它来取出第一个和最后一个的边框。假设有个列表,没个标签都有上下边框,那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。DEMO兼容性IE7+FirefoxChromeSafariOpera27. X:last-child

上面这段代码会在目标标签后面补上一段空白,然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当`overflow:hidden`方法不顶用的时候,这招就特别管用了。还想看其他创造性的使用这个伪类,看[这里]()。根据CSS3标准规定,可以使用两个冒号`::`。然后为了兼容性,浏览器也会接受一个双引号的写法。其实在这个情况下,用一个冒号还是比较明智的。兼容性IE8+FirefoxChromeSafariOpera19. X::hover

大概大家读知道`id`,`class`以及`descendant`选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式。这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面。1. *

a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}
ul ~ p { color: red;}
divp My paragraph here. /p/div div p Two paragraphs total. /p p Two paragraphs total. /p/div

假设你在一个`ul`标签中有N多的元素,而你只想获取最后三个元素,甚至是这样`li:nth-child(397)`,你可以用`nth-last-child`伪类去代替它。这个技巧可以很正确的代替第16个TIP,不同的就是它是从结尾处开始的,倒回去的。DEMO兼容性IE9+Firefox3.5+ChromeSafariOpera24. X:nth-of-type(n)

上面这段代码会找到页面上所有段落,并且指定为每一段的第一个字。它通常在一些新闻报刊内容的重点突出会使用到。定位某段的第一行

a:hover { border-bottom: 1px solid black;}

`X Y`和`X Y`的差别就是后面这个指挥选择它的直接子元素。看下面的例子:

这次我们又使用了正则表达式`$`,表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接,或者其它链接是以`.jpg`结尾的。但是记住这种写法是不会对`gifs`和`pngs`起作用的。DEMO兼容性IE7+FirefoxChromeSafariOpera15. X[data-*="foo"]

先获取到页面上第一个`ul`标签,然后找到最后一个子标签。DEMO兼容性IE9+Firefox 3.5+ChromeSafariOpera结论如果你想向旧版本浏览器妥协,比如IE6,那你用这些新的选择器的时候还是得小心点。但别别让IE6组织你去学这些新的技能。那你就对自己太残忍了。记得多查查[兼容性列表](),或者使用[Dean Edward's excellent IE9.js script ]()来让你的浏览器具有这些特性。第二个,使用向jQuery的时候,尽量使用原生的CSS3选择器。可能 活让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器,而不是选择器自己的。

这是个`class`选择器。它跟`id`选择器不同的是,它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用`class`。当你要对某个特定的元素进行修饰那就是用`id`来定位它。DEMO兼容性IE6+FirefoxChromeSafariOpera4. X Y

div  ul li List Item ul li Child /li /ul /li li List Item /li li List Item /li li List Item /li /ul/div

上面这片代码将会把`href`属性值为``的锚点标签设置为绿色,而其他标签则不受影响。注意我们将值用双引号括起来了。那么在使用Javascript的时候也要使用双引号括起来。可以的话,尽量使用标准的CSS3选择器。这样可以用了,但是还是有点死,如果不是这个链接,而是类似的链接,那么这时就得用正则表达式了。DEMO兼容性IE7+FirefoxChromeSafariOpera12. X[href*="strongme"]

a[href=""] { color: #1f6053; /* nettuts green */}

17. X:checked

input[type=radio]:checked { border: 1px solid black;}

DEMO兼容性IE7+FirefoxChromeSafariOpera16. X[foo~="bar"]

DEMO兼容性IE9+Firefox 3.5+ChromeSafariOpera30. X:first-of-type `first-of-type`伪类可以选择指定标签的第一个兄弟标签。测试

上面这个伪类写法可以定位那些被选中的单选框和多选框,就是这么简单。DEMO兼容性IE9+FirefoxChromeSafariOpera18. X:after`before`和`after`这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。当使用`.clear-fix`技巧时许多属性都是第一次被使用到里面的。

我们使用`:link`这个伪类来定位所有还没有被访问过的链接。另外,我们也使用`:visited`来定位所有已经被访问过的链接。DEMO兼容性IE7+FirefoxChromeSafariOpera7. X+Y

在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空`margin`和`padding`。当然你在练习的时候使用这个没问题,但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。`*`也可以用来选择某元素的所有子元素。

ul li:first-child { border-top: none;}

不用说,大家肯定知道它。官方的说法是`user action pseudo class`.听起来有点儿迷糊,其实还好。如果想在用户鼠标飘过的地方涂点儿彩,那这个伪类写法可以办到。注意旧版本的IE只会对加在锚点`a`标签上的`:hover`伪类起作用。通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。

li:only-of-type { font-weight: bold;}

在选择器中使用`#`可以用id来定位某个元素。大家通常都会这么使用,然后使用的时候大家还是得相当小心的。需要问自己一下:我是不是必须要给这个元素来赋值个id来定位它呢?`id`选择器是很严格的并且你没办法去复用它。如果可能的话,首先试试用标签名字,HTML5中的新元素,或者是伪类。DEMO兼容性IE6+FirefoxChromeSafariOpera3. .X

a[data-filetype="image"] { color: red;}
li:nth-child(3) { color: red;}

这个我想会让你的小伙伴惊呼妙极了。很少有人知道这个技巧。这个`~`符号可以定位那些某属性值是空格分隔多值的标签。继续使用第15条那个例子,我们可以设置一个`data-info`属性,它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。

ul:nth-last-of-type(3) { border: 1px solid black;}
div p My paragraph here. /p ul li List Item 1 /li li List Item 2 /li /ul ul li List Item 3 /li li List Item 4 /li /ul /div

但是这样写着很蛋疼啊,而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性`data-filetype`指定这个链接指向的图片类型。[html]Image Link /a[/html]那有了这个钩子,我们就可以去用标准的办法只去选定文件类型为`image`的锚点了。

div#container  ul { border: 1px solid black;}

来你把List Item 2取出来,如果你已经取出来或者是放弃了,来继续。解决办法1办法很多,我们看一些比较方便的。首先是`first-of-type`。

在回到第8条,我们如何把所有的图片类型都选中呢`png`,`jpeg`,’jpg’,'gif’?我们可以使用多选择器。看下面:

跟`::first-line`相似,会选中段落的第一行 。为了兼容性,之前旧版浏览器也会兼容单冒号的写法,例如`:first-line`,`:first-letter`,`:before`,`:after`.但是这个兼容对新介绍的特性不起作用。DEMO兼容性IE6+FirefoxChromeSafariOpera22. X:nth-child(n)

Tada,正是我们需要的,这样,就指定了`strongme`这个值必须出现在锚点标签的`href`属性中,不管是`strongme.cn`还是`strongme.com`还是``都可以被选中。但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是`strongme`相关的站点,如果要更加具体的限制的话,那就使用`^`和`$`,分别表示字符串的开始和结束。DEMO兼容性IE7+FirefoxChromeSafariOpera13. X[href^="href"]

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;} li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

如果你想定位页面上所有的某标签,不是通过`id`或者是’class’,这简单,直接使用类型选择器。DEMO兼容性IE6+FirefoxChromeSafariOpera6. X:visited 和 X:link

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:css选择器知识汇总,30个你必须记住的CSS选择符

关键词: