CSS复合选择器

时间：2023-03-28 19:10:56 HTML

在CSS中，选择器可以分为基本选择器（点击查看）和复合选择器。复合选择器是在基本选择器的基础上组合而成的。复合选择器可以更准确、更高效地选择目标元素。常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。1.后代选择器后代选择器又称为包含选择器，可以选择父元素内部的子元素。/*Syntax:element1element2{style}*/ulli{color:red}元素li是元素ul的子元素，最终颜色变化为

子元素和父元素必须分开元素2可以是元素1的子元素，也可以是元素1的孙元素，只要它是元素1的后代元素元素1和元素2可以是任何基本选择器

我没什么特别的我变成了红色

2.子选择子child元素选择一个选择器（子选择器）只能选择父元素的直接子元素。

我变红了

我没什么特别的

parent元素和子元素用大于号分隔。第二个跨度不是div的直接子元素。最后的颜色变化是第一个span3。联合选择器联合选择器可以选择多组标签，同时为它们设置定义相同的样式，通常用于集合声明。并集选择器中的选择器由“,”连接，任何形式的选择器都可以作为并集选择器的一部分。

我是红色的

我没什么特别的

我也变红了

4.伪类选择器4.1链接伪类选择器/*a:link选择所有未访问过的链接*/a:link{...style}/*a:visited选择所有访问过的链接*/a:visited{...style}/*a:hover选择鼠标指针悬停的链接*/a:hover{...style}/*a:active选择鼠标正在点击的链接*/a:active{...style}为了保证样式生效，按照LVHA的顺序声明：link-:visited-:hover-:active。4.2焦点伪类选择器：焦点伪类选择器用于选择获得焦点的表单元素。一般来说，类型的表单元素可以获得焦点，所以:focus伪类选择器主要针对表单元素。input:focus{background-color:yellow;}这样当鼠标点击input时，背景会变成黄色。

上一篇：前端面试-你必须知道的10个承诺问题！

下一篇：几十年计算机的历史浩瀚无边，细数那些影响时代的人和事

CSS复合选择器相关文章