1000字范文 > 从零开始学前端：CSS复合选择器 --- 今天你学习了吗？（CSS：Day10）

从零开始学前端：CSS复合选择器 --- 今天你学习了吗？（CSS：Day10）

时间：2022-10-06 17:04:37

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

复习：从零开始学前端：CSS背景颜色 — 今天你学习了吗？（CSS：Day09）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）前言第十节课：CSS复合选择器一、复合选择器二、后代选择器三、子选择器四、兄弟选择器五、并集选择器六、伪类选择器七、链接伪类选择器八、focus伪类选择器九、结构伪类选择器十、复合选择器总结十一、练习

前言

发现眼睛看一遍，第二天该用的时候还是想不起来，所以打算尽量抽时间定时在重新过一遍，敲代码重新过一遍，知识点重新过一遍。。。给自己加油！

第十节课：CSS复合选择器

一、复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

优点：

复合选择器可以更准确、更高效的选择目标元素（标签）；复合选择器是有两个或多个基础选择器，通过不同的方式组合而成的；常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。

二、后代选择器

后代选择器又称为包含选择器，可以选择父元素里的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套式。内层标签就成为外层标签的后代。

语法：

元素1 元素2 {样式声明}

注意点:

元素1和元素2中间一定要空格隔开；元素1是父级，元素2是子级，最终选择的是元素2；元素2可以是儿子，也可以是孙子，只要是元素1的后代即可；元素1和元素2可以是任意的基础选择器。

html文件：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>div div{color: aqua;}</style></head><body><div><p>段落一</p><p>段落二</p><div>第一个div<div>第一个div的孩子</div></div><div>第二个div</div></div></body></html>

三、子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

使用的符号：>

语法：

元素1>元素2 {样式声明}

注意点:

元素1和元素2之间用大于号隔开；元素1是父级，元素2是子级，最终选择的是元素2；元素2必须是亲儿子，左右亲儿子都可以选择，其孙子、后代之类的都不归他管。

html文件：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复合选择器</title><style>div>p{color: red;}</style></head><body><div>初始div<p>段落一</p><p>段落二</p><div>第一个div<a>第一个div的孩子</a><p>第2个div的孩子</p><p>第3个div的孩子</p></div><div>第二个div</div></div></body></html>

四、兄弟选择器

兄弟选择器使用符号：+，可以除了子级集体声明，选择的元素就是除了自身，选择其他的兄弟元素只有后面的前面的不管。

语法：

元素1+元素2 {样式声明}

注意点：

元素1和元素2中间用加号隔开；元素2是元素1的兄弟，最终选择的是除了元素1的其他元素；

例子：

html文件：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复合选择器</title><style>div+p{color: rgb(134, 238, 179);}</style></head><body><div>初始div<p>段落一</p><p>段落二</p><div>第一个div<a>第一个div的孩子</a><p>第2个div的孩子</p><p>第3个div的孩子</p></div><p>段落三</p><p>段落四</p><div>第二个div</div></div></body></html>

效果图：

五、并集选择器

并集选择器是个选择器通过英文“,”连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1，元素2{样式声明}

注意点：

元素1和元素2中间用逗号隔开，都好可以理解为和的意思；并集选择器可以选择多组标签，同时他们定义相同的样式，通过常用于集体声明。

例子：

html文件：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复合选择器</title><style>a,p{color: rgb(231, 157, 122);}</style></head><body><div>初始div<p>段落一</p><p>段落二</p><em>rtyu</em><div>第一个div<a>第一个div的孩子</a><p>第2个div的孩子</p><p>第3个div的孩子</p></div><a>123</a><p>段落三</p><p>段落四</p><div>第二个div</div></div></body></html>

效果：

六、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。伪类选择器书写最大的特点是用冒号“:”,比如:hover、:first-child。伪类选择器有几种。

链接伪类选择器：focus伪类选择器结构伪类选择器

例子：

html文件：

效果：

七、链接伪类选择器

a:link：选择所有未被访问的链接a:visited：选择所有已被访问的链接a:hover：当鼠标移动在链接上产生的样式（最常用）a:active：选择活动链接（鼠标按下未弹起的链接）

注意：

为了确保生效，请按照顺序声明:link、:visited、:hover、:active。

因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。在实际开发中最常用的是a:hover

例子：

html文件：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复合选择器</title><style>a:link{color: rgb(0, 0, 0);text-decoration: none;}a:visited{color: skyblue;}a:active{color: red;}a:hover{color: pink;font-size: 18px;}</style></head><body><div><p>伪类选择器</p><p><a href="#">这是一个显示链接</a></p></div></body></html>

效果图：

点击前：

鼠标悬停时：

点击时：

点击后：

八、focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。

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

语法：

input:focus{样式1；样式2}

例子：

hml文件：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复合选择器</title><style>/* table{border-collapse: collapse;} */input:focus{background-color: thistle;}</style></head><body><table border="0px"><tr><th colspan="2">登录</th></tr><tr><th>账户：</th><th><input type="text"></th></tr><tr><th>密码：</th><th><input type="password"></th></tr></table></body></html>

效果：

点击后聚焦：

九、结构伪类选择器

first-child：选择父元素里面的第一个儿子last-child：选择父元素里面的最后一个儿子nth-child(n)：选择父元素里面的某一个，n填自然数从1开始，代表意思选择到父元素里面第n个元素。n的值也可以是odd、even，“odd”代表队是基数，even代表偶数（table各行换色），或者也可以写表达式，（2n+1）取值从0开始。nth-of-type(n)：选择父元素内具有指定类型元素的第几个。比如.nav li p:nth-of-type(2)这里写的代表的意思就是选择ul父元素里面子元素p的第二个（想看元素，再看个数）

例子：

html文件：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复合选择器</title><style>div p:first-child{color: plum;}p:last-child{color: royalblue;}div>p:nth-child(2){color: rgb(169, 228, 194);}div ul li p:nth-of-type(3){color: tomato;}</style></head><body><div><p>你好</p><p>你好</p><p>你好</p><ul><li>无序列表<p>段落</p><p>段落</p><p>段落</p><p>段落</p></li><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul><p>你好</p><p>你好</p></div></body></html>

效果：

十、复合选择器总结

十一、练习

table结合编写：

源码：

html文件：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hover</title><link rel="stylesheet" href="hover.css"></head><body><div><table border="0px"><tr class="head"><th colspan="5">全部商品分类</th><th class="img"><img src="./img/arrow-down.gif" alt=""></th></tr><tr class="body"><td class="img"><img src="./img/arrow-icon.gif" alt=""></td><td>图书</td><td>图像</td><td colspan="2">数字商品</td><td class="img"><img src="./img/arrow-right.gif" alt=""></td></tr><tr><td class="img"><img src="./img/arrow-icon.gif" alt=""></td><td>家用电器</td><td>手机</td><td colspan="2">数码</td><td class="img"><img src="./img/arrow-right.gif" alt=""></td></tr><tr><td class="img"><img src="./img/arrow-icon.gif" alt=""></td><td>电脑</td><td colspan="3">办公</td><td class="img"> <img src="./img/arrow-right.gif" alt=""></td></tr><tr><td class="img"><img src="./img/arrow-icon.gif" alt=""></td><td>家居</td><td>家装</td><td colspan="2">厨具</td><td class="img"><img src="./img/arrow-right.gif" alt=""></td></tr><tr><td class="img"><img src="./img/arrow-icon.gif" alt=""></td><td>服饰</td><td>鞋帽</td><td colspan="2">个护化妆</td><td class="img"><img src="./img/arrow-right.gif" alt=""></td></tr><tr><td class="img"><img src="./img/arrow-icon.gif" alt=""></td><td>礼品箱包</td><td>钟表</td><td colspan="2">珠宝</td><td class="img"><img src="./img/arrow-right.gif" alt=""></td></tr><tr><td class="img"><img src="./img/arrow-icon.gif" alt=""></td><td>食品饮料</td><td colspan="3">保健食品</td><td class="img"><img src="./img/arrow-right.gif" alt=""></td></tr><tr><td class="img"><img src="./img/arrow-icon.gif" alt=""></td><td>彩票</td><td>旅行</td><td>充值</td><td>票务</td><td class="img"><img src="./img/arrow-right.gif" alt=""></td></tr></table></div></body></html>

CSS文件：

.head{color: seashell;background-color: red;}.head th{text-align: left;}.head th:hover{color: black;font-size: 18px;}.img{width: 20px;text-align: right;}tr td{font-size: 14px;width: 70px;}table{border-collapse: collapse;line-height: 20px;background-color: rgb(215,215,215);}table tr td:hover{color:lightcoral;font-size: 16px;}

直接div编写：

html文件：

CSS文件：

div{/* height: 300px; */width: 250px;background-color: rgb(215,215,215);}h2{color: burlywood;font-size: 20px;/* height: 40px; */line-height:40px;text-indent: 2em;background: rgb(220,20,60) url(../../img/arrow-down.gif) no-repeat right bottom;background-size: 25px;}a{/* background-attachment:固定背景图像，滚动还是固定 *//* 下划线、上划线、删除线 */text-decoration: none;color: black;}a:hover{color: red;font-size: 16px;}ul{height: 200px;/* background-color: green; */list-style-type: none;}ul li{background: rgb(215,215,215) url(../../img/arrow-right.gif) no-repeat right;height: 24px; font-size: 14px;line-height: 24px;}

预习：从零开始学前端：复习课程 — 今天你学习了吗？（CSS：Day11）

------纸上得来终觉浅，绝知此事要躬行。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。