CSS 选择器用于选择 HTML 文档中的元素,并应用 CSS 规则以改变这些元素的样式。CSS 选择器种类繁多,包括但不限于元素选择器、类选择器、ID 选择器、属性选择器、伪类选择器和伪元素选择器等。 2. CSS 选择器的层级概念 CSS 选择器的层级指的是选择器的特异性(specificity)或优先级(priority),它决定了当多个选...
一、基础选择器 二、复合选择器 三、CSS3选择器补充: (一)层级选择器: (二)属性选择器 (三)伪类选择器 一、基础选择器 1、标签选择器:用 HTML 标签名称作为选择器 基础选择器是由单个选择器组成的 基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器 优点:能快速为页面中同类型的标签统一设...
比如下面选择了 id 为"first"的元素。 二、层级选择器 1、子代选择器 (E>F) 2、后代选择器 (E F ) 3、交集选择器 (E.F) 4、并集选择器 (E,F) 三、属性选择器 [attribute] [target] 选择所有带有target属性元素 2 [attribute=value] [target=-blank] 选择所有使用target="-blank"的元素 ...
一般兄弟选择器 ~：选择其后所有同级元素。/* 选择所有位于h1之后的同级p元素 */h1 ~ p { font-style: italic;} 5. 层级选择器 层级选择器，又称深度选择器，以>符号表示直接子元素选择，可以深入到DOM树的任意层级进行选择。/* 选择div元素下直接嵌套的所有span元素 */div > span { color: orange...
例如,后代选择器用于选择指定祖先元素下的所有后代元素,子选择器用于选择直接子元素,而兄弟选择器则用于选择同级元素。视频还讨论了CSS选择器的优先级问题,解释了ID选择器和元素选择器的优先级计算方法。总的来说,视频强调了理解HTML元素层级关系对于正确使用CSS层级选择器的重要性,并提供了一些实用的选择器使用技巧。
基本选择器:共有 5 个基本选择器,是 CSS 选择器的最为基本的用法。 层级选择器:共有 4 个层级选择器,是根据 HTML 元素之间的关系来定位 HTML 元素。 组合选择器:具有交集和并集两种用法,是将之前基本选择器和层级选择器进行组合。 伪类选择器:允许未包含在 HTML 页面中的状态信息选定位 HTML 元素。
{}基本选择器分为:first-child第一个、::first-letter第一个字母、::fist-line第一行、:last-child最后一个元素、:nth-child(n)第几个元素,层级选择器分为a,b组合、a b后代、a>b子代、a+b a的一个是b,伪类选择器:hover鼠标经过、:focus焦点、::selection文字选中背景色,属性选择器*[属性]、[属性=值...
层级选择器:.comment-card .content .name选择了.name类元素,该元素是.content类的子元素,而.content类又是.comment-card类的子元素。 伪类选择器::hover用于定义.comment-card在鼠标悬停时的背景颜色。 伪元素选择器:::before和::after分别用于在.name和.date元素的内容前后添加装饰性图标。
select1,select2,select3 : 分组选择器 2. 层级选择器 ancestor descendant :后代选择器(给定祖先元素下匹配所有的后代元素) 1 parent > child :子代选择器 (父元素下匹配所有的子元素) 2 prev + next :兄弟选择器(紧接在prev后面的next元素,next元素指的是下一个相邻同辈元素) 2 ...
相邻兄弟选择器是顺序敏感的,h1 + h2必须h1标签在前,h2标签在后; 所有的元素最终的父元素是 HTML body,直接在body下的元素互相也是兄弟元素,在选择器使用时需要注意影响面。 通用兄弟选择器: 波浪号~,匹配指定关系的所有同层级兄弟元素,h1 ~ h2=> 与h1具有共同父元素之后的所有同层级h2 ...