博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
应该记住的30个CSS选择器
阅读量：5075 次
发布时间：2019-06-12

本文共 8266 字，大约阅读时间需要 27 分钟。

了解基本的id选择器，类选择器和子选择器，如果就此收手，那你会错失很多灵活方法。虽然本文提及的部分选择器属于CSS3范围内，只在一些时新的浏览器有效，不过还是有必要记得这些选择器。

1. *

* { margin: 0; padding: 0;}

在提到更先进的选择器之前，为初学者之便，先把常见的选择器解决掉。

星号符会选择页面每个元素。很多开发者用它把所有margin和padding归零。这当然是快捷测试方法。不过我建议你不使用它，它给浏览器带来太多的负担，这不必要。
通配选择器也可以用到子选择器上。

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

它会选择#container层中的子元素。不过，也不需要经常用这个技巧。

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

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

把哈希符号前缀于选择器就成了ID选择器。这是很普通的方法。不过使用之也需要谨慎。先问自己：为了定位元素就绝对需要赋予id？僵硬刻板的id选 择器不能重复使用。如果可能，先试使用标签方法，如html5元素，或者伪类。（不过id选择器的渲染速度是最快的，有得有失，译者注）。

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

.error {  color: red;}

这是类选择器。ID选择器与类选择器的差别是，后者可以用于多个元素。使用类选择器可以把同样的样式赋予一群元素，相反，id选择器只能作用于特定的单一元素。

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

li a {  text-decoration: none;}

后代选择器是使用很多的选择器。它作用处于X元素内的所有的y元素。不过如果你的选择器像X Y Z A B.error，那你的方法就错了。这开销太大了。（后代选择器的渲染速率不快，特别是在有很长的前缀元素时，译者注）

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

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

类型选择器会选择页面中同一类型的标签。比如说ul{…}会选择页面中所有的ul。

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited and X:link

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

:link作用于没有访问过的链接，:visited作用于访问过的链接。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X + Y

ul + p {   color: red;}

相信选择器只作用于同一父级元素下的第一个元素。例子中的只有紧邻ul中的第一个p的字体会是红色的。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X > Y

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

X Y和X>Y不同的地方后者只选择X的第一级子元素。例如下面

    
      
     
             
          
  •  List Item           
           
                    
              
    •  Child 
      •            
             
             
    •          
          
  •  List Item 
    •          
          
  •  List Item 
    •          
          
  •  List Item 
    •

选择器#container>ul只选择直接位于#container层下的ul,不会作用于li中的ul。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

ul ~ p {   color: red;}

这个相邻选择器与X+Y相似，不同的是，ul+p只选择与ul相邻的第一个p,而x~Y选择所有与ul相邻的P。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

a[title] {   color: green;}

一种属性选择器。上例中，只选择带有title属性的链接标签。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href="foo"]

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

T上例中样式只会作用于链接到http://net.tutsplus.com的a标签。其他没有链到这个网址的a标签不会变成绿色。

这个很有用，不过有点死板，也许我想把所有的nettuts.com链接都变成绿色。在这种情况下，可以使用一些表达式。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*="nettuts"]

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

对了，就是这个。href后面加上星号(通配符)使网址出现nettuts的所有链接都变成绿色。比如说nettuts.com,tutsplus.com。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^="http"]

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

有些网站用这个方法在某些链接上加一些图标说明这些链接到其他网站。它经常用于表达式中显示字符串的开始。如果我们想选择那样带有http的a标签链接，我们可以使用类似上面的CSS。(这不是搜索http://,这不必要，对https://没起作用)。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

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

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

又一次，我们使用了一个表达式的符号，$,查找字符串的尾部。这个例子中，我们查找所有链接到图片的链接，或许说以.jpg结尾的链接。这当然不对gif和png格式的起作用。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

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

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

回到第8个（？感觉第8个和这个有点风马牛不相及）；我们怎么补偿不同图片格式：png,jpeg,jpg,gif? 我们可以使用多重选择器，比如：

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

回到第8个（？感觉第8个和这个有点风马牛不相及）；我们怎么补偿不同图片格式：png,jpeg,jpg,gif? 我们可以使用多重选择器，比如：

 Image Link

在适当的地方加上钩后，我们就可以使用一个标准的属性选择器选择这些标签。

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

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X[foo~="bar"]

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

这是一个让人印象深刻的选择器。了解这个技巧的人不多。~符号允许我们选择带有有空白间隔属性的标签。

就像第15个选择器一样，这里，我们可以使用能用间隔符列出需要瓢东东的data-info属性。举例来说，我们给外链些记号吧。

" Click Me, Fool

在适当地方使用标记，然后就可以选择任何带有这些属性的标签。

/* 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

17. X:checked

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

这个伪类选择器只会作用于被选中的用户界面元素(user interface element)，比如说单选按钮，或者复选框。

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

这个伪类和:before一样，主要是用来清除浮动的。不过现在人们都能在它们身上找到新的用法。

 

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

兼容性

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19. X:hover

div:hover {  background: #e3e3e3;}

这是一个动态伪类。当元素有鼠标移在其上面时样式就会起作用。一般用于链接。比如a:hover{border-bottom:1px solid black;}(border-bottom:1px solid black;效果比text-decoration:underline;好)。

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

兼容性

  • IE6+ (In IE6, :hover must be applied to an anchor element)
  • Firefox
  • Chrome
  • Safari
  • Opera

20. X:not(selector)

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

这个否定伪类非常有用。比如要选择除#container层外的所有层。上面的代码就非常有效。

又比如我要选择除了段落标签外的所有元素(不建议这样做)，可以这样做：

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

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

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;}

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22. X:nth-child(n)

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

过去我们无法从一堆元素中选择具体的几个。nth-child伪类可以解决这种问题。

nth-child接受整数参数，不过它不是基于零开始，如果你要选择列表中的第二个，就使用li:nth-child(2)。
我们还可以使用这个伪类选择几个子类。比如，用li:nth-child(4n)来选择4倍数的列表。

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

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

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

如果列表项非常多，但只是需要选择倒数第三个。使用li:nth-child(397)不如使用nth-last-child方便。

和上面的用法不一样，nth-last-child是从后面倒着数。

兼容性

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

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

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

选择子类也许不如根据类型选择元素更方便。比如说现在有5个无序列表，但只需选择第三个，这时可以使用ul:nth-of-type(3)。

兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

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

26. X:first-child

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

这个结构性伪类选择父级元素的第一个子对象。这个经常用于移除列表的第一个和最后一个元素的边框。

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

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

这个伪类选择父级元素的最后一个对象。

例子

用一个简单的例子来说明这样选择器，首先，我们制作一个列表。

标签
    
         
         
  •  List Item 
    •      
         
  •  List Item 
    •      
         
  •  List Item 
    •

很简单的列表

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;}

设置好背景，去掉ul默认的内边距，再给每个li加上边。

<img title="extraBorders" src="http://images.shejidaren.com/wp-content/uploads/auto_save_image/2011/08/103303Jnb.png" alt="" width="634" height="411" />

就像图片中显示的一样，我们需要去掉第一个和最后一个的边。这时就可以使用:first-child和:last-child。

li:first-child {    border-top: none;}li:last-child {   border-bottom: none;}
<img title="fixed" src="http://images.shejidaren.com/wp-content/uploads/auto_save_image/2011/08/10330391Y.png" alt="" width="618" height="387" />

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

Yep – IE8 supported :first-child, but not :last-child. Go figure.

28. X:only-child

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

确实，这个你可能很少用。不过这个真的很有用。

在下面的例子，只有第一层中的p标签会变色。父级元素下的子类多于一个时这个伪类效果就停止了。

    
     
 My paragraph here. 
    
    
   
     
 Two paragraphs total. 
   
     
 Two paragraphs total.

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

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

和28个结构性伪类相似，这个伪类只会在父级元素下只有一个子级元素X的情况下起作用。这种情况，你也可以使用ul li，不过这样就会选择所有列表项了。

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

兼容性

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

30. X:first-of-type

first-of-type允许我们选择同级元素的第一个。

一个测试

为便于理解，做个测试。复制下面的标签

    
   
     
 My paragraph here. 
   
     
          
          
  •  List Item 1 
    •       
          
  •  List Item 2 
    •    
         
   
     
          
          
  •  List Item 3 
    •       
          
  •  List Item 4 
    •

现在，尝试去选择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标签，然后再找倒数第一个li(也就是第二个li)。

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

兼容性

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

译：focusec.cn

源文：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

 

 

 

转载于:https://www.cnblogs.com/kojya/p/4093415.html

你可能感兴趣的文章
重启rabbitmq服务
查看>>
正则表达式（进阶篇）
查看>>
无人值守安装linux系统
查看>>
【传道】中国首部淘宝卖家演讲公开课：农业本该如此
查看>>
jQuery应用 代码片段
查看>>
MVC+Servlet+mysql+jsp读取数据库信息
查看>>
黑马程序员——2 注释
查看>>
用OGRE1.74搭建游戏框架（三）--加入人物控制和场景
查看>>
转化课-计算机基础及上网过程
查看>>
android dialog使用自定义布局 设置窗体大小位置
查看>>
ionic2+ 基础
查看>>
互联网模式下我们更加应该“专注”
查看>>
myeclipse集成jdk、tomcat8、maven、svn
查看>>
查询消除重复行
查看>>
Sand Making Plant Produced by Red Star
查看>>
Win 10 文件浏览器无法打开
查看>>
HDU 1212 Big Number(C++ 大数取模)(java 大数类运用)
查看>>
-bash: xx: command not found 在有yum源情况下处理
查看>>
[leetcode]Minimum Path Sum
查看>>
内存管理 浅析 内存管理/内存优化技巧
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-11-16 00:24:37   当前IP: 3.145.84.208   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我