24.尚硅谷_HTML&CSS基础_常用选择器.avi原创

这些东西说完了，接下来就言归正传，回到我们这个CSS，我们说了CSS整个语法其实就包括两个部分，一个是我们这个选择器，还有一个是我们这个各种各样的那些，诶样式，也就是我们这个生命块对吧？那所以第一步我们先来学一下什么呢？先来学习一下我们这个什么呀，诶选择器啊，选择器零三，我这直接叫一个我们这个，诶常用的一些什么呀，选择器啊，常选择器，那这块你注意了，现在我这儿起名的时候，我就用什么了，用中文了，用中文的好处就是你一看名儿你就知道我里边写什么东西，对吧？但注意在工作里边能不用中文就尽量干嘛呀，不用中文你用中文路径容易出问题啊，能不用中文你就尽量不用中文，但是我现在咱们上课的时候，我就拿这东西去演示一下，这样比较直白一点啊，好，我们来说一下我们这个常用的一个选择器，那这里边我们来写一个title，这里边我们叫一个这个常用选择器，那这边我先写点东西吧，来几个P标签，P标签写点。嗯，写个十吧，除禾日当午，我这刚写两遍，你们怎么就有反应了是吧？日当午，诶来写一个这个就就就当误吧，保存现在我就写了这么几个P标签，CTRL上一运行是不是这个效果呀？哎，这个效果啊好，那现在我来写点我们这个CSS的一个样式，那样式这边我们怎么写，那我们先来说干嘛呢？我现在要做一件事干嘛呢？为我们这个页面中的这个所有的P元素设置一个什么呀，字体颜色为什么呢？为红色，我要为页面里边的所有P元素设置一个字体颜色为红色，那我是不是要选中所有的P元素，诶那这边我们用什么选择器，诶我们叫做什么呀？是不是直接来一个P就行了呀，这叫什么呀？选中我们这个页面里边的所有的什么呀，所有的P啊，所有P，这叫什么呢？这叫做一个第一种选择，我们叫做一个。

元素选择器，我们再说一遍，元素就是标签，标签就是什么呀，元素，那什么叫元素选择器啊，通过我们来说一下它的作用，哎，通过我们这个元素选择器可以什么呢？可以选中我们这个页面中的什么呀？诶选中选择我们这个页面中的所有指定元素啊真元素，我们来说一下它这个语法，语法怎么写的就是什么呀，就是我们这个标签名啊，语法就是我们这个标签名，那比如说我这来了一个诶这个P就表示什么呀，选中我页面里边的所有什么呀，所有P元素啊，所有P元素来一个color叫做一个什么呀，Right保存，然后再刷新走，你是不是所有都变红了呀？诶所以注意啊，P表示选中我页面里边的所有的P元素，来，我这来一个H1 h1写一个叫做一个悯农。

诶，写这么一个，那我现在问你了，这东西对H1有没有影响，诶我这一刷新走，你说H1还是没变呀，诶那们说了我要干嘛呢？我要选H1怎么办？是不是H1大块选中啊，哎，元素选择器就是什呀，标签名选H1就是H1，选P就是P，选div就是什么呀，Div啊就是标签名，那我来一个colorr，来一个red，一保存来一刷新走，你是不是它也变了，诶这么一个元素搅换器非常简单，直接就使用我们的标签名就可以了啊，标上名就可以了，然后呢，接着来说这个元素搅向器虽然很强大，但是它有的时候干嘛呀，它不太好，为什么不太啊，那现在假设啊，我现在干嘛呢？我想这样啊，我都住了啊，注释的快捷键选中你要注释的内容，Crl shift的鞋杠啊，CRL杠可以给它注掉，不想注了，选中它CR shift的鞋杠取消啊c shift鞋盖注释一个。

切换啊好，那现在我要再说一个需求，我要干啥呢？我要为什么呢？这样直接说吧，我要为这个P元素设置一个什么呢？设置一个字字体大小为20个像素，诶这个P元素设置一个字体大小为20个像素，那这玩意我要怎么写？诶那我一想我直接来一个T，然后来一个放size，放来一个20个像保存行不行，诶我这么一写一看是不是所有都变了呀，而我只想干嘛呀，我是不是只想改这个呀，改我们这个第三个这个P元素，那怎么办？那首先现在我们来说，这个P元素和其他P元素它有没有什么区别啊，没有啥区别啊，所以你现在你能不能把单独把它提出来啊，不能，那我们想怎么办？诶，诶我是不是让他跟别人不一样啊，诶，那怎么让他跟别人不一样啊，诶我们说了，我可以给我们这个标签是不是加上一个。

唯一的一个标识啊，哎，叫做一个ID，我们说了这个ID就像我们这个身份证号一样，它是什么呀，它是唯一的，是不能重复的吧，在一个页面里，相同的ID只能有什么呀，只能有一个，也就说它是不能重复的，那现在我给他一个ID叫什么呀？叫做一个P1啊，就一个P1，那现在这哥们还跟其他的一不一样了，不一样了，那我现在就需要什么呀，我是不是通过这个ID来选中这个元素啊，哎，愿选中这个元素啊，所以接下来我们再说一种叫什么呢？叫做一个ID选择器，ID选择器什么意思，叫什么呢？诶叫做通过我们这个元素的这个ID属性值来干嘛呢？来选中什么呀？诶唯一的一个元素一定要注意，我使用ID选中的一定是什么呀，一定是一个，为什么呀，因为相同ID的元素只有什么呀，只有一个啊，只有一个，好，那现在我们来说一下它的语法，语法怎么写呢？跟我们上午说那个朝鲜阶的有点像什么呀，井号。

后边是ID属性值啊，井号后边是ID属性值，然后来一个大块，我们这个生命块，那我现在想选中什么呢？选中ID为P1的元素，那怎么办呀？哎，是不是井号P呀，哎，井号P我们来一个这个放size来什么呢？20个像素一保存，咱们再看一刷新走，你是不是就他一个变了，哎，其他的就全没变了啊叫做一个ID选择器，它可以选中那个什么呀，唯一的那个元素啊，唯一的那个元素叫做一个ID选择器。

好，那ID选择说完了，下边我们接着来说，然后呢，我们还有个需求，我现在不仅是想让他变了，我还希望干嘛呢，让这个这个这个这三个干嘛呢，全都变，我希望这三个全都变，那怎么办？我这一想这样呗。这ID等于一个P2，这来一个ID等于一个P3，这来一个ID等于一个P4，来写吧，复制复制复制P2P3P4保存一刷新走，你是不是全变了呀，但是一看这个事儿呢，有点缺心眼是吧。

有没有这么干的呀，一看这玩意儿是不是这是我一直在复制粘贴吧，哎，没有什么技术含量，所以这种情况我们用ID就就不好了，那我们想干嘛呀，我是不是想选中同时选中这三个元素啊，诶，那我们就需要干嘛呀，那我们现在说这三个元素和其他元素有没有什么区别，没有什么区别，那我现在要体现出什么呀？我想给这三个元素同时设置样式，我是不是想体现出这三个元素是。一组啊，哎一组，那用ID能不能分组啊，ID不能分组，因为ID是不是不能重复呀？诶那我们用什么分组啊，诶还有一个属性和ID有点像，叫什么呢？叫做class，诶我们可以什么呢？我们可以为我们这个元素来设置什么呢？设置class属性什么呢？Class属性和什么呢？和ID属性类似啊类似只过什么呢？只不过我们的class属性可以重复啊，可以重复，也就是说哎，Class ID是不能重复的，而class干嘛呀可以重复，我直接写来一个class，我这叫一个P2，它叫P2，下边这个干嘛呀也可以叫P2，那现在我们来看这三个P元素，它们是不是都有一个相同的class呀？诶那我们来说拥有拥有相同class。

属性值的这个元素，诶我们说什么呢？诶我们说诶他们是什么呀？是一左元素，那现在我想干嘛呢？我想通过class这个P2是不是选中这三个元素啊，诶那接下来我们再说一个选择器叫什么呢？诶叫做类选择器，也就是我们这个class选择器，类选择器怎么一怎么怎么作用叫什么呢？叫做通过我们这个元素的这个，诶class属性值干嘛呢？诶选中，注意它是不是唯一的不一定啊，不一定选中什么呀，选中一组是不是元素啊，诶选中一组元素我们来说它的语法怎么写的叫什么呢？点class属性值，然后后边跟的是我们这个，哎大块啊跟着大块，然后我们直接来写吧，我们要选中什么呀？是不是选中我们这个所有class为P2的元素啊，哎，那怎么写呀，直接来一个点一个什么意P 22.1个P。

我们直接设置颜色吧，Color来一什么呢？Red，我这一保存，我们来看效果啊，现在一刷新走，你是不是这三个全都变了，哎，全都变了啊，所以通过class可以同时选中什么呀，同时选中多个元素啊，同时选中多个元素诶那我们这看到有两个，一个是ID，一个是class，我们说class和ID哪个功能更强大一些，哎，为什么呀，因为我们说我能不能实现ID的功能，哎，我我就写一个是不是就行了呀，其他我不其他我不叫PR，只有它叫PR是不是也能实现ID的功能啊，而ID却不能实现什么呀的功能，所以这里边实际上我们使用过程当中呢，Class会用的更多一些啊，更多一些，那好，接着来说我们class干嘛呢？它还有一个特点，我们可以干嘛呢？可以同时为一个元素设置什么呀？多个class属性值，多个值之间使用空格隔开。

那什么意思？来看这P2，我这来一个空格来什么呢？来一个hello，这边什么意思呀，表示我这个P标签，它属于两个class，它既是什么呀，既是P2又是什么呀，又是hello，那我们先说，那我这么写完了以后，通过P2这个class能不能选中它，诶我这一保存一刷新它是不是还是红的呀？诶不仅能够通过P2选上它，还能通过什么呢？诶我来这个点hello喽，来一个放它size来什么呢？来一个50个像素，我这一保存来看一刷新是不是它也变大了呀？诶所以注意一个元素可以同时设置多个class，而且干嘛呀，我们可以分别通过这些class是不是同时选中这个元素，你通过P2选也有它，通过class选干嘛呢？也有它，那我们说再多行不行，再来个ABC行不行，再来个BCD行不行行，只要用空格给它隔开就可以啊，只要用格给它隔开就可以啊，好，这是我们说的这个class。

Class好，那这里边是我们说的这么一个class选择器，然后接下来我们来说，那接下来我们要干嘛呢？嗯，我们来干这么一个事情，为什么呢？为我们这个诶ID为P2的元素和什么呢？和这个class ID没有P2 ID为PIID为P的元素，Class为诶P2的元素还有什么呢？还有我们这个H1干嘛呢？诶同时设置一个这个背景颜色为什么呢？为黄色啊为这三个元素，同时设置背景颜色为黄色，那这玩意儿怎么写？

那我一想这样写呗，井号P1背景颜色，刚才我们说了叫做一个bike brown，一个什么呀，Color为黄色就是什么呀，YELLOW1保存，现在我们一刷新走，你P是不是变成黄色了，然后再接着接着写呗，再来一个复制一个就诶叫什么呀，点一个P2保存一刷新走你P2是不是也变黄色了呀，然后再来一个什么呀。

复制一个，再来一个什么呀，再来一个H1，易保存易刷新，是不是H1也变成黄色了，哎，也变成黄色了，这能看懂吧，但是我发现这么写这不缺心眼是吧？这老说缺心眼也受不了是吧？他这么写反正不太聪明是吧？哎，不太聪明，看着是不是挺麻烦的呀，你发现它是不是只有选择器不一样，而我这个样式的内容是一模一样的呀，那我们就想了，我能不能同时为这三个选择器来设置样式呢？诶那这里边我们要说我们这个又一种选择器叫什么呢？叫做一个选择器分组啊选择器分组，那我们说通过选择器分组可以什么呢？诶可以同时选中什么呀？多个选择器对应的什么呀？对应的元素什么意思啊，我要既选中ID为P1的，同时又选中class为P2的，然后再。

选中标签名是H1的，我是要选择符合这三个，不是符合这三个条件是吧？那就是满足这三个条件元素吧，诶那我们这块叫做什么呀？又可以用我们这个选择器分组来，我们来说一下它的语法，语法怎么写的叫什么呢？选择器一，然后怎么写呢？逗号，诶选择器二再来逗号选择器N2选择A，然后再来什么呀，大号，那这样什么效果呀，这样效果是满足选择器一的和满足选择器二的，还有满足选择器N的元素干嘛呢？全都会干嘛呀，同时选中，那现在我们希望选中什么呀？是不是满足这三个选件，就是满足P1的，还有满足这个P2的，还有满足这个H1的吧？那我怎么写呢？不用这么写了，井号P1逗号点一个什么呀，P2逗号再点一个什么呀，不用点了，就直接写什么呀，H he了啊he了保存我们来一刷新。

是不是效果是一样的呀，而且比我刚才那个是不是简单多了呀，哎简单多了，那现在我问你这P1P2，还有这H1他们这三个选择器，它们是什么关系。诶，我们说有两个，一个叫病集，一个叫什么呀，一个叫交集，那这三个属于病集还是焦集，哎，是不是病集啊，我们说什么病集啊，这个是H1，这个是我们这个H2，这个是我们这个，诶诶不是，这是P1，这是P2，这是H1，那什么意思呀，只要在这三个圈里任意一个是不是都会被我选中啊，哎，都会被我选中啊，他们叫一个并解，所以这个也可以叫什么呀，叫做一个并解选择题，哎，说的都是什么呀？都是一个意思啊，都是一个意思啊，并集选择器，好了，刚才说了几种选择器了，说了一个元素选择器，ID选择器，类选择器，还有一个，哎，并机选应器，或者叫选择器分组，那接下来我们还有什么呢？还有的时候有一种更特殊的需求，我要干嘛呢？诶，我想选中我们这个页面里边的什么呀，所有元素啊，选中页面里边的所有元素，我们有一个叫什么呢？叫做通配选择器，诶它可以干嘛呢？它。

可以用来选中我们这个页面中的什么呀，所有的元素啊，选中我们这个页面中的所有元素，那么说语法什么语法比较简单，诶语法就是什么呀，就是星啊就是星，所以我这来了一个什么呢？来咱们先把上边样式啊，我都给它注了啊，都注了。掉以后保存我们来看效果啊，现在我们来看这一刷新是不是一个样都没有了呀，哎，一个样都没有了，然后我这来什么呢？我来一个。星号，诶星号，我这来什么呢？来一个这个呃，来一个这个color吧，Color来一个red，是不是设置自己颜色为红色呀，我们来看效果啊，那注意了，我这是星号，来看一刷新走你干嘛了，是不是字体全变红了，包括H1，包括我们的这什么呀，P标签，如果你有div div干嘛呀，是不是也会变红啊，哎，也会变红，所以星号表示什么呢？表示选中我们这个页面里边的什么呀，所有元素啊，星号表示我们选中页面里边的所有元素啊好，这是我们说的叫做通配选择器，叫做一个星号，然后呢，我们这里边，嗯，这些呢，选择器我们先。

嗯，再来说几个吧，再来说几个，还有一个和我们这个病急选择题比较比较像，那你现在来看啊，我们现在有有这么多东西啊，那现在我假设来什么呢？我这有一个屁标签，这叫一个锄禾日当午，然后呢，我这还有一什么呢，还有一个这个死SPA标签，SPA标签里边写什么呢？写一个诶汗滴禾下土。来保存，现在我这一刷新走，你这是我们那个SPA，这是我那什么呀，P标签啊P标签，然后这我写一什么呢？我在这儿写一个class class来一什么呢？来一个这个P3，然后呢，SPA我也来1CLASS叫什么呢？P3，现在他们两个是不是都有class为P3呀，诶为P3，现在我要做一件这么事，做这么一件事叫什么为。

哎，拥有一翁有拥有这个克plus，哎P3的拥有class这个P3的这个什么呢？弹诶弹元素。设置一个背景颜色，为什么呢？为黄色，要为什么要为拥有class为P3的死弹元素设置一个背景颜色为黄色，那这东西我要怎么写诶我来一个点P3BAG来个行不行行不行，来看效果，我这一刷新诶死变没变变了但是。

这P标签是不是也变了呀？哎，我们会发现这个玩意儿，我们只想让谁变呀？是不是只想让SPA变呀，不想这个P变，那为什么P元素也变了呀？它是不是也应拥有这class为P3呀？诶，那我这实际上有几个要求啊，是不是两个要求啊，你既得有class为P3，同时你还得是一个什么呀？是不是死SPA元素啊？哎，死SPA元素，那这个东西我们得怎么写，这东西我们怎么写？哎，我们要说到另一种选择器叫什么呢？叫做一个哎交集选择器或者要什么呀？叫做一个复合选择器，哎，或者我们可以叫什么呀？叫做一个交集选择题。诶，那现在我们要干嘛？我们要选中class为同时满足什么呀？两个条件，你的元素名得是什么呀？SPA同时你还得是什么呀？有P3这个class吧，诶那这里边我们来说怎么写它的作用，你先说一下作用，它可以干嘛呢。

诶可以选中一个什么呀，诶选中同时满足多个条件的什么呀？诶满足多个选择器的元素啊，可以选中同时满足多个选择器元素，来说一下它的语法，语法怎么写的，哎叫做什么呢？也是其实跟我们那个什么呀，跟我们那个选择题分组呢。特别的像那选择器分组，我是不是要设置多个选择器呀，但是这多个选择之间，多个选择器之间使用什么呀，逗号，而我这个呢，空格都不用写，直接紧紧的挨在一起，选择器一选择题二选择器N，那这表示什么意思呀？你既得满足选择器一，还得满足选择器二，还得满足选择器N，这样我才会选中你这个什么呀，元素能理解吗？所以叫什么呀，叫焦集，什么叫交集呀花。

圈哪个部分是交集啊，是不是中间这部分呀？哎，他们这个数组中间交交叉这部分叫什么呀？叫交集，你得同时满足我这个三个条件才叫交集呢，所以这我怎么写呀，我是不是得既得满足span，又得满足我这个CLASSP3呀，那怎么写呀，来一个spa.P3连着写spa.P3，这表示什么意思呢？我要选中你的元素，既得是SPA还得什么呀，还得拥有class p3啊来保存，我们来看效果，这里边一刷新走你诶你发现什么了，它咋不变了呀？这玩意为啥不变了？哎，这是个P元素吧，哎，这是个P元素，所以没有变，所以我们这个span.P3就表示什么呀，既得是死SPA，还得拥有class p3啊P3这叫做一个复合选择器，也叫什么呀，也叫交集选择器，可以同时指定多个条件啊，只多个选件，但是注意啊，像这种东西啊，交集选项剂用了很多，但是你看这样的写好不好，比如说我们这是不是有一个ID为P的这么一个class啊，我这么写来一个P井号P，我们先说这么写行不行，Black ground color，我们来一个red，这么写行不行？诶那什么意思，咱们先看你既得是什么呀，P标签，然后你的ID值还得什呀P1，诶读得通吗？保存看效果一刷新。

没问题吧，没问题，但是这玩意儿对不对啊，对不对啊，好不好吧，不好，为什么呀，因为我们用ID是不是已经能唯一确定一个元素了，你在这儿加一个这个元素的限制，这是不是多此一举啊，哎，多此一啊，所以对于ID感存器来说，我们一般不会这么用，这么用法都对于谁啊，对于我们这个class啊类机来说的啊，所以这种用法我们是不会使用的啊，不会使用的这种用法，哎，对于我们这个ID选择器来说，哎，不建议使用什么呀，使用我们这个复合检择器，好，那这个是我们说的这么几个，呃，常用的选问器，简单回顾一下，复合选择器同时满足多个条件，也叫一个什么呀，交集选氧器啊，然后一个叫做通配氧器，星号选择所有元素，还有一个是我们什么呀，也叫做选择器分组啊，可以分别选择满足这几个选择器的这个。

吧，元素还有一个我们叫做什么呀，诶点这是我们这个class选择器，井号，我们的这个ID选择器，还有我们这个he啊，这种P，我们叫做什么呀，元素选择器啊元素选择器，好，我们先说这么多。