02.尚硅谷_css3_基本选择器及其扩展.wmv原创

那我们正式进入今天的第一章啊，也就是说选选择性啊，我们以上都会在讲，在讲这个选择性，好来我们来看一下。OK，呃，比如说我们选择题第一个啊，我们先来梳理一下大家已经学过的一些。选择性啊零一我们叫基本选择性，嗯，建一个文件夹吧。好零，我们叫基本选择器及其扩展啊，大家回忆回忆，你们学过的基本选择题有哪些及其拓展？OK，拎进去啊，OK。好零一基本选择题好基本选择题有哪些？ID选择器啊，类选择器，ID选择器是吧？类选择器还有呢。

元素选择器吧，是不是还有呢？通配符选择器还呢？啊，学过属性选择去了。学过属性选择器了吗？学过了是吧？啊，其实这边基本选择器里面还有表学选择器的啊分组啊，我们来看一看啊，我我先打开我的课件。好，那基本选择器啊，其实还有个什么后代选择器吧，是不是啊，我们来看通背符选择器，我们来说啊，这边我们把这个顺序理解好吧，应该上来先是通背是吧，通配符选择器啊，这边还有什么后代。选择性，OK，这么多选择性，我们来看第一个通背部选择性啊，通背部选我就不讲了，我们上来是不已经什么。用这个了，OKID选择器啊，类选择器，元素选择器，后代选择器，大家应该对这个分组选择器可能稍微有点陌生，其他应该都没太大问题，是不是我们说ID选择器，我们使用的什么井号是不是OK，走你类呢点是不是元素呢？直接拿元素，元素名是不是OK，然后呢，后加选择题呢？

空格。是不是什么叫选择分数，其实我们是不是有个逗号，记不记得啊，记住这个逗号叫什么，这个逗号叫做结合复嗯啊这种概念继续做，最后我们会讲的东西，会把所有的概念全部什么放在一起了，这个叫做结合。京福。好，所以记住这个逗号叫做结合符，好来看一下，那什么叫选择器分组呢？我们就讲一个选择器分组吧，比如说嗯，我们来看一下是不是有一个叫div啊。

嗯，比如说DP底下我叫ID叫做外啊，里面有一个一吧。OK啊，比如说一杠1OK，然后呢。嗯，H2H3。啊二杠一跟三杠一啊OK这里其实简单的一个页面是不是OK，那选择积分组，一般我们什么叫什么类型的，爱奇艺一逗号H2逗号H3OK，然后比如说这个color啊为pink啊，世界上最美的颜色是不是走你你看这就叫选选择题的分组吧，可是啊，这个东西比较简单，可是为什么要讲呢？啊，我问你，你们有没有学过一个就是优先级的东西啊啊谁的优先级啊？

嗯。选择器的优先级是不是，你想想啊，选择器的优先级有任何的意义吗？选择性会产生冲突吗？谁会产生冲突啊？比如说这边我来个ID，比如说等于。Test是不OK，走你比如说我这边来一个test，走你，我说你的color为deep PI是不是，那现在这个color是不是就变成第PI了，你说这个选择器它会有冲突吗？没有冲突，你谈何优先级啊？真正有，真正有冲突的是谁啊？这叫声明吧，是不是，所以说优先级是选择器的吗？不是，CSS里面优先级都叫生命优先级，懂不懂，只不过选择器会不会对这个生命的优先级去造成影响，会的，所以说记住一个特别重要的概念啊，说CSS选择优先级，选择优先级其实这个概念是错的啊，只是被大家大家是什么，只是一直在这么去叫而已，能不能理解啊，其实真正的优先级应该是CSS啊。

声明的优先级，今天最后上午的最后一节课，我们会把C生命优先级从头到尾梳理一遍，能不解，可是现进优先级不是选择器的，而是声明的，能不理讲OK，这你好，那基本选择题应该没有太大的问题，是不是啊，你们想看的话，这边我有课点，那基本选择题扩展啊，你们第一个基本选习这一块啊，自己去看应该没有太大问题，你们讲啊，这里那们讲第点。好，有基本选式，还有一个叫做子元素选择器，不知道大家有没有用过子元素选择，它长什么样子？大于号是不，比如说我们叫做紫元素学性啊，学好一样东西，必须要把这个东西的所有的。

逼格高的词汇给他记住，不然是学不会的啊，因为你记不住了，可以理解吗？OK，那我们看子元素选择性，它长什么样子。就是一个大于号是不是OK，那我就来问大家，比如说现在我一个UI是不是一走你。23458是不是来看一下，嗯，比如说我来个子显示器，比如说这个我给个ID叫做外，外是一个包裹的意思吧，是不是等你比如说来我来一个什么呢？井号外底下的所有的LY，这叫什么选择器啊，后代选择器吧，OK，那子元素选择性跟后代选择器它有什么区别啊。他知道儿子吧，是不是找的？

不早的话走，你来看一下，你看是不是12345。是不是啊，可是他看如果我说哎。你这边我再来一个L是不是，比如说我们叫做一杠一吧，是不是OK整点你看这边是不是来了个。一比如说这个时候我让你说的卡了平卡，问你照理来讲这个一一的颜色要变成平卡。外底下的吗？是不是OK，好看，还没变，变了吧？这题我们来看一下。你看这个刚又去哪了。出来了吧，是不是所说这种切记在iy里面是不不能签到，这是我们是的一个什么编码规则，所以说其实我问你这个子元素选择器能不能选中到这个LY。

本质上是应该去做不到，只不过这他自己干嘛出来而已，那不讲，那比如说那我把那我把它全部换掉啊，我全部把它换成div div能不能签到，Div不能签到是不是稍微有点过分了，是不是全部替换。好，走，你来看着。刷一下，你看我的天，是不是还变成了拼卡，它该不该记上这个样子啊？不该吧，啊不，他开不开变成粉色不该吧。你看我看，我说比如说我这个div是不是外跑，你底下这个div，大家看我的选题怎么写。我看我的选择题怎么写，是不是外粉底下的所有的D啊，是不是来看一下，我说外粉在底下所的，你看它们的颜色全部上拼改。没问题，都是平格是不是照比来讲，他们应该变格吧，是不是，你看他有没有选他有有没有用他这个样子。

有吗？没有吧，是吧，他干嘛。继承过来的吧，能不能解，所以说你要测试选择器的一个真正的原理的时候，你是不是要考虑一下这个C3属性，它是否是可继承的是不是，所以说哎，学习CSS属性必须有两个东西，大家要知道第一个默认值是什么，第二个是否可继承，能理解，这是你学习每一个CSS属性时候，你都需要去看的东西啊，那这种东西需要你自己去记吗？不可能啊，是不是，那怎么办？查，一般查你们去哪边查。某认了什么MD吧啊，这才是最好的一个平台啊，以后查任何的API，去n npi上查，你们讲不要去其他地方查了啊，就是火狐自己去维护的一个API的一个文档，基本上你全登录的所有的API这边都有。

能不能讲啊，这边是不包含框架的，所有的最最原生的一些API能不能讲，比如说我们看一下这个color。走，你你看这边是不是有CSS啊，SVG这种东西是不是都有啊，一般查CSS时候的话，最好把这个SVD的啊勾掉，因为SVG的很多的属性跟CSS是一模一样的，懂不懂OK来看一下这个卡。有没有，你看这是一篇吧，看着了。是不是那个卡了。总感觉怪怪的，不是这个卡，为什么？你看这是媒体查询家的卡吧，这看哪边有卡的CSCS卡应该是他吧。周年。你看是不是这个属性是什么卡是不是看。走你你看这边是什么，你看这个是一格是不是，这是我们什么日本省的吧。

这是诶怎么没有中文，天呐，好看啊，这本来就是中文的吧，OK来看一下好这边这边这边是不是有一个是否可是否可继成啊，你看这边什么yes吧，你看初始值呢，使用你浏览器自己默认的怎么讲是说学习任何一个S属性，首先搞清楚他的是什么，在搞清楚他是否。可继承能不讲，比如说这边我们来看你看一个属性啊，这个你们自己去看玩了啊，你们之前学过所所有的属性，你们自己有没有关注过啊，那这边一定要你们来测了，要有一个飞机品播的。来看一下这里。你看一杠一身上有边框吗？没有啊，其实这个我们叫做什么自元素选择器吧，是不是一般它有个更好听的名字叫什么？啊，这个比较容易记忆，叫做直接后代选择性啊，也就是说把这个子元素选择性跟这个后代选择性给他什么分开来，一个叫直接后代，一个叫什么后代啊，直接后代就是儿子。

能不能解啊，所有的后代是包括孙子重孙的，能不能理解啊，OK，好，那这是我们说的子元素选择器，那再往下看啊，还有什么相邻兄弟选择性，通用选择性是不啊，这两个单我就不写了啊，我带你们看一下，他问你这个叫什么选择性，一加号吧，加号叫什么兄弟选择吧，好来看一下这个结构，这个结没有问题吧，一个外都是，你看我现在是选中什么外本底下的first是不？这个是什么选择下。后代选择器，其实你如果想这边写的比较精确一点，应该写什么选择吧，是不是选中这个发啊，找他的什么兄弟吧，这个是个什么兄弟啊，这个叫做直接相邻兄弟的是吧？什么叫相什么叫什么相邻兄弟必须得挨着吧，来看一下这个音呢，是不跟这个发是挨着，那是不是选中这个音呢？给来看一下，那这个音呢，也是变成照那问你，如果我这边再能加。

好，我就加一个点，能不能选中它。不能选中的，你你看他能选中吗？不能，他什么意思，首先他是相邻的，而且你这个相邻的这个元素必须在下一个，而且这下一个拉必须得是引导，其实我们说这个相邻选择题，它有一个很重要的一个参数叫什么？紧跟啊，必须要紧跟啊，因什么必须是紧跟着这个元素，而且你紧跟着这个元素必须要满足我加号后面的这个什么选择性，不然它选不动的啊，这叫什么相邻兄弟选择线，这个一定要记住它懂道，那跟相邻兄弟选选择器啊，相对比的是谁不知号叫什么通用选择器，通用选择它选择什么。

你看我找的是不还是发的是所有的吗？还是说紧，还是说是跟着你这个元素后面所有的啊，记住所有的兄弟选择都是跟着你这个元素的，前面的他都不管懂不懂，可是我们说这个相邻跟通用它有个区别，相邻是什么，必须是紧挨着的啊，通用的只要你是我兄弟，而且只要你是跟着我的兄弟，我都给你选中杨不讲，那走，你来看一下。你看现在我是不是都是测的什么边框，你看是不是音呐，这下面四个音呢，是不是都可以选中了，你看下面这四个音呢，全部选中了，问你这个音段能不能选中，哦，不是这个div能，你看我选的是不是都是div啊，这个div能不能选中。

他不是兄弟吗？他是他什么兄弟的儿子是不是？他只能选择兄弟？能不讲你用卡了测是完全什么？测不到的吧，你用卡了车，为什么他是可以干嘛继承的，所以说千万不要什么卡来测。那么讲一定要拿一个非继承属性来测，懂吗？OK，好，那这种选择题大家应该都是有。学过的到这一块基本选择题，以及基本选择题一个扩展是不是啊，可是现在现在你们再去听这些东西一定要记住啊，而不是说我，哎看到这个东西我会啊，我还要去翻什么，翻我之己的笔记并不这样的，懂不懂现在看到这些选择器，他们之间有什么对比啊，他们之间上面有什么区别啊，啊这个选择上面我要注意一些坑啊，懂不懂这些东西现在都需要记住了。能不能讲，而且给我记四个月啊，以后就不用记了，懂吗？条件反射了懂吗？OK，好，这是我们说的基本卷子，记记记，基本卷就这一个扩展，OK。