要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。那么什么是选择器呢?每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。今天我们来说说一些前端设计师必须要知道的CSS选择器。
* 通用选择器用*来表示。选择可能是最容易的,但你还记得它往往未得到充分利用。它的作用是在页面上创造一个复位,也创建一些页面默认样式。一般有喜欢的字体和大小。
* { margin: 0; padding: 0; font-family: helvetica, arial, sans-serif; font-size: 16px; }
这种选择被称为相邻的选择和它做什么选择后的第一个元素的元素。如果你想选择我们的头后的第一个div您可以键入:
header + div { margin-top: 50px; }
正在使用的第一级儿童的父元素的选择建议。例如,如果你要选择第一级列表项的无序列表看起来像这样:
<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; }
这确实是一个很好的选择,当你想特定一个风格的链接以不同的方式,无论是在引号将要匹配的href链接。例如,所有链接到Facebook,你会使用蓝色风格:
a[href*="facebook"] { color: blue; }
还有一个版本没有相匹配的确切的网址,你可以用确切链接*。
这个特别有用,因为它的否定条款,允许您选择任意一组不匹配的元素。如果你想除了页脚的所有DIV,你只需要选择:
div:not(.footer) { margin-bottom: 40px; }
第一个孩子,最后孩子让我们选择的第一个和最后一个孩子的父元素。这可能是一个很大的帮助。
ul li:first-child { border: none; } ul li:last-child { margin-right: 0px; }
第n个孩子是为了一个简单的方式为您选择任何一个元素的孩子。例如,如果你想在一个无序列表的第三个列表项目,可以这样表示:
ul li:nth-child(3) { background: #ccc; }
我们可以用第n个孩子选择每一个数字乘数使用变量n,例如,如果我们把3N会选择列表项数3,6,9,12,等等。
倒数第n子的作品最后,所以如果你使用它,两个数,它会选择来前的最后一个列表项和第n个孩子一样,但不是第一个列表项开始计数计数形式就像是第n个孩子选择它的用法:
ul li:nth-last-child(2) { background: #ccc; }
这个选择不正是你想象的那样,它认为你是什么类型的元素放在它和它的选择,例如,在您的网页上的第三个元素匹配你输入。对于选择第三段你会使用一个div:
div p:nth-of-type(3) { font-style: italic; }
没有发现,当你在谷歌搜索的东西时,你已经看到的页面出现在不同的颜色?
a:visited { color: blue; }
本文由 Jackchen Design 1984 作者:jackchen 发表,转载请注明来源!