选择器 · 前端笔记

[TOC] ![](https://box.kancloud.cn/320b919f3f976c8b4fc5a7644f5a691c_1915x3096.jpg) # 选择器 ## * - 通配选择器星号*代表通配选择器，可以与任何元素匹配。许多开发者会使用这个技巧来把margin和padding都设为0。在快速开发测试中这种设置固然是好的，但我建议绝对不要在最终的产品代码中使用。因为会给浏览器增加大量不必要的负荷。 ~~~ *{color: red;} ~~~ 兼容的浏览器 * IE6+ * Firefox * Chrome * Safari * Opera <br> ## # - ID选择器 ID选择器用于选择一个元素。使用＃号作为前缀可以选择该id的元素。这是最常见的用法，但使用id选择器时要谨慎。 ~~~ #container { width: 960px; margin: auto; } ~~~ 问问自己：是否真的需要使用id来定义元素的样式？ > 在实际中，浏览器并不会检查ID的唯一性，设置多个ID，可以为这些具有相同ID的元素应用相同样式，但在编写DOM脚本时只能识别该id的第一个元素。兼容的浏览器 * IE6+ * Firefox * Chrome * Safari * Opera <br> ## . - 类选择器类选择器用于选择一类元素。 ~~~ .div{color: red;} ~~~ 兼容的浏览器 * IE6+ * Firefox * Chrome * Safari * Opera <br> ## X Y - 后代选择器当你需要更精确地定位时，可以使用后代选择器 ~~~ li a { text-decoration: none; } ~~~ > 如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷兼容的浏览器 * IE6+ * Firefox * Chrome * Safari * Opera <br> ## X - 元素选择器 ~~~ a { color: red; } ul { margin-left: 0; } ~~~ 兼容的浏览器 * IE6+ * Firefox * Chrome * Safari * Opera <br> ## X + Y - 邻近元素选择器只会选中紧接在另一个元素后的元素。 ~~~ // 只有每个ul后面的第一个段落是红色的 ul + p { color: red; } ~~~ 兼容的浏览器 * IE7+ * Firefox * Chrome * Safari * Opera <br> ## X > Y - 子元素选择器 X Y和X > Y的区别是后者只会选中直接后代。 ~~~ // #container > ul 只会定义id为container的div里的ul元素 // 而不会定义第一个li里的ul div#container > ul { border: 1px solid black; } <div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div> ~~~ 兼容的浏览器 * IE7+ * Firefox * Chrome * Safari * Opera <br> ## X ~ Y - 兄弟选择器选择器 X 之后出现的所有 Y。两种元素必须拥有相同的父元素，但是 Y 不必直接紧随X。兼容的浏览器 * IE7+ * Firefox * Chrome * Safari * Opera <br> ## X[Y] - 属性选择器 ~~~ // 带有title属性的链接标签才会被匹配。没有title属性的标签不会受到影响。 a[title] { color: green; } ~~~ 兼容的浏览器 * IE7+ * Firefox * Chrome * Safari * Opera ### X[href*="nettuts"] - 模糊匹配属性选择器 ### X[href^="http"] - 前缀属性选择器 ### X[href$=".jpg"] - 后缀属性选择器 ### X[data-*="foo"] - 自定义属性选择器 ~~~ a[data-filetype="image"] { color: red; } <a href="path/to/image.jpg" data-filetype="image"> Image Link </a> ~~~ ### X[foo~="bar"] - 部分属性选择器波浪符号（~）可以让你定义取值带有空格的属性。 ~~~ /* Target data-info attr that contains the value "external" */ a[data-info~="external"] { color: red; } /* And which contain the value "image" */ a[data-info~="image"] { border: 1px solid black; } <a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a> ~~~ ## 伪元素选择器 ### X:first-letter - 设置首字母样式所有前导标点符号应与第一个字母一同应用该样式；只能与块级元素关联；只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-letter中存在连接符的原因 ### X:first-line - 设置首行样式只能与块级元素关联；只有当选择器部分和左大括号之间有空格时，IE6-浏览器才支持。因为first-line中存在连接符的原因 ### X:before - 在元素内容前面插入内容默认这个伪元素是行内元素，继承元素可继承的属性；所有元素都必须放在出现该伪元素的选择器的最后面。兼容的浏览器 * IE8+ * Firefox * Chrome * Safari * Opera ### X:after - 在元素内容后面插入内容兼容的浏览器 * IE8+ * Firefox * Chrome * Safari * Opera ## 伪类伪类顺序：link-visited-focus-hover-active ### 静态伪类(只应用于超链接) #### X:visited and X:link :link伪类来定义所有还没点击的链接。 :visited伪类可以让我们给曾经点击过或者访问过的链接添加样式。兼容的浏览器 * IE7+ * Firefox * Chrome * Safari * Opera ### 动态伪类(可应用于任何元素) #### X:hover 鼠标停留兼容的浏览器 * IE6+ （只能用于链接标签） * Firefox * Chrome * Safari * Opera #### X:active 点击未松开时 #### X:focus 获取焦点时 ### 目标伪类 #### X:target 代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配 . ~~~ /* 选择一个ID与当前URL片段匹配的元素*/ :target { border: 2px solid black; } ~~~~ <br> 例如, 以下URL拥有一个片段 (以#标识的) ，该片段指向一个ID为section2的页面元素: ~~~html http://www.example.com/index.html#section2 ~~~ 若当前URL等于上面的URL，下面的元素可以通过 :target选择器被选中： ~~~html <section id="section2">Example</section> ~~~ 兼容的浏览器 * IE9+ * Firefox * Chrome * Safari * Opera ### UI元素伪类兼容的浏览器 * IE9+ * Firefox * Chrome * Safari * Opera #### X:check - 选中定义选中（checked）的元素，比如单选按钮（radio）或多选按钮（checkbox） #### X:enabled - 可用状态 #### X:disabled - 不可用状态 ### 否定伪类 #### X:not(selector) ~~~ // 我希望选中所有的div元素，除了一个id为container的div div:not(#container) { color: blue; } ~~~ 兼容的浏览器 * IE9+ * Firefox * Chrome * Safari * Opera ### 结构伪类 #### X:first-child 父元素的第一个子元素,且该子元素是X，与E:nth-child(1)等同兼容的浏览器 * IE7+ * Firefox * Chrome * Safari * Opera #### X:last-child 父元素的最后一个子元素，且该子元素是X，与X:nth-last-child(1)等同兼容的浏览器 * IE9+ * Firefox * Chrome * Safari * Opera #### :root 选择文档的根元素，即<html>元素 #### X Y:nth-child(n) 选择父元素的第n个子元素，父元素是X，子元素是Y 兼容的浏览器 * IE9+ * Firefox 3.5+ * Chrome * Safari #### X Y:nth-last-child(n) 选择父元素的倒数第n个子元素，父元素是X，子元素是Y 兼容的浏览器 * IE9+ * Firefox 3.5+ * Chrome * Safari * Opera #### X Y:nth-of-type(n) 选择父元素的具有指定类型的第n个子元素，父元素是X，子元素是Y 兼容的浏览器 * IE9+ * Firefox 3.5+ * Chrome * Safari #### X Y:nth-last-of-type(n) 选择父元素的具有指定类型的倒数第n个子元素，父元素是X，子元素是Y 兼容的浏览器 * IE9+ * Firefox 3.5+ * Chrome * Safari * Opera #### X:first-of-type 选择父元素中具有指定类型的第1个子元素，与X:nth-of-type(1)相同兼容的浏览器 * IE9+ * Firefox * Chrome * Safari * Opera #### X:last-of-type 选择父元素中具有指定类型的最后1个子元素，与X:nth-last-of-type(1)相同 #### X:only-child 选择父元素中只包含一个子元素，子元素是X 兼容的浏览器 * IE9+ * Firefox * Chrome * Safari * Opera #### X:only-of-type 选择父元素中只包含一个同类型的子元素，子元素是X 兼容的浏览器 * IE9+ * Firefox * Chrome * Safari * Opera #### X:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点 #参考资料 [选择器 · FE-booklet](https://www.xiaohuochai.site/CSS/grammar/grammar_selector.html) [30个你必须熟记的CSS选择器](https://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize--net-16048)