前段开发必记住 30 类 CSS 选择器

时间  2019-11-08
标签 前段 开发 记住 css 选择器 栏目 CSS 繁體版
原文   原文链接

1. *

CSSjavascript

1css

2html

3java

4css3

; html-script: false ]* {es6

  margin: 0;正则表达式

  padding: 0;浏览器

}工具

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

CSS

1

2

3

; html-script: false ]#container * {

  border: 1px solid black;

}

它会选中#container下的全部元素。固然，我仍是不建议你去使用它。

DEMO
兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

CSS

1

2

3

4

; html-script: false ]#container {

   width: 960px;

   margin: auto;

}

 

在选择器中使用#能够用id来定位某个元素。你们一般都会这么使用，使用的时候你们仍是得至关当心的。
须要问本身一下：我是否是必需要给这个元素来赋值个id来定位它呢？

id选择器是很严格的而且你没办法去复用它。若是能够的话，首先试试用标签名字，HTML5中的新元素，或者是伪类。
DEMO
兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

CSS

1

2

3

; html-script: false ].error {

  color: red;

}

 

这是个class选择器。它跟id选择器不一样的是，它能够定位多个元素。当你想对多个元素进行样式修饰的时候就可使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。
DEMO
兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

CSS

1

2

3

; html-script: false ]li a {

  text-decoration: none;

}

 

下一个经常使用的就是descendant选择器。若是你想更加具体的去定位元素，你可使用它。例如，假如，你不须要定位全部的a元素，而只须要定位li标签下的a标签？这时候你就须要使用descendant选择器了。

专家提示：若是你的选择器像X Y Z A B.error这样，那你就错了。时刻都提醒本身，是否真的须要对那么多元素修饰。
DEMO
兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5. X

CSS

1

2

; html-script: false ]a { color: red; }

ul { margin-left: 0; }

 

若是你想定位页面上全部的某标签，不是经过id或者是’class’，这简单，直接使用类型选择器。
DEMO
兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited 和 X:link

CSS

1

2

; html-script: false ]a:link {color:red;}

a:visited {color: purple;}

咱们使用:link这个伪类来定位全部尚未被访问过的连接。
另外，咱们也使用:visited来定位全部已经被访问过的连接。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X+Y

CSS

1

2

3

; html-script: false ]ul + p {

   color: red;

}

 

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

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X>Y

CSS

1

2

3

; html-script: false ]div#container > ul {

  border: 1px solid black;

}

 

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

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

; html-script: false ]<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 &gt; ul只会选中id为’container’的div下的全部直接ul元素。它不会定位到如第一个li下的ul元素。
因为某些缘由，使用子节点组合选择器会在性能上有许多的优点。事实上，当在javascript中使用css选择器时候是强烈建议这么作的。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

CSS

1

2

3

; html-script: false ]ul ~ p {

  color: red;

}

 

兄弟节点组合选择器跟X+Y很类似，而后它又不是那么的严格。ul + p选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的全部匹配的元素。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

CSS

1

2

3

; html-script: false ]a[title] {

  color: green;

}

 

这个叫属性选择器，上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。那再想一想若是你想更加具体的去筛选？那…
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href=”foo”]

CSS

1

2

3

; html-script: false ]a[href="http://strongme.cn"] {

  color: #1f6053; /* nettuts green */

}

 

上面这片代码将会把href属性值为http://strongme.cn的锚点标签设置为绿色，而其余标签则不受影响。

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

这样能够用了，可是仍是有点死，若是不是这个连接，而是相似的连接，那么这时就得用正则表达式了。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*=”strongme”]

CSS

1

2

3

; html-script: false ]a[href*="strongme"] {

  color: #1f6053;

}

 

Tada,正是咱们须要的，这样，就指定了strongme这个值必须出如今锚点标签的href属性中，不论是strongme.cn仍是strongme.com仍是www.strongme.cn均可以被选中。
可是记得这是个很宽泛的表达方式。若是锚点标签指向的不是strongme相关的站点，若是要更加具体的限制的话，那就使用^和$，分别表示字符串的开始和结束。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^=”href”]

CSS

1

2

3

4

; html-script: false ]a[href^="http"] {

   background: url(path/to/external/icon.png) no-repeat;

   padding-left: 10px;

}

 

你们确定好奇过，有些站点的锚点标签旁边会有一个外链图标，我也相信你们确定见过这种状况。这样的设计会很明确的告诉你会跳转到别的网站。
用克拉符号就能够轻易作到。它一般使用在正则表达式中标识开头。若是咱们想定位锚点属性href中以http开头的标签，那咱们就能够用与上面类似的代码。

注意咱们没有搜索http://，那是不必的，由于它都不包含https://。

那若是咱们想找到全部指向一张图片的锚点标签呢？那咱们来使用下&amp;字符。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

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

CSS

1

2

3

; html-script: false ]a[href$=".jpg"] {

  color: red;

}

 

此次咱们又使用了正则表达式$，表示字符串的结尾处。这段代码的意思就是去搜索全部的图片连接，或者其它连接是以.jpg结尾的。可是记住这种写法是不会对gifs和pngs起做用的。
DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

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

CSS

1

2

3

; html-script: false ]a[data-filetype="image"] {

   color: red;

}

 

在回到第8条，咱们如何把全部的图片类型都选中呢png,jpeg,’jpg’,’gif’？咱们可使用多选择器。看下面：

CSS

1

2

3

4

5

6

; html-script: false ]a[href$=".jpg"],

a[href$=".jpeg"],

a[href$=".png"],

a[href$=".gif"] {

   color: red;

}

 

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

CSS

1

2

3

; html-script: false ]a[data-filetype="image"] {

   color: red;

}

 

DEMO
兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X[foo~=”bar”]

CSS

1

2

3

4

5

6

7

; html-script: false ]a[data-info~="external"] {

   color: red;

}

 

a[data-info~="image"] {

   border: 1px solid black;

}

 

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

 

XHTML

 

1

; html-script: false ]<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

 

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

CSS

1

2

3

4

5

6

7

8

9

; html-script: false ]/* 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

CSS

1

2

3

; html-script: false ]input[type=radio]:checked {

   border: 1px solid black;

}

 

上面这个伪类写法能够定位那些被选中的单选框和多选框，就是这么简单。
DEMO
兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

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

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

; html-script: false ].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

19. X::hover

CSS

1

2

3

; html-script: false ]div:hover {

  background: #e3e3e3;

}

 

不用说，你们确定知道它。官方的说法是user action pseudo class.听起来有点儿迷糊，其实还好。若是想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法能够办到。

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

一般你们在鼠标飘过锚点连接时候加下边框的时候用到它。

CSS

1

2

3

; html-script: false ]a:hover {

border-bottom: 1px solid black;

}

 

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

兼容性

  • IE6+(IE6只能在锚点标签上起做用)
  • Firefox
  • Chrome
  • Safari
  • Opera

20. X:not(selector)

CSS

1

2

3

; html-script: false ]div:not(#container) {

   color: blue;

}

 

取反伪类是至关有用的，假设咱们要把除id为container以外的全部div标签都选中。那上面那么代码就能够作到。

或者说我想选中全部出段落标签以外的全部标签。

CSS

1

2

3

; html-script: false ]*:not(p) {

  color: green;

}

 

DEMO
兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21. X::pseudoElement

CSS

1

2

3

4

; html-script: false ]p::first-line {

  font-weight: bold;

  font-size:1.2em;

}

 

咱们可使用::来选中某标签的部份内容，如第一段，或者是第一个字。可是记得必须使用在块式标签上才起做用。

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

定位第一个字

CSS

1

2

3

4

5

6

7

; html-script: false ]p::first-letter {

   float: left;

   font-size: 2em;

   font-weight: bold;

   font-family: cursive;

   padding-right: 2px;

}

 

上面这段代码会找到页面上全部段落，而且指定为每一段的第一个字。

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

定位某段的第一行

CSS

1

2

3

4

; html-script: false ]p::first-line {

   font-weight: bold;

   font-size: 1.2em;

}

 

跟::first-line类似，会选中段落的第一行 。

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

DEMO
兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22. X:nth-child(n)

CSS

1

2

3

; html-script: false ]li:nth-child(3) {

   color: red;

}

 

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

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

咱们甚至能够获取到由变量名定义的个数个子标签。例如咱们能够用li:nth-child(4n)去每隔3个元素获取一次标签。
DEMO
兼容性

  • IE9+
  • Firefox3.5+
  • Chrome
  • Safari

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

CSS

1

2

3

; html-script: false ]li:nth-last-child(2) {

   color: red;

}

 

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

这个技巧能够很正确的代替第16个TIP，不一样的就是它是从结尾处开始的，倒回去的。
DEMO
兼容性

  • IE9+
  • Firefox3.5+
  • Chrome
  • Safari
  • Opera

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

CSS

1

2

3

; html-script: false ]ul:nth-of-type(3) {

   border: 1px solid black;

}

 

曾几什么时候，咱们不想去选择子节点，而是想根据元素的类型来进行选择。

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

  • IE9+
  • Firefox3.5+
  • Chrome
  • Safari

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

CSS

1

2

3

; html-script: false ]ul:nth-last-of-type(3) {

   border: 1px solid black;

}

 

一样，也能够相似的使用nth-last-of-type来倒序的获取标签。

兼容性

  • IE9+
  • Firefox3.5+
  • Chrome
  • Safari
  • Opera

26. X:first-child

CSS

1

2

3

; html-script: false ]ul li:first-child {

   border-top: none;

}

 

这个结构性的伪类能够选择到第一个子标签，你会常用它来取出第一个和最后一个的边框。

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

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

CSS

1

2

3

; html-script: false ]ul > li:last-child {

   color: green;

}

 

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

例如
标签

XHTML

1

2

3

4

5

<ul>

   <li> List Item </li>

   <li> List Item </li>

   <li> List Item </li>

</ul>

 

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

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

; html-script: false ]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设置边框以凸显必定的深度。

DEMO

兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

28. X:only-child

CSS

1

2

3

; html-script: false ]div p:only-child {

   color: red;

}

 

说实话，你会发现你几乎都不会用到这个伪类。然而，它是至关有用的，说不许哪天你就会用到它。

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

XHTML

1

2

3

4

5

6

; html-script: false ]<div><p> My paragraph here. </p></div>

 

<div>

   <p> Two paragraphs total. </p>

   <p> Two paragraphs total. </p>

</div>

 

上面例子中，第二个div不会被选中。一旦第一个div有了多个子段落，那这个就再也不起做用了。
DEMO
兼容性

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

CSS

1

2

3

; html-script: false ]li:only-of-type {

   font-weight: bold;

}

 

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

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

CSS

1

2

3

; html-script: false ]ul > li:only-of-type {

   font-weight: bold;

}

 

DEMO
兼容性

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera
  1. X:first-of-type first-of-type伪类能够选择指定标签的第一个兄弟标签。

测试

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

; html-script: false ]<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。

CSS

1

2

3

; html-script: false ]ul:first-of-type > li:nth-child(2) {

   font-weight: bold;

}

 

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

CSS

1

2

3

; html-script: false ]p + ul li:last-child {

   font-weight: bold;

}

 

这种状况下，找到p下的直接ul标签，而后找到它的最后一个直接子标签。

解决办法3
咱们能够随便玩耍这些选择器。来看看：

CSS

1

2

3

; html-script: false ]ul:first-of-type li:nth-last-child(1) {

   font-weight: bold;  

}

 

先获取到页面上第一个ul标签，而后找到最后一个子标签。
DEMO
兼容性

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

结论

若是你想向旧版本浏览器妥协，好比IE6，那你用这些新的选择器的时候仍是得当心点。但别让IE6阻止你去学这些新的技能。那你就对本身太残忍了。记得多查查兼容性列表，或者使用Dean Edward’s excellent IE9.js script 来让你的浏览器具备这些特性。

第二个，使用像jQuery等工具的时候，尽可能使用原生的CSS3选择器。可能会让你的代码跑的很快。这样选择器引擎就可使用浏览器原生解析器，而不是选择器本身的。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程