CSS选择符那些事儿
CSS选择符那些事儿
1. * 选择符 清除页面中所有标签浏览器默认内边距、外边距，建议在项目开发中少用
2. #ID 选择符 id选择符是唯一的，不允许重复使用。如果可能的话，先尝试使用一个标签名称，一个新的HTML5元素，甚至是一个伪类。
3.class 选择符 id和类的不同之处在于后者可以多次使用。当你想给一组元素应用样式的时候可以使用类选择符。另外，当你紧想给特殊元素应用样式的时候才使用id
4. X Y 后代选择符(或包含选择器）: 即加入空格,用于选择指定标签元素下的后辈元素
5.子选择器: 用大于符号(>),用于选择指定标签元素的第一代子元素
6.类型选择符 匹配页面上的所有的元素 选择所有的无序列表，请使用ul {}
7.伪类选择符 X:visited and X:link
X:link 伪类选择符选择所有已经被点击过的锚标签。
X:visited伪类选择符，正如你期望的，允许我们仅给页面上被点击过的或被访问过的锚标签应用样式
8.X+Y相邻选择符 它将只选择紧贴在X元素之后Y元素
9.兄弟选择符 兄弟选择符和X + Y一样，然而，它没有约束。与相邻选择符（ul + li）仅选择前一个选择符后面的第一个元素比起来，兄弟选择符更宽泛。它会选择，我们上面例子中更在ul后面的任何p元素
10.X[title]属性选择器 它只会选择有title属性的锚标签。没有此属性的锚标签将不受影像
11.X[href=”foo”]将给所有href属性为http://net.tutsplus.com的锚点标签添加样式
12.X[href*=”tuts”]将给所有href属性值为包含tuts锚点标签添加样式
12.X[href^=”tuts”]将给所有href属性值为以“tuts”字符串的开始锚点标签添加样式 
14.X[href$=”.jpg”]使用正则表达式符号，$(dolor)，来作为字符串的结束标记。这种情况下，我们就会搜索所有url以.jpg为结尾的锚点啦。记住记住这种情况下gif和png格式的图片不会被选择哦
15.X[data-*=”foo”]
16.X[foo~=”bar”]
17.X:checked 伪类只会匹配已经被选中的单选元素
18.X:after before 和 after 伪元素很容易控制选择器周围的内容。
19.X:hover 用户在某个元素上面悬停时定义个特别的样式
20.X:not(selector) 很实用，为未选中的复选框裁剪图片
[17,18,19综合使用] 个性化化单【复】选框原型实现
21.X::pseudoElement 只能应用于同级元素才有效。
1 <html lang="en"><head> 2 <meta charset="UTF-8"> 3 <title>CSS Selectors</title> 4 <style> 5 6 /*伪元素（以::为表示）来定义元素的样式。例如第一行，第一个字符*/ 7 p::first-line { 8 font-weight: bold; 9 font-size: 1.2em; 10 } 11 12 /*这段代码会找到所有段落，然后再从中定义这些段落的第一个字符*/ 13 p::first-letter { 14 float: left; 15 font-weight: bold; 16 font-family: cursive; 17 font-size: 2em; 18 padding-right: 2px; 19 } 20 </style> 21 </head> 22 <body> 23 24 <div id="container"> 25 <p> Lorem ipsum dolor sit amet, <a href="http://www.google.com" data-info="external" title="Some title">consectetur</a> adipisicing elit, sed do <a href="http://nettuts.com">Nettuts</a> tempor. Lorem ipsum dolor sit amet 26 Lorem ipsum dolor sit amet, <a href="http://www.google.com" data-info="external" title="Some title">consectetur</a> adipisicing elit, sed do <a href="http://nettuts.com">Nettuts</a> tempor. Lorem ipsum dolor sit amet 27 Lorem ipsum dolor sit amet, <a href="http://www.google.com" data-info="external" title="Some title">consectetur</a> adipisicing elit, sed do <a href="http://nettuts.com">Nettuts</a> tempor. Lorem ipsum dolor sit amet</p> 28 </div> 29 </body> 30 </html>
22.X:nth-child(n)
23.X:nth-last-child(n)
24.X:nth-of-type(n)
25.X:nth-last-of-type(n)
26.X:first-child
27.X:last-child
28.X:only-child
29.X:only-of-type
30.X:first-of-type
译者注 本文问翻译文章，原文为“The 30 CSS Selectors you Must Memorize”
文章转载
http://yanhaijing.com/css/2014/01/04/the-30-css-selectors-you-must-memorize/
浙公网安备 33010602011771号