程序代码

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

featured35@wdd2x
要使用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

本文由 Jackchen Design 1984 作者:jackchen 发表,转载请注明来源!

关键词:,

热评文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注