当前位置: 首页 > Web前端 > CSS

选择器简介

时间:2023-03-30 23:33:13 CSS

1.元素选择器的作用:根据标签名选择指定的元素。语法:标记名{}。示例:p{}、h1{}、div{}。2.id选择器的作用:根据元素的id属性选择一个元素。语法:#id属性值{}。示例:#red{}。3、类选择器功能:根据元素的class属性值选择一组元素。语法:.class属性值。示例:.content{}、.top{}。4、伪类(不存在的类,特殊类)选择器函数:用来描述元素的特殊状态,通过这种特殊的属性来选择元素。比如第一个子元素,被点击的元素,鼠标移动的元素....语法:一般使用:xxx。例子::first-child(第一个子元素),:last-child(最后一个子元素),:nth-child(n)(选择第n个子元素),其中n表示全选,2n甚至表示选择偶数的元素,2n+1或odd表示选择奇数的元素。5.复合选择器:复合选择器由两个或多个基本选择器以不同方式组合而成。目的是选择更准确、更精细的目标元素标签。交集选择器:一个交集选择器由两个选择器组成,第一个是标签选择器,第二个是类选择器。两个选择器之间不能有空格。交集选择器是andmeans。那是……和……意思。功能:选取同时满足多个条件的元素。例子:div.red{}选取class为红色的div,比较少用,不推荐。联合选择器:联合选择器是由逗号连接的选择器的组合。任何形式的选择器(包括标签选择器、类类选择器、id选择器等)都可以作为联合选择器的一部分。如果某些选择器定义的样式完全相同,或者部分相同,可以使用联合选择器为它们定义相同的CSS样式。也就是说,只要逗号隔开,所有的选择器都会执行下面的样式。功能:同时选择多个选择器对应的元素。例子:.one,p,#id{},表示.one,p,#id这三个选择器会被执行,颜色为红色。通常用于集体陈述。后代选择器:后代选择器,也称为包含选择器,用于选择元素或元素组的后代。它的写法是外标在前,内标在后,中间用空格隔开。当标签嵌套时,内部标签成为外部标签的后代。子孙后代可以选择这样做。或者,它可以选择任何包含的标签。子元素选择器:子元素选择器只能选择作为元素子元素的元素。写法是父标签写在前面,子标签写在后面,中间用a连接。注意符号的左右两边有一个空格。示例:ul>li{color:red;}表示ul元素包含li。选择器的权重和优先级会在后面的文章中总结!