网站建设资讯

NEWS

网站建设资讯

CSS选择器常见的有哪几种

这篇文章将为大家详细讲解有关CSS选择器常见的有哪几种,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联公司是专业的鄂托克网站建设公司,鄂托克接单;提供成都做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行鄂托克网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

css中选择器有:1、简单选择器;2、属性选择器;3、组合选择器;4、伪类选择器;5、伪元素选择器;6、多重选择器。

本文操作环境:windows7系统、CSS3版、Dell G3电脑。

CSS选择器常见的有哪几种?

一、简单选择器 Simple Selectors
选择器含义
*通用元素选择器,匹配任何元素
E标签选择器,匹配所有使用E标签的元素
.infoclass选择器,匹配所有class属性中包含info的元素
#footerid选择器,匹配所有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选择器常见的有哪几种
链接URL:http://njwzjz.com/article/gposej.html