一篇文章让你精通CSS选择器

分类

1. 元素选择器
   1.1 通用选择器（*）
   选择符：所有元素对象；
   1.2 类型选择器（E）
   选择符：文档语言对象类型；
   1.3 ID选择器（E#myid）
   选择符：唯一标识符id属性等于myid的E对象；
   1.4 类选择器（E.myclass）
   选择符：class属性包含myclass的E对象;
2. 关系选择器
   2.1 包含选择器（E F）
   选择符：所有符合条件的后代，包括儿子，孙子，孙子的孙子…
   2.2 子选择器（E>F）
   选择符：只能命中子元素，而不能命中孙辈。
   2.3 相邻选择器（E+F）
   选择符：只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）。
   2.4 兄弟选择器（E~F）
   选择符：选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。
3. 属性选择器
   3.1 E[att]
   选择符：选择具有att属性的E元素。
   3.2 E[att=”val”]
   选择符：选择具有att属性且属性值等于val的E元素。
   3.3 E[att~=”val”]
   选择符：选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
   3.4 E[att^=”val”]
   选择符：选择具有att属性且属性值为以val开头的字符串的E元素。
   3.5 E[att$=”val”]
   选择符：选择具有att属性且属性值为以val结尾的字符串的E元素。
   3.6 E[att*=”val”]
   选择符：选择具有att属性且属性值为包含val的字符串的E元素。
   3.7 E[att|=”val”]
   选择符：选择具有att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素，如果属性值仅为val，也将被选择。
4. 伪类选择器（常用）
   4.1 E:link
   选择符：设置超链接a在未被访问前的样式。
   4.2 E:visisted
   选择符：设置超链接a在其链接地址已被访问过时的样式。
   4.3 E:hover
   选择符：设置元素在其鼠标悬停时的样式。
   4.4 E:active
   选择符：设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
   4.5 E:focus
   选择符：设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
   4.6 E:not(s)
   选择符：匹配不含有s选择符的元素E。
   4.7 E:first-child
   选择符：匹配父元素的第一个子元素E。
   4.8 E:last-child
   选择符：匹配父元素的最后一个子元素E。
   4.9 E:only-child
   选择符：匹配父元素仅有的一个子元素E。
   4.10 E:nth-child(n)
   选择符：匹配父元素的第n个子元素E。
   4.11 E:nth-of-type(n)
   选择符：匹配同类型中的第n个同级兄弟元素E。
   4.12 E:empty
   选择符：匹配没有任何子元素（包括text节点）的元素E。
   4.13 E:checked
   选择符：匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
   4.14 E:enabled
   选择符：匹配用户界面上处于可用状态的元素E。
   4.15 E:disabled
   选择符：匹配用户界面上处于禁用状态的元素E。
5. 伪对象选择器（常用的三个）
   5.1 E:first-letter/E::first-letter
   选择符：设置对象内的第一个字符的样式。
   5.2 E:before/E::before
   选择符：设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
   5.3 E:after/E::after
   选择符：设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
   大家可以注意到我以上有用: 也用::，这两种写法都可以。其中：是CSS2写法，CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效。
   5.2和5.3也称内容生成，经常也会和计数器一起使用，同时用来处理父子margin以及浮动导致父元素height为0的问题，后面我会关于这两个伪对象选择器写一篇文章专门讲解，希望大家继续关注我！

---

选择器是CSS的一个重头戏，大家在记忆时采用分组记忆，作为一名程序员，应该反复敲代码，不知道一个选择器是什么意思，就去实践，用代码说事，不要动不动查书等。
希望大家能多给我点建议，比如你是一名小白，你认为一篇好的博客应该怎么写，你会一看就懂。因为我是才开通的博客，所以还没有什么写博客经验，谢谢大家。
在阅读我的文章时，请多留点意见，以使我能写出更好的博客!

---

这篇博客标题浮夸了，就是来夺一下你们的眼睛 嘿嘿嘿