CSS复合选择器的功能介绍

这篇文章主要讲解了“CSS复合选择器的功能介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS复合选择器的功能介绍”吧!

建德网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联2013年至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

一、交集选择器

  • 又称标签指定式选择器

  • 作用:选择出同时符合两个标签的内容

  • 格式:1.由两个选择器构成,其中第一个为标签选择器,第二个为class选择器或id选择器;2.两个选择器之间不能有空格

  • 例如:老师要求他的班级中所有学生把头发染成红色

div.student{
				color: red;
}

二、并集复合选择器

  • 作用:将选中的所有选择器定义相同的样式

  • 格式:各个选择器通过逗号连接而成

  • 注意:任何选择器都可以作为并集选择器的一部分(有容乃大)

  • 例如:校长要求学校标语、全体老师、郭越以后写字只能写宋体

p.slogn,.teacher,#gy{
				font-family: "宋体";
}

三、层级选择器

1、后代元素复合器

  • 作用:选择某元素的子子孙孙

  • 格式:外层标签写在前面,内层标签写在后面,中间用空格分隔

  • 例如:愚公的后代想要集体染发

#yuGong .people{
   			color: red;
   		}
  • 注意:此时愚公的后代中所有people类的后代都会染发,包括愚公的儿子,孙子,曾孙子…

2、子元素复合选择器

  • 作用:选择作为某元素子元素(亲儿子)的元素

  • 格式:父级标签写在前面,子级标签写在后面,中间由 > 进行连接

  • 例如:愚公的儿子们想要集体染发

#yuGong>.people{
   			color: red;
}
  • 注意:此时愚公的后代中所有people类的亲儿子都会染发,愚公的孙子,曾孙子并没有染发,因为年纪尚幼 这里只会选择子元素(亲儿子)

3、临近兄弟选择器

  • 作用:选择紧接在另一个元素后的元素,而且二者有相同的父元素

  • 格式:选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素

  • 例如:葫芦七兄弟里的三娃要染发(用二娃定位三娃)

#secondBaby+#thirdBaby{
   			color: red;
}

4、普通兄弟选择器

  • 作用:选择与另一个元素同级的元素,而且二者有相同的父元素

  • 格式:使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲,但第二个元素不必紧跟第一个元素。

  • 例如:葫芦七兄弟里的三娃要染发(用大娃定位三娃)

#bigBaby~#thirdBaby{
   			color: red;
}

四、伪类与伪元素选择器

0、“伪”是什么?

  • “伪”是指该选择器用来修饰不在文档树中的部分。

  • 必读:http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto

1、伪类选择器

  • 作用:用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。

  • 以下只介绍上文中未详细说明的状态伪类

1)link

  • 作用:设置该元素(超链接)未访问的样式

  • 格式:

a:link{...}

2)visited

  • 作用:设置该元素(超链接)已访问过的样式

  • 格式:

a:visited{...}

3)hover

  • 作用:设置该元素鼠标悬停时的样式

  • 格式:

a:hover{...}

4)activer

  • 作用:设置该元素活动(鼠标按下)的样式

  • 格式:

a:active{...}

5)focus

  • 作用:设置该元素获取焦点的样式

  • 格式:

a:focus{...}

注意:伪类的顺序不要颠倒,要按照link-visited-hover-active的顺序,否则可能会出错

2、伪元素选择器

  • 作用:用于创建一些不在文档树中的元素,并为其添加样式。

选择器作用格式
::first-letter选取选择器的首字母p::first-letter
::first-line选取选择器的首行p::first-line
::before在选择器前增加内容,使用 content 属性来指定要插入的内容。(被插入的内容实际上不在文档树中)p::before{content: "hello ";}
::after在选择器后增加内容,使用 content 属性来指定要插入的内容。(被插入的内容实际上不在文档树中)p::after{content: "hello ";}
::selection匹配被用户选中或者处于高亮状态的部分p::selection

五、属性选择器

选择器作用格式
E[att^=value]表示E标签的att属性值是以’value’开头的p[id^=‘yuan’]{color: red;}
E[att$=value]表示E标签的att属性值是以’value’结尾的p[id$=‘chao’]{ color: blue;}
E[att*=value]表示E标签的att属性值中包含’value’字符串p[class*=‘shi’]{font-size: 35px;}

感谢各位的阅读,以上就是“CSS复合选择器的功能介绍”的内容了,经过本文的学习后,相信大家对CSS复合选择器的功能介绍这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


网页名称:CSS复合选择器的功能介绍
网站地址:http://scyanting.com/article/ggpdsc.html