CSS 的复合选择器

后代选择器 (重要）

后代选择器又称为包含选择器

例如：

ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

元素1 和元素2 中间用空格隔开

 元素1 是父级，元素2 是子级，最终选择的是元素2

 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

子选择器 (重要）

语法：

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

元素1 和元素2 中间用 大于号 隔开

 元素1 是父级，元素2 是子级，最终选择的是元素2

 元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child

链接伪类选择器实际工作开发中的写法：

链接伪类选择器

/* a 是标签选择器所有的链接 */

a {

color: gray;

}

/* :hover 是链接伪类选择器鼠标经过 */

a:hover {

color: red; /* 鼠标经过的时候，由原来的灰色变成了红色 */

}

:focus 伪类选择器

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus {

background-color:yellow;

}

复合选择器总结

CSS 的复合选择器相关推荐

前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...
CSS二(复合选择器)
复合选择器复合选择器可以更准确.更高效的选择目标元素(标签) 由两个或多个基础选择器,通过不同的方式组合而成复合选择器包括:后代选择器.子选择器.并集选择器.伪类选择器等后代选择器又称包含选择 ...
HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
前端入坑第六弹——CSS的复合选择器和背景设置
又是好几天没更新了,今天我来介绍一下CSS里面的复合选择器以及网页中的背景设置. 复合选择器比起一般的基础选择器,复合选择器能够更准确.更高效地定位网页元素. 后代选择器后代选择器可以对于父元素里 ...
CSS入门---复合选择器学习与掌握
css基础选择器的学习与掌握一. css复合选择器分为:后代选择器,子选择器,并集选择器,伪类选择器(css选择器具体分类看我css选择器思维导图) 二. (1)后代选择器元素1 元素2{ 声明 ...
CSS之复合选择器（交集、并集选择器）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
2022-01-28总结 CSS复合选择器
1.Emmet语法 Emmet语法的前身是Zen coding,它使用缩写,来提高HTML/css的编写速度,VSCode内部已经集成该语法. 1.1 快速生成HTML结构语法 1.新建html页面, ...
CSS（Emmet语法、复合选择器、元素显示模式、背景）
文章目录 1.Emmet语法 1.1快速生成HTML结构语法 1.2快速生成CSS样式语法 1.3快速格式化代码 2.CSS的复合选择器 2.1什么是复合选择器 2.2后代选择器 2.3子选择器(重要 ...

CSS 的复合选择器

CSS 的复合选择器相关推荐

最新文章

热门文章