CSS入门---复合选择器学习与掌握

css基础选择器的学习与掌握

一.
css复合选择器分为：后代选择器，子选择器，并集选择器，伪类选择器（css选择器具体分类看我css选择器思维导图）

二.
（1）后代选择器
元素1 元素2{ 声明 }
1.上述语法表示选择元素1中的所有元素2
2.元素1 2用空格分开，元素1是父集，元素2是子集；最终选的是元素2
3.元素2可以是儿子，孙子；层层查找就可以
4.元素1，元素2可以是任意选择器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复合选择器的后代选择器（最重要）</title><style>/* 语法：元素1 元素2{ 声明 }1.上述语法表示选择元素1中的所有元素22.元素1 2用空格分开，元素1是父集，元素2是子集；最终选的是元素23.元素2可以是儿子，孙子；层层查找就可以4.元素1，元素2可以是任意选择器*//* 把ol中的li选出来改成红色 */ol li {color: red;}ol li p {color: rosybrown;}.hai li {color: slateblue;}.hai a {color: tomato;}</style>
</head><body><ol>我的娃<li>我是ol的孩子1</li><li>我是ol的孩子2</li><li><p>我是ol的孩子3</p></li></ol><ul><li>我是ul的孩子</li><li>我是ul的孩子</li><li>我是ul的孩子</li></ul><ul class="hai"><a href="#">1</a><a href="#">2</a><a href="#">3</a><li>我是ul的孩子</li><li>我是ul的孩子</li><li>我是ul的孩子</li></ul>
</body></html>

（2）子选择器
语法：元素1>元素2{样式声明}
子选择器：
1.只能选择作为元素1里面最近的一级子元素也就是直接后代元素2；
2.元素1与与元素2用>隔开。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子元素选择器</title>
</head>
<style>/* 语法：元素1>元素2{样式声明}子选择器：只能选择作为元素1里面最近的一级子元素也就是直接后代元素2；元素1与与元素2用>隔开。*/.nav>a {color: red;}
</style><body><div class="nav"><p><a href="#">我是孙子</a><a href="#">我是孙子</a><a href="#">我是孙子</a></p><a href="#">我是孙子</a><a href="#">我是孙子</a><!-- <a href="#">我是儿子</a> --></div></body></html>

（3）并集选择器
并集选择器：
1. 语法：元素1，元素2{样式声明}
2. 并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
3.并集选择器用英文逗号，隔开

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>并集选择器</title><style>/*并集选择器：1. 语法：  元素1，元素2{样式声明}2. 并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。3.并集选择器用英文逗号，隔开*//* 流泪猫和委屈猫改成紫色div,p {color: purple;}流泪猫和想吃啥改成红色 */div,.eat li {color: red;}</style>
</head><body><div>流泪猫</div><P>本拉豆猫</P><span>委屈猫</span><ul class="eat"><li>想吃榴莲披萨</li><li>想吃螃蟹</li><li>想吃榴莲蛋挞</li></ul>
</body></html>

（4）伪类选择器
1 链接伪类选择器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器</title><style>.eat a {color: darkblue;}/* a:link把没有被访问过的链接选择出来 ，改成黑色，去掉下划线*/a:link {color: #333;text-decoration: none;}/*a:visited 把所有访问过的链接选择出来，改成红色 */a:visited {column-count: #ff3344;}/* 选择鼠标位于上面的那个链接 */a:hover {color: #ff5;}/* 选择鼠标按下还没有弹起的链接 */a:active {color: #0000;}</style>
</head><body><div class="eat"><a href="#">大闸蟹</a><a href="#">榴莲</a></div>
</body></html>

3 :foucus伪类选择器
:foucs伪类选择器：用于选取获得焦点（光标）的表单元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>focus伪类选择器</title><style>input:focus {background-color: blue;color: red;}</style>
</head><body><input type="text"><input type="text"><input type="text"><input type="text">
</body></html>

CSS入门---复合选择器学习与掌握相关推荐

html css img标签鼠标事件,HTML+CSS入门 img标签学习
本篇教程介绍了HTML+CSS入门 img标签学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.img标签中的img其实是英文image的缩写,所以img标签的作用 ...
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 ...
前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...
CSS二(复合选择器)
复合选择器复合选择器可以更准确.更高效的选择目标元素(标签) 由两个或多个基础选择器,通过不同的方式组合而成复合选择器包括:后代选择器.子选择器.并集选择器.伪类选择器等后代选择器又称包含选择 ...
HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
前端入坑第六弹——CSS的复合选择器和背景设置
又是好几天没更新了,今天我来介绍一下CSS里面的复合选择器以及网页中的背景设置. 复合选择器比起一般的基础选择器,复合选择器能够更准确.更高效地定位网页元素. 后代选择器后代选择器可以对于父元素里 ...
CSS 的复合选择器
后代选择器 (重要) 后代选择器又称为包含选择器例如: ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */ 元素1 和元素2 中间用空格隔开  元素1 是父级,元素2 ...
CSS之复合选择器（交集、并集选择器）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）
一.基础班学习路线三.CSS3基础 1.Emmet语法 emmet语法生成html标签 <!DOCTYPE html> <html lang="en"> ...

CSS入门---复合选择器学习与掌握

css基础选择器的学习与掌握

CSS入门---复合选择器学习与掌握相关推荐

最新文章

热门文章