CSS选择器常见的有哪几种
这篇文章将为大家详细讲解有关CSS选择器常见的有哪几种，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联公司是专业的鄂托克网站建设公司，鄂托克接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行鄂托克网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
css中选择器有：1、简单选择器；2、属性选择器；3、组合选择器；4、伪类选择器；5、伪元素选择器；6、多重选择器。
本文操作环境：windows7系统、CSS3版、Dell G3电脑。
CSS选择器常见的有哪几种?
一、简单选择器 Simple Selectors
| 选择器 | 含义 |
|---|---|
| * | 通用元素选择器，匹配任何元素 |
| E | 标签选择器，匹配所有使用E标签的元素 |
| .info | class选择器，匹配所有class属性中包含info的元素 |
| #footer | id选择器，匹配所有id属性等于footer的元素 |
二、属性选择器 Attribute Selectors
| 选择器 | 含义 |
|---|---|
| [atrr] | 选择包含 attr 属性的所有元素，不论 attr 的值为何 |
| [attr=val] | [attr=val] 仅选择 attr 属性被赋值为 val 的所有元素 |
三、组合选择器 Combinators
| 选择器 | 含义 |
|---|---|
| A, B | 选中匹配 A 或/和 B 的元素 |
| A B | 选中匹配 B 且为匹配 A 的元素的后代元素(A B之间空格分开) |
| A > B | 选中匹配 B 且为匹配 A 的元素的直接子元素 |
| A + B | 选中匹配 B 且为匹配 A 的元素的下一相邻元素 |
| A ~ B | 选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素 |
四、伪类 Pseudo-classes
| 选择器 | 含义 |
|---|---|
| a:link | 匹配所有未被点击的链接 |
| a:visited | 匹配所有已被点击的链接 |
| a:hover | 匹配鼠标悬停其上的a元素 |
| a:active | 匹配鼠标已经其上按下、还没有释放的a元素 |
| li:first-child | 匹配父元素的第一个子元素li |
| li:last-child | 匹配父元素的最后一个子元素li |
| li:nth-child(n) | 匹配父元素的第n个子元素li（odd奇数，even偶数） |
五、伪元素 Pseudo-elements
| 选择器 | 含义 |
|---|---|
| E::before | 在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最前面 |
| E::after | 在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最后面 |
| E::selection | 应用于文档中被用户高亮的部分（比如使用鼠标选中的部分） |
| E::first-letter | 匹配E元素的第一个字母第一行的第一个字母 |
| E::first-line | 匹配E元素的第一行 |
六、多重选择器 Multiple Selectors
在HTML中，我们有时会对同一个标签赋予多个class名称，如：
而在CSS里面则可能同时选择多个class，像是：
.one .two{} /*两个 class 中有空格*/ .one.two{} /*两个 class 中沒有空格*/ .one, .two{} /*两个 class 中出现逗号*/这三者
one.two{ }，.one .two{ }，或者是.one, .two{ }有何区别？
第一个的 one 和 two 中间包含空格，意思是指，我必须要是在 one 裡面的 two，才会被选择到。
第二个的 one 和 two 中间没有包含空格，表示某个区块必须同时具有 one 和 two 的 class 时，才能被 CSS 所选择到到。
第三个的 one 和 two 中间包含逗号，意思是指 class 中有 one 或 two，都会被编辑器所选择到。
简单来说，没空格表示必须同时包含才会被选取；有空格表示后面的 class 被镶嵌在前面的 class 中才会被选取；逗号则表示只要有其中一个 class 就会被选取到 。
关于“CSS选择器常见的有哪几种”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
当前标题：CSS选择器常见的有哪几种
分享路径：http://azwzsj.com/article/gposej.html
