尚硅谷前端基础 (30)

刚刚我们介绍完了我们4S的基本语法啊，了解到两个东西，一个叫做选择器，一个叫做我们的声明，那我们先从第一个入手，我们先来学习选择器。那关于选择器呢，我还是新建一个文件，新建一个文件，我们叫做一个零三，诶CSS选择器，我们先说第一组，我们先说我们这个常用选择器，因为选择器有有很多是吧，我们先说第一组常用选择器点里面，呃，常用选择器指哪部分呢？其实你打开文档。文档的最上边会有一个，这个叫selects，那其实我们所说的常用选择器。主要指这组。啊，主要制度它有一个simple selector是吧，简单的啊，简单的选择器啊，我们就不看它了，我们直接说吧，啊，那在这个页面呢，我先给他写点代码啊叹号我们这儿来直接给它运行起来。

运行起来，我这写点东西啊，写点东西嗯，还是写点这个P标签啊，P标签第一个叫做一个少小离家随便写上就行啊，少小离家老大回啊，我直接复制。呃，Out，加shift啊加下啊复制，呃，这个改一个，这个叫乡音无改鬓毛催，然后这是哎，儿童相见不相识啊，然后这个是笑问客从何处来。对，然后这个是这个叫秋水共长天一色啊，落霞与孤鹜旗帜。啊，简单写一下啊，我们写这么几句诗啊，写到这儿一共是2466个东西啊，那在这里边我们就来通过CSS来给他们设置样式啊，我这里边我就等于我就创建一个个需求吧，我们先说第一个，我先干嘛呢？诶先第一个需求。

诶，将我们这个所有的哎，所有的这个段落哎设置为什么呢？设置为红色啊，将所有的段落都给它设置为红色，那这一块我们要怎么做，所有段落，那段落是不是就是就是P呀，哎就是P元素，所以这个时候所有段落其实就将所有的P标签，所有的P元素设置为红色啊注意这个红色指的是我们这个字体的一个颜色啊，字体颜色，所以这个时候我们要说的是我们第一个选择器叫做一个元素选择器啊，元素选择器，元素选择器它有什么作用，它可以什么呢？它可以根据我们这个标签名来选中指定的元素，非常简单，就是根据标签名来选的标签名，我们来说一下它的一个语法，语法呢就是标签名，语法就是标签名，然后后边跟着一个大块，我们直接举例子，那举例。

问的就是比如说P大块选中页面中的所有P元素，H1大块选中页面中的所有H1 div大块选中页面中的所有div，就这么简单，那我们要所给所有的段落设置一个红色字体，那我们就先要写一个P，这表示所有的段落，然后大块写我们代码块，我们这需要一个color，叫做一个red，然后直接一保不用保存了，一刷新一看是不是就变成红色了，哎，所以这个叫元素选择器，刚才我们已经演示过了，我这写一个啊，我是标题，这东西对标题会不会有影响，不会，你要想对标题有影响，你再写一个H h1 H一来一个color，我们来一个这个诶，Green，那这个时候H1才会变成绿色，也就是说元素选择器就是根据边名上选的，你想选谁你就写谁名，你想选div就选div，想选SPA。

就写SPA想选P元素就写P就完事了啊，叫做元素选择器，用的会比较多啊叭较多，但是元素选择器它也会有一个显而易见的问题，诶我们说了CSS有一点很方便，我写一个P呢，就可以把我页面中所有的P元素全都选中，这是它的优势，这是它方便的地方，但是同时也是它的一个不那么方便的地方，因为他一选就选中所有了，那假如说我现在有这么一个需求，我直接往下写了，我把上边这先注掉啊，把它注了不要了，样式也不要了，有一个什么需求呢？哎，我希望啊将将我们这个儿童相见不相识设置为红色，比如说我要将这句话设置为红色，那这块怎么办？来我同说老师你还写个P不就完了吗？P我们直接来个color，这样写有没有问题？Color，我们直接来个red这分号，诶，的确儿。

相见不相识变成红色了，但是与此同时给我们带来一个问题，不仅它变成红色了，其他所有P元素是不是？也变成红色了，哎，虽然满足要求了，但是我们满足要求的同时是不是影响到其他元素了，所以根据这个提议来看的话，其实就是让你把那句话变成红色，而别的他是不是应该还是该什么颜色，它就是什么颜色呀，哎，所以这个时候我这么写很明显不行不行啊，这么写肯定不行，我应该做的是什么，做的是把。这一个变成红色啊，把这一个变成红色，那要怎么做，那要怎么做？哎，首先我们又面临这个问题，这个P元素跟其他P元素现在看起来没有什么区别，对吧？它都是P元素，而我又想单独选中它，不选中别人，那所以这个时候我是不是要给它加一个这个唯一的一个标识啊，哎，唯一的标识，所以这个时候我可以直接给这个P元素加上一个ID，还记得ID吗？ID我们说了是一个元素的唯一标识，每一个元素都给指定ID，大家注意ID的值是不能重复的，所以我给这个P指定一个ID，叫做一个red，随便写一个啊，就red，那表示说他现在就有这个ID了，别人有没有，别人就没有了，那这个时候我能不能通过ID来选中这个元素呢？哎，当然可以，这个是我们说的第二个选择器，叫做一个。

元素选择器啊，元素选择器它的作用是什么呢？哎，不是元素啊，叫做一个ID选择器啊，N选择器它什么作用，作用就是根据我们元素的ID属性值，哎，选中一个元素一定注意它一定是选中一个元素，因为ID是不能重复的，有且只有一个，所以他一选肯定只能选一个啊来说一下它的语法，语法呢我们来看一下，就是井号，然后是ID属性值啊，然后大块我们的代码块这个这个个这个生明框就完事了啊，然后我们来说一下，举个例子，我要选中ID为box的，那就是井号。

Box我要选中ID red，那就是井号red啊，井号开头表示是ID选择器，那所以这里边我要选中的话，那我就直接什么呢？哎，我直接写一个是写一个叫做井号一个red，这就表示选中那个。ID为red，后边还是跟着一个大块，在这里边我就可以直接给它来一个color，叫做一个red，随便写一个啊，一保存是不是只有它变红了，别的都没变呀，哎，井号right表示什么的，ID为right，你说这一块的值你要跟这个是是一样的，你说我这要是ABC，那你这就得九号ABC。

懂这意思吧，哎，根据ID值去选啊，ID值选好。这里边我们刚改回来吧，改回叫right，但是这个right跟这right没关系啊，Right好，这个是我们说的第二个选择器，叫做ID选择器啊，ID选择器好注掉。接着往下说，往下说还有什么需求啊，还有什么需求，那现在呀，ID是好用，但是ID也有一个问题，ID同时只能给一个元素，你说我要是想给第二个元素也加一个ID，等于一个red的，那这个事儿我们就不可预测了，到底是第一个红还是第二个红，有些浏览器可能处理方式不一样了，我们来看看吧，这个Chrome可能是第一个会红，诶你看Chrome在这儿ID选择器，它是不是还给你让让两个都红了，哎，等于现在在Chrome里我们的ID还可以重复，但是我们来看看别的浏览器啊，这个我也没之前我没试过是吧，我们可以试一下，我们看看IE。

IE也是两个都可以让你红对吧，都可以让你红。来看一下老版本的IE9，诶IE9也没问题，那这里边其实基本上别的浏览器也不用试了，那就基本上说从CSS角度讲，如果你设置了重复的ID，它会让这些重复ID都变成一个什么呢？都变成一个红色，那这是不是就意味着我的这个ID在哪都可以用的，也就说我的ID是可以重复的呢？哎，注意不行，一定记住了，虽然在这儿我写了两个一样的ID，并且设置效果也OK，但是注意这样写也是不对的，为什么？因为即使在CSS这行，这个ID以后我们可不仅仅是CSS会用，我们的GS也会用到ID，那如果GS里边的ID它肯定不能操作两个，一定是只会负责一个，只会找一个，所以像这种情况是绝对不行的啊，绝对不行的，你说老师是可以啊，没没问题，没问题也不能写，因为。

这样写很容易出现一些隐患，你会非常的被动，非常的不好处理，所以即使可以也不能这么写啊，效果行也不能这么写啊，所以一定注意ID是不能重复的啊，ID不能重复，好，那我们再回过头来说，哎呀，那现在我就有这样一个需求，比如什么呢？比如啊，我要做这么一件事。江，我们什么呢？哎，因为我这个秋水共长天一色落家孤鹜齐飞，这不是一首诗吧？哎，江，我们这个，哎，秋水，诶，这点点和什么呢？和我们这个落霞。

点点点啊这两句话，哎的颜色，诶设置为什么呢？设置为蓝色啊，设置蓝色，将这两个玩意儿设置成蓝色，这个玩意儿怎么搞这样怎么搞，那么说了现在。你得选中两个，哎，选中两个刚才说了，像我们刚才那种用ID也行，但是ID又不能不能重复是吧，最好不要重复，那我们怎么办？诶，那我们就需要用一个别的属性来代替ID，也就是说这里边我们要说一个新的H填边的属性叫做一个class啊class class是我们H天猫一个属性，诶是我们这个标签的一个属性，每个标签都可以设置啊，是标签属性，它和什么呢？它和我们这个I，它用它和我们这个ID类似啊，它和我们这个ID类似，那不同的是什么呢？

哎，不同的是。哎，我们这个class class可以什么呀？可以重复使用啊，重复使用什么意思，也就是说我这个class叫A了，另一个元素class也可以叫A，所以在这儿我就可以给P起个class，我们叫一个蓝色对吧，我叫一个blue，这个我也给他起个class，我叫做一个录，他们的特点就是可以重复，不像ID是唯一的class可以重复的，所以ID我们举例子，像我们这个身份证号，而这class呢，有点像我们这个班级啊，Class本来就是班级的意思，有分类，有班级的意思，对吧，它本来就像我们这个班级，就是它用来什么呢？我们可以通过class属性。哎，来为我们这个元素分组，说白了你哥俩class的值是一样的，OK，你俩是一组，你俩一个班的，哎，那就你俩就属于同一类class就用来分类的，所以现在我是不是能通过这个blue这个class来选中这两个玩意儿呢？因为它只有他俩有这个class嘛，哎，那这里边我们就可以直接写了，叫做一个。

类选择器，或者也可以叫做class器，作用叫根据元素的CLASS10分之哎来选中一组元素啊，选中一组元素一般都是多个是吧，一般都是多个语法呢，哎，它ID用的是井号，Class用的是点class属性值，其他的都一样啊，例子我们就不举了，我直接写了，那现在我要想选中class为blue的，那我就直接写一个点blu，然后大块我们直接来一个color，来一个这个blue，这样一保存，那你现在来看这两个是不就变成blue了，为什么只有他俩变了，因为只有他俩有这class，我给别人加一个行不行？诶比如说我给这个这个P加一个，或者我给上边这H1加一个，这一保存。

诶，这H1是不是也变成这个蓝色了，哎，变成蓝色了啊，所以只要有blue这个类的元素就会变成蓝色，因为我们是通过类选择器啊，所以井号开头的叫做ID选择器，点开头的叫做类选择器啊，叫做类选择器，这是我们这两种啊，一个是class，还有一个是。哎，ID，那这两个东西我们来想一下，是ID更强大一点，还是class更强大一点，诶很明显class更强大一点，为什么？因为ID是绝对不能重复，当然你说刚才你当时你这刚才已经重复了，对吧？只是现在浏览器它可以支持你去重复，但并不是所有地方我们说了GS可能就不支持，所以ID绝对注意你写的时候一定不要重复，ID不能重复，而class可以什么呢？可以重复，所以意味着我class选择器我可以选多个，但是ID是不是不行啊？哎，并且你class如果我说我只想选一个行不行啊，也行，我就写一个，别的我不写是不是跟ID就一样了？哎，所以一般开发的时候，ID选择器相对来说用的比较少一些，Class会相对多一些，所以我们以后用的话，也主要是用这种class选择器啊，也主要是用这种class器，好，那这个是我们说的这几个选择器，然后接着往下说，接着往下说这个。

Bus还有一个特点啊，还有一个特点我们可以什么呢？我们可以同时为一个类诶一个元素，诶指定多个class啊，指定多个class属定，那你像现在我的这个H1吧，它有个class叫补录，那这时候我可以干嘛呢？我可以再起一个，比如说我叫做一个ABC，那这个时候H1就有两个class，一个class叫blue，一个class叫ABC，那意味着我既可以通过blue选中它，也可以通过ABC选它，所以我们来试一下，我直接点一个ABC，然后呢，我们直接放size来个30像素，你看这个字是不是也变了，我换一个吧，换一个20。

这字是不是就小了，哎，字就小了，所以这个里边注意了，也就是说我的这个class，也就是说我多个拉，我给一个元素可以同时写多个，你写俩写三，写十个都行，只要注意多个class之间使用空格给它隔开就行啊，多个class之间使用空格给它隔开就OK了。好，这个是我们说的两种，一个是ID，一个是class，还有一种，还有一种我们叫什么呢。叫做通配选择器。

通配选择器，通配选择器哎，我们来说一下它的作用，就是选中我们这个页面中的所有元素啊，选中页面中的所有元素，语法直接写了，语法就是一个星号，所以这里边我们可以直接写一个星号，然后来一个大块，这什么意思？这就表示我的里，我这个网页里边有一个算一个，全都选中啊，全都选中，所以这个时候我来一个color，来一个red，你们来看效果，无论是h he也好，还是P也好，他们是不是都变成红色了，哎，为什么？因为星号表示的是所有元素啊，表示所有元素好，这就是我们这么几个选择器啊，回顾一下，一共说了应该是四个啊，第一个叫元素选择器，根据元素，根据标签选择的，第二个我们叫做一个。ID选择器啊，根据这个ID使用值选择的，然后第三一个叫做哎，Class类选择器，最后一个叫通背选择器啊，这是我们四个最基本的选择器啊，我们来评一下。