css选择器类反选，必须记住的30类CSS选择器
开篇
有 30 个 CSS 选择器你必须烂熟于⼼，它们适应于当今各⼤主流浏览器。
1.*
* {
margin: 0;
padding: 0;
}
*选择器选择的是每⼀个单⼀元素。很多程序员⽤上⾯的 CSS 将所有元素的 margin 和 padding 清零。虽然这是有效的，但最好还是别这么做，这会使得浏览器的负担很重。
*选择器也可以⽤在孩⼦选择器中。
#container * {
border: 1px solid black;
}
这会使#container所有孩⼦都有 border，但还是那句话，如果不是必须得这么做，还是别⽤星选择器。
Compatibility
IE6+
Firefox
Chrome
Safari
Opera
2.#x
#container {
width: 960px;
margin: auto;
}
id 选择器的优先级很⾼，因此在⽤之前问问⾃⼰：我仅仅是为了到这个元素⽽去给他加id的吗？
Compatibility
IE6+
Firefox
Chrome
Safari
.error {
color: red;
}
class 选择器和 id 选择器不同，⾸先优先级没有 id ⾼，再者 id 选择器只能选择⼀个，⽽ class 选择器则可以筛选出来⼀组。Compatibility
IE6+
Firefox
Chrome
Safari
Opera
4.x y
li a {
text-decoration: none;
}
当不是选择所有后代时，后代选择器将会⾮常有⽤，但有⼀点得注意：
如果你的选择器是x y z , 那你就⽤错了。你得问问⾃⼰是否需要应⽤每⼀层？
Compatibility
IE6+
Firefox
Chrome
Safari
Opera
5.x
a { color: red; }
ul { margin-left: 0; }
如果想选择同⼀类元素，那就不要⽤ id 或 class 了，直接⽤元素选择器。
Compatibility
IE6+
Firefox
Chrome
Safari
Opera
a:visted { color: purple; }
我们常常⽤伪类: link 筛选 a 标签是还未被点击；⽽⽤: visited 去筛选哪些别点击过了。
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
7.x + y
ul + p {
color: red;
}
相邻选择器会选择第⼀个相邻的元素，如上⾯的例⼦会让 ul 后第⼀个段落的字体变为红⾊(⽽ ul 与 p 之间是不能有其他元素的)。Compatibility
IE7+
Firefox
Chrome
Safari
Opera
8.x > y
div#container > ul {
border: 1px solid black;
}
这也是⼀种后代选择器，但它与x y这种后代选择器不同，它只能选择直系后代。如：
List Item
Child
List Item
List Item
List Item
在这个例⼦中，#cotainer > ul只会选择第⼀个 ul, ⽽不会 search 到 ul ⾥⾯那个包含 li 的 ul。
Compatibility
IE7+
9.x ~ y
ul ~ p {
color: red;
}
这种兄弟选择器与x + y类似，但不同的是，后者只能筛选第⼀个 p，⽽这种却可以满⾜ ul 下所有的直系 p 标签。
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
10.x[title]
a[title] {
color: green;
}
属性选择器。这将选择所有具有 title 属性的 a 标签。
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
11.x[href="foo"]
a[href="net.tutsplus"] {
color: #1f6053; /* nettuts green */
}
这个选择器可以选择链接为href="net.tutsplus"的 a 标签，可如果这个⾥这个链接变了呢？，这未免有些严格，可以适当的⽤正则表达式去匹配。
css 属性选择器
Compatibility
IE7+
12.x[href*="nettuts"]
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
'*'号将匹配 href 中含有 nuttuts 字符，如果想更加严格，还可以⽤^和$表⽰开始和结束。Compatibility
IE7+
Firefox
Chrome
Safari
Opera
13.x[href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
14.x[href$=".jpg"]
a[href$=".jpg"] {
color: red;
}
这将会选择链接为 jpg 格式的图⽚链接，可是如果图⽚类型为 png 或 gif 等怎么办？Compatibility
IE7+
Firefox

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。