前端页面设计常见的30个CSS选择器

时间  2019-11-21
标签 前端 页面 设计 常见的 css 选择器 栏目 CSS 繁體版
原文   原文链接

1. *   -->   通配符选择器

* {
 margin: 0;
 padding: 0;
}

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

 

  /*  选中容器中  全部子元素*/html

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

 

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X   -->   ID选择器

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

 不过id选择器具备惟一性的 并且渲染速度是最快的
css3

兼容性

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X   -->   类别选择器

.error {
  color: red;
}

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

兼容性

  • 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。
app

兼容性

  • 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的第一级子元素。例以下面网站

   <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只选择直接位于#container层下的ul,不会做用于li中的ul。
url

 

兼容性

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

 

兼容性

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[Href*="Nettuts"] -->   标签[属性通配符 = 属性值]选择器

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

 

兼容性

  • 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? 咱们可使用多重选择器，好比：

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

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

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属性。举例来讲，咱们给外链些记号吧。

"<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

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

 

此处为css3选择器

 

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

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

例子

用一个简单的例子来讲明这样选择器，首先，咱们制做一个列表。

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

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

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

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

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

 

兼容性

  • 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标签会变色。父级元素下的子类多于一个时这个伪类效果就中止了。

<div><p> My paragraph here. </p></div>
<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>

 

兼容性

  • 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容许咱们选择同级元素的第一个。

一个测试

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

<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标签，而后再找倒数第一个li(也就是第二个li)。

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

 

兼容性

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

 

 

 

 

关于  css样式查询修改   附赠网址

http://www.css88.com/book/css/ 

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