25.尚硅谷_HTML&CSS基础_子元素和后代元素选择器.avi原创

一个常用选择器，然后接下来我们来继续说啊，还是接着来说我们这个选择器，来一个零四，我们叫做一个这个选择器，那我们还要说一些什么呢？那我们先来看这么一个东西啊，那这里边我们先写一个这个div div这写一个什么呢？写一个字吧，我是这个div标签，然后在div里边写一什么呢？写一个这个P标签，往div里能不能放一个P标签，哎，可以，块里边是不是可以放块啊，哎，块这里边写一个什么呢？我是这个P标，P标签里边我再写什么呢？写一个这个SPA，诶写什么呢？诶，我是P标签中的什么呀，死SPA啊，我是P标签中的死SPA，好，那现咱们这样吧，我不写这些字了，直接都删了啊，咱们就写这么几个字，诶，那现在我们就直接在死SPA里边写字，其他的div里还有P里边我们都不写字了，那现在我们来看他们之间的一个关系，诶，那我们来看那div和这个P元素它们什么关系。

哎，是不是父子关系啊，Div是P元素的这个父元素，P元素是div的子元素，诶，那死SPA和P元素什么关系，是不是也是父子关系啊？诶，P元素是我们死SPA的负元素，死SPA是P元素的子元素啊，子元素，所以接下来我们要说的是一个什么呢？是一个这个元素之间的一个关系，元素之间的这个关系，哎，什么关系？那这里边我们来说说什么呢？哎，第一个关系我们叫什么呢？叫做负元素，我们说什么叫做负元素，什么叫负元素？诶，我们叫什么呀？叫做直接包含我们这个子元素的元素啊，负元素叫什么呀？叫直接包含子元素元素，所以这边我们来说什么呀，我们说div是P元素的什么呀？负元素为什呀？因为div是不是直接包含P元素，哎，那我们说div是不是死半元素的负元素不是为什么？它是什么呀？它是间接包含吧，它是包含了P元素，而子SPA是在哪啊，是不是在这个P元素里边啊，而这样干嘛呢？我在这个里边，Div里边我再写一个SPA，我是什么呢？我是div标签中的败，那么说了这个SPA是不是div的子元素，是了吧？哎，这就是一个直接包含，所以什么叫负元素，直接包含子元素的这个元素，那我们说什么叫子元素呢？什么叫子元素？哎，直接被复元素包含的元素啊，直接被复元素包含元素，你会发现这个东西感觉说起来像什么呀，废话一样是吧，但是这确是。

这是在的什么呀，真理，因为它这个关系是不是都得相对来说的呀，说你是负元素必须得什么呀，相对于子元素来说，说你是子元素必须得干嘛呀，相对于负元素元素，所以叫什么呀，直接被负元素包含的元素叫做什么呀？子元素，也就是说我这个死SPA是什么呀？是div的子元素，P也是div的子元素，这个死SPA是谁呀？是P的子元素啊，子元素，诶那除了这个我们来看，那我们来说这个死SPA和div什么关系？

诶，叫做祖先元素啊，这个div我们称为这个死SPA的什么呀？祖先元素，而这个死SPA我们称为什么呀？这个div的什么呀，后代元素，诶，那问题来了，诶我能不能说这个div是这个P元素的组片元素，可不可以呀，可以为什么呀？我可以说我的父亲，他也是什么呀，也是我的祖先对吧？诶也是祖先，父亲爷爷太爷什么，再往上老董宗是吧？是不是都可以说是祖先呀，只要你是你的这个长辈都可以说是你的祖先呀，所以注意副元素也是什么呀，祖先元素啊，副元素也是一个祖先元素，所以这里边没有说感叫什么呀祖先元素什么叫祖先元素啊，叫做直接或间接包含后代元素的什么呀元素，直接或间接包含后代元素元素，也就是说我div既是死SPA的子限元素，是不是也是死SPA的负元素啊？诶，而这个div是不只是我。

它里边这个磁粑的什么呀？祖先元素啊，祖先元素直接或间接都算什么呀，都算是祖先，那后代同理，后代元素叫什么呀？叫做直接或间接被什么呀？被祖先元素包含的什么呀，元素，诶那我们说了祖先元素，我们说负元素也是祖先元素，那同理，我能不能说死SPA是div的后代，不是，我能不能说P是div的后代元素是不是可以呀？诶所以这要注意子元素也是什么呀，诶后代元素，所以祖先和后代元素的概念干嘛呀，更大一些啊，它的概念更大一些啊，主限元素，还有这个后代元素，然后接下来我们来说还有一个关系，但是我们今天先不用，但我们也说一下叫什么呢？叫做一个胸弟元素，那么说这里边谁跟谁是兄弟，哎，死SPA和P是不是兄弟啊，哎，兄弟，那我们这再来写一个，来一个死SPA这再来写。

SPA，诶，我是这个body中的SPA元素，诶那我们来说这个SPA和div什么关系？诶是不是也是兄弟元素，那怎么就能判断他们是兄弟元素，怎么说这俩人是兄弟啊，哎，他俩爸爸是一人，这俩是不是兄弟啊？哎，这兄弟，所以什么叫兄弟元素，叫做拥有哎相同副元素的这个元素叫做什么呀？叫做哎，兄弟元素，哎，那我们说拥有相同祖先元素的能不能叫兄弟？哎，不能拥有相同祖先元素没准是爷俩是吧？哎，没准爷俩啊，所以注意这个关系，这么五种关系，父元素，子元素，组先元素，后代元素，兄弟元素，这几个关系一定要干嘛给它搞清楚了啊，搞清楚了好，那现在我们来写这这这搞这玩意儿有啥用啊，其实这个用处还干嘛呀，还挺大的啊，这东西你要能搞清楚了，咱们往后学就好学了啊，来写一个style白签，我们还是回到我们这个样式来，那现在我来。

干嘛呢？我要为我们这个div中的SPA设置一个颜色，为什么呢？为绿色，为div中的SPA设置一个颜色为绿色，那我这么写直接来一个SPA，然后来什么呢？Color，来一个这个GRE音，诶咱们来个green yellow吧，我这一保存，诶，那这是不是叫给我们这个div中的SPA设置一个这个颜色为绿色呀，但是这么写对不对？诶我这一保存一看于一行，诶是全都变成绿色了吧，而我要求什么呀，我是不是只要求设置我div的SPY呀？诶那我们来看看哪是Di这个是吧，这个是吧，那这个是不是这个就不是了，这是body里边了，对吧，我只想要div里的SPA，那么来说，那么说我要为div中的SPA设置一个颜色为绿色，那么说我的这个div和。

但他们是什么关系啊，是不是祖先和后代啊，哎，SPA是div的后代，也就是说我要选中的是div的后代元素SPA，而他的兄弟元素SPA我要不要不要，那这里边就要说到我们一个选择器叫什么呢？叫做后代元素选择器来，说到作用叫什么呢？叫做选中我们这个什么呀。选中我们这个指定诶元素的什么呀？诶后代元素啊，指定元素的指定后代元素啊，指定元素的指定后代元素，那怎么写，直接来说它这个语法，语法怎么写的叫什么呢？叫做祖先元素，然后干嘛呢？然后空格，然后是后代元素，然后来一个什么呀，大块，这是我们这个代码块啊不是这是我们这个生命块，诶那这里边中间用的什么呀？空格，诶那注意了，那我们怎么写，我这个需求里组先人就是谁div直接来一个div来一个什么呀，空格，SPA这表什么，这是选SPA还是选div，诶SPA注意这个叫做后代原子选择器选的是什么呀？Div里边的死SPA，那包括什么呀？包括子元素SPA还有什么呀，是不是后代元素，哎，后代元素SPA啊，也就包括子元素，但是我这一保存，我们来看一刷。

除你诶你看最后一个变不变，诶不变这个是什么呀，这是兄弟是不是就没选中啊，哎，没选中啊，所以注意这是叫做一个后代选器，而且你要注意后代元素选择器也会同时选中什么呀，子元素啊子元素诶那来看了我这样，我把这个死SPA也放到一个div里，你们说它变不变，变不变来我这一刷新走，你是不是也变了，为什么呀，它是不是也变成div的后代元素了，所以它的要求什么呀，只要你是div的后代函，我是不是就选中啊，那管不管你是哪个div啊，不管那怎么办呀？诶我这来一个，我给它加一个ID等于什么呢？等于一个de，我要选中什么呢？选中ID为DE1这个div的后代元素死SPA那怎么办呀？哎，我这就不能写div了，选什么了，星号啊井号啊，井号一个第一保存一刷新走你是不是就行了呀？哎，所以注意啊这个。

选择器组先元素后代元素，它们是干嘛呀？它是可以混合使用的，你用什么呀？ID选择器也行，用元素选择器也行，用什么呀，类选择器也行啊，可以换着用啊，可以换着用好这也是我们说的这么一个，然后再看，那这里边其实我们这个还可以更FLY一点，那现在我要干嘛呢？我要选中我们这个ID为第一叫什么呀？Div中的什么呀？P元素中的死败元素，诶我要选中ID为第一的div中的P元素中的什么呀？死败元素，这能看懂吗？我要选的是谁？是这个死SPA吧，而不是什么呀，是不是而不是外边的死SPA呀？那这东西我怎么写？诶直接来个井号第一，然后空格来一个P，再来一个空格来个什么呀，死板哎，这表示什么呀？这是不是表示我要。

找的是后代的。后代呀，我要先找到ID为第一的div的后代元素P元素，再找到这个P元素的后代什么呀，磁SPA，诶找到后代的后代，其实这东西我可以简写，直接写什么呀，直接写个P是不是就行么呀，但是注意肯定还有要求，你这个P元素还得是什么呀，还得是第一的什么呀，后代元素啊，后代元素来我们这写一个，直接改一个，放size来个50个像素，我这一保存一刷新走，你是不是只有它变了呀？诶，为什么呀，因为上边这个div它是P的后代元素吗？不是啊，所以注意我这个后代元素是不是可以多写，多写多个呀，我可不再写啊，我再来个再来个四败，再来个四败，再来个SPA行不行，只不过没有，但是这么写没问题，就是找什么呀，找后代的后代的后代的后代的后代，你说我这关系是不是可以无限复杂呀，但是注意尽量不要这么写，因为这么写干嘛呀，性能太好啊，尽量不要这么写，以后我们再去考虑性能问题，这个东西尽量不要写的什么呀，太长。

选择器越短越好啊，越短越好，好这是我们说一个后代元素选择器，那然后再来说，我现在又不想选这些SPA了，我想选中什么呢？我想为我们这个div的子元素SPA设置一个背景颜色，为什么呢？为。

黄子。诶，我要选中div的子元素死SPA，那我一想，我这么写呗，Div SPA。来一个来一个background color来一个行不行，这边成什么了？这是变成div的后发现什么了，是不是所有盘都变了，这个只要谁呀，只要子元素，那这个玩意儿，也就是说我要要不要他不要他说白了我要什么呀，只要这个儿子，要不要孙子呀，不要这个孙子，孙子重孙子，玄孙子都不要，只要什么呀，只要儿子选中子元素，那这里边怎么办呢？下一种我们叫一个子元素选择器啊，子元素选择器叫什么呢？作用选中我们这个指定负元素的物元素的这个指定子元素啊，指定子元素来我们来说一下它这个语法，语法是怎么写的，语法首先是我们这个负元素，哎，如果是空格的话，是不是找的后代元素啊，这不用空格了，用一个什么呢？大于号啊，用一个这个大于号来连接。

也也就是说我这div我中间不用空格了，直接写一个什么呢？直接写一个大于号啊，直接写这么一个大于份，这表什么呢？找我们这个div的子元素败我这一保存，咱们来看一刷新，你看中间变不变没变，为啥呀？因为中间这个是什么呀？是P的子元素吧，诶是P的子元素，所以大于号表示什么呀？表示找子元素啊，表示找子元素，那我能不能这么写SPA，下边再大于号再写SPA行不行？哎，是不是在找span的子元素SPA呀？诶可以这么写，但是尽量不要写太长了啊，不要写太长了，好，这是我们说的这个子元素氧机，还有一个后代，后代用的是这个空格子元素用的是这个什么呀？大于号啊，这两种选项器我们都会用的比较多，但是用的比较多的谁，实际上是谁呢？后代会比较多，子元素相对来说没有那么多，为什么呢？因为子元素这关系干嘛呀，太容易改变了，我稍微在这边套一层，它是不是就不是儿子了，哎，所以子元素呢，相对来说没有后代用的那么那么多，还有一个问题什么呢？我们来。

看一下啊，没有去看一下它这个兼容性问题，那怎么去看兼容性问题，什么叫兼容性问题啊，所谓兼容性就是问题，就是我们说这个东西在不同浏览器里边的支持程度不同，那我们刚才测的是谁啊火狐，火狐里边是不是完美支持啊，哎，支持的很好，我们来看谁呢？诶先看Chrome吧，Rome这块呢，也没问题对吧？你看背景颜色变了就没问题了啊，背景颜色变了就没问题了，然后看谁呢？看我们这个IEIE，我这个是IE11。是不是也没有问题啊，哎，也没有问题，但是我们工作的时候往往其实不会兼容IE11，往往会兼容什么呀，低版本的IE，比如说我们要兼容IE8，可能可能再古老一点项目，我们需要兼容IEIE6IIE6可能还有IE7的情况，那这一块我们要怎么办？我们要怎么测试IE7啊，那你要知道我们WIN7里是装不了I7IE6的，你怎么办呢？那首先我们来说一下，你按F12，我们IE11或者说IE8这块都有一个什么呀，开发者工具啊，开发者工具，开发者工具这块都有这么一个兼容性的这么一个调调整，你看这是一个这个edge表示什么呀，表示我这个版本是一个edge，我们这个IE什么呀，11这个版本，那我干嘛呢？我这一点这箭头你看是不是出来一堆版本呀，十九八七五是不是都有啊，那这块我一点十表示什么呢？表示我这个浏览器将会以IE10的这个模式去干嘛呀，去运行，那我们发现通过这个我是不是就可以来测试I10的兼容性了，我们来看I10有没有问题，没有问题来直接看IE8 ie8没问题吧。

哎，没问题，甚至你可以看看什么的，看看IE7走你诶I7是不是也没问题啊，你看这背景变黄了就OK啊，变黄就OK，诶但是我们这IE5有没有必要测试了，没有必要测试了啊，IE5应该是。

应该是WINDOWS2000或者WINDOW98那个年代的I5基本上已经没有人用了，我们最次最次的项目也就兼容到谁了I6了，诶你要他要是真有让你兼容II5的，你可以掐死啊，掐子没有这种情况，但是问题来了，你看这里边有没有模仿IE6的呀，没有，为什么没有啊，诶因为这个微软这个IE6吧，特别恶心，微软的这几个浏览器吧，六七八九十，包括十一一个浏览器一个样，他们自己都干嘛呀，互相都不兼容，但是他还要求我们去兼容他这个浏览器，所以这块很恶心，而且他这边还没有给我提供什么呀，没有给我们提供测试方式，那我们就得干嘛了，使用一个其他的软件来测试，那这个软件呢，我也发给你们了，这里边我们有一个软件工具，有一个浏览器这里，诶不在浏览器在这儿有一个叫什么呢？IE tester，这是用来测试我们这个IE的一个兼容性，一个软件，你来你就直接点击下一步，下一步安装就OK了，但是这个软件在某些这个WIN10里边兼容性不是特别好。

啊，兼容性不是特别好，所以你装了，你如果你WIN10装了，你用不了，那你也别别追求用它了，就别用了，你用怎么办？你就实在不行，你就用这个IE5啊，偷着测子IE5凑着测的，你会发现我一点IE5这黄色背景是不是没了呀，看见了吗？IE7的时候还有呢，一到IE5是不是就没了呀？哎，你可以用它来代替测一下来，那这里边我们来说一下IE test怎么用，装完了以后你会看到这么一个图标，IE test专门用来测试我们这个IE浏器的，来点开这块，我们会发现它这有一排浏览器，从IE5.5 ie6 ie7 ie8 ie9 ie11是不是都有啊，你想测谁你就点谁，那我们要想测谁啊，是不是想测IE6啊，直接点它，那现在这就是一个模拟的IE6浏览器的一个环境，然后呢，我直接把地址粘过来，然后一运行，诶，那现在这就是IE浏览器的IE6这个浏览器的一个运行状态，我们发现什么黄色背景还有没有了，哎，没了，为什么没了。哎，我们这用什么选中的败是不是子元素显示器啊，哎，子元素显器，而在这个IE6里边，这个样式并没有干嘛呀，并没有生效，那为什么呀，IE6及诶以下的浏览器干嘛呢？不支持我们这个子元素反择器，说白了这个玩意儿IE6它不认识啊，它不认识，所以这个东西如果说你工作的时候，你的项目需要兼容IA6这个东西你就干嘛了，你就别用了啊，你就不要用了啊，就不要用了，好，这是我们说的兼容性问题，所以这里边你要测试兼容性的问题的时候，尤其是测验I6可以用我们这个IE test，但是注意这个东西它准不准呀，它不全准，它只是一个模拟的IE6，有一些情况，它跟我们这个IE6效果嘛呀，并不一致，所以这个的测试结果仅供什么呀？仅供参考，那仅供参考，那我怎么测呀，具体的测试一般由谁来完成啊。

都测试来完成测试干嘛呀，测试它会直接就不装WIN7了，直接装个什么呀，装个叉P，叉P里装个嘛呀，装IE6，然后干嘛呀，给你给你测试啊，给你测试，但是现在呢，这种项目一般你们可能赶的赶的机会呢，没有那么多了，因为这种项目相对来说比较比较少了，什么情况会比较多呢？假如说你以后工作了，你的项目是给谁做的呀，给一些国企给一些什么呀，政府机关做的项目，那一般都会兼容IE6，为什么呀，因为这帮人的电脑都干嘛呀，比较老，而且一般系统都是什么呀，都是叉P啊，都是叉P，叉P呢最高支持到IE7，你想装IE8你都装不上，那你让这帮人装火狐呢，他肯定不装是吧？哎，Pro模肯定不装了，他一般就是什么默认浏览器了不地了，用了360啊了不0360，所以这种项目一般我们都需要去兼容I6，但是希望你别改这种项目兼容I6会干嘛呀，会很痛苦的是吧。

很痛苦的，所以注意了，一定要注意了，你在工作的时候，你要接到什么呀，需求下来了，给你一个需求分析的一个文档，让你去做页面啊，写页面什么的，写的时候你一定要先问清楚了，问什么呀，我们做这个项目要到底要兼容。

哪些浏览器，那我们说会不会我做一个项目要兼容所有浏览器啊，没有那样的啊，没有那样的，我们一般都会兼容几款，比如说我们说了兼容IEIE6兼容IE8，兼容火锅，假如说举个例子啊，这几款，然后你在写页面的时候，你只需要什么呀，考虑这几款浏览器的一个什么呀，兼容性不需要你考虑所有的，但是一定要问清楚了啊，一定一定要问清楚了啊，你像，但是呢，有的时候干嘛呀，即使你问清楚了他也不行，为啥呢？你像以前我们，我在公司里工作的时候，就是写一个项目，写项目之前呢，我先问是吧，先问清楚了，我说诶诶领导啊，咱们这个今天做这个项目兼容哪些浏览器啊，我说了咱们这项目没事，咱们这个部门都是咱们这个客户都升级了是吧，咱们就兼容。

歼容A8就行了，诶，尖容二行了，我听了这么高兴是吧？兼容A8其实比兼容A6干嘛呀要轻松很多，诶，然后我就下去写去了，是吧，拿A8当参考浏览，当那个标准浏览器就去测了，好，写了写了两个月，可算把项目写完了是吧？写完了干嘛了？开始要干嘛了呀，要测试了是吧？要测试了，好，这孙子找我来了，哎，我说呀，不行。咱们这个客户啊，用I6的还挺多，咱们干嘛呀，咱们还得兼容I6。我都要疯了是吧，我当时我就要刀，我就给我就我就捅死他了，你知道吧，我写了两个月，我写完了你然后我都是按照IE8的标准写的，结果你告诉我要兼容IEIE6了，就我那个页面吧，你要是IE8打开啊，非常完美是吧，非常完美一拿IE6打开。完了这个跑那儿去，这跑那儿去，这跑那儿去干嘛了，就完全没法没法看了，然后你一看他也跟我，跟我说完这个事儿以后，那天我们改bug的时候，他有一个bug平台知道吧，他会把那个你一天所有的bug给你提到那个平台上，我一看我这个平台就刷屏了，一天给我提了30多个bug。

哎，你就想吧，这一礼拜我就没干别的，就天天去改，几乎等于我重新写了一遍啊，重新写了一遍，所以你们在开发的时候一定要把这个需求问清楚了，到底兼容什么是吧？到底兼容什么你最好跟他签协议是吧，你要改我就掐死你是吧，但是也没用是吧，但是也没用，最好跟人家去沟通好了啊沟通好了好，那这是我们说的一个啊兼容性问题，兼容性的我们就可以拿这个东西测试，如果说这个东西测试的时候，如果你非得兼容I6的话，最准的话，你可以装一个什么呀，虚拟机去测试，虚拟机装一个这个虚拟的一个叉P啊去测试，好，那这个呢阶段，但是咱们现在啊，咱们主要学的是什么呀。H5啊H5，像我们要做一些H5，主要是做一些什么呀，移动端的项目偏多，那像那种移动端的用不用去兼容IA6了呀，不用了，手机上没有IE6啊，手机上没有IE6，所以你会很很幸福，手机上有IE都干嘛呀，都少了，所以如果手机浏览器的话，一般我们只需要兼容我们那个chome，或者还有那个叫什么阿里那个叫UCUC啊UC浏览器，可能这两个会兼容的会比较比较多一点，所以如果你是移动端的话，你就不用去考虑A6了，但是咱们这所以以后咱们过了这十天吧，学完这个m mrci的基础，咱们以后就不再去想这个什么呀，A乐的事儿了，那这两天呢，我们先考虑考虑有一些爱性的兼容性，我们主要是讲一些什么呀，思路，但是也不作为什么呀，不作为重点，主要是避免你进入一些什么呀，奇葩的公司啊，奇葩的公司好，那这里边我们是说这么多吧，这里边主要说了两个选择器，一个是我们这个子元素，还有一个是后代元素啊，那这边主要是把他们关。

你给它搞清楚，搞清楚好，这里边我们来停一下。