10个你必须要知道的CSS选择器

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。那么什么是选择器呢？每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。今天我们来说说一些前端设计师必须要知道的CSS选择器。

*

*  通用选择器用*来表示。选择可能是最容易的，但你还记得它往往未得到充分利用。它的作用是在页面上创造一个复位，也创建一些页面默认样式。一般有喜欢的字体和大小。

* {
   margin: 0;
   padding: 0;
   font-family: helvetica, arial, sans-serif;
   font-size: 16px;
}

A + B

这种选择被称为相邻的选择和它做什么选择后的第一个元素的元素。如果你想选择我们的头后的第一个div您可以键入：

header + div {
   margin-top: 50px;
}

A > B

正在使用的第一级儿童的父元素的选择建议。例如，如果你要选择第一级列表项的无序列表看起来像这样：

<ul>
	<li>List Item With ul
		<ul>
			<li>Sub list item</li>
			<li>Sub list item</li>
			<li>Sub list item</li>
		</ul>
	</li>
	<li>List Item</li>
	<li>List Item</li>
</ul>

你会使用这个选择，因为通常的AB选择也将选择列表项里面的嵌套无序列表

ul > li {
   background: black;
   color: white;
}

A[href*="example"]

这确实是一个很好的选择，当你想特定一个风格的链接以不同的方式，无论是在引号将要匹配的href链接。例如，所有链接到Facebook，你会使用蓝色风格：

a[href*="facebook"] {
   color: blue;
}

还有一个版本没有相匹配的确切的网址，你可以用确切链接*。

A:not(B)

这个特别有用，因为它的否定条款，允许您选择任意一组不匹配的元素。如果你想除了页脚的所有DIV，你只需要选择：

div:not(.footer) {
   margin-bottom: 40px;
}

A:first-child  / A:last-child

第一个孩子，最后孩子让我们选择的第一个和最后一个孩子的父元素。这可能是一个很大的帮助。

ul li:first-child {
   border: none;
}
ul li:last-child {
   margin-right: 0px;
}

A:nth-child(n)

第n个孩子是为了一个简单的方式为您选择任何一个元素的孩子。例如，如果你想在一个无序列表的第三个列表项目，可以这样表示：

ul li:nth-child(3) {
   background: #ccc;
}

我们可以用第n个孩子选择每一个数字乘数使用变量n，例如，如果我们把3N会选择列表项数3，6，9，12，等等。

A:nth-last-child(n)

倒数第n子的作品最后，所以如果你使用它，两个数，它会选择来前的最后一个列表项和第n个孩子一样，但不是第一个列表项开始计数计数形式就像是第n个孩子选择它的用法：

ul li:nth-last-child(2) {
   background: #ccc;
}

A:nth-of-type(n)

这个选择不正是你想象的那样，它认为你是什么类型的元素放在它和它的选择，例如，在您的网页上的第三个元素匹配你输入。对于选择第三段你会使用一个div：

div p:nth-of-type(3) {
   font-style: italic;
}

A:visited

没有发现，当你在谷歌搜索的东西时，你已经看到的页面出现在不同的颜色？

a:visited {
   color: blue;
}

Via

猜您也喜欢：
css会员登陆表单	16个非常有用的前端CSS框架	重返CSS基础之术语解释	38个优秀的CSS3动画演示例子
无觅