尚硅谷前端基础 (33)

好，说完了，我们的这个关系选择性啊，接下来我们往下说，还有一组我们叫做。新建文件我们叫做一个属性选择器，属性选择器啊，顾名思义，它也是根我们元，根据我们元素的一个属性去选择元素的啊，根据元素的属性去选择元素的，好，我还是先给它运行起来，那这里边呢，我们再往下说之前还是再强调一下，学这玩意儿啊，一定要知道看文档，也就说你要再强调一下，去文档去哪找，也就是说你以后真正用的时候想不起来了，去哪查啊找CSS CSS selects selects，你像我们这讲的，哎，这些简单显算器，包括这个，哎这什么呀，哎加号，哎我们的兄弟，哎波浪号后边所有兄弟大于号是我们的这什么呀？子元素卷向器，这是后代元素卷向器这玩意儿啊，看着带这种皮儿的都表示现在不能用的啊，是实验的一个状态啊，不不管它了，所以这里边我们就直接说这几个是吧，刚才我们说这几个，然后还有一个是我们上面的叫做一个。

属性选择器叫做A吹六的selects啊，它是干嘛的，它是根据我们元素的属性来选选元素的啊，所以这里边我们直接来写点东西啊，我这写几个P标签，哎，P标签我们写我之前是不是写看看啊。之前我们是不是写过几个？湿对吧，把它复制过来CTRLC，然后CTRLV，然后呢，我把这些东西啊，我先都给它去掉。属性选择器使性选择器，顾名思义属性谁是属性，那你像这个class，像这个像这个ID class是不是都是属性啊，哎，但是很明显我们的属性选择器一般情况下是不需要对ID对class使用的，因为我们是不是专门有ID class选择器啊，哎，专门有这些东西啊，我就直接拿这个P来演示，那比如说我先讲一个属性，我这有一个title，诶比如说我这写一个title，我叫做一个ABC啊，叫一个ABC，那这个时候我们来看，我鼠标一放上去干嘛了？诶它这里边就会出现一个提示文字，叫ABC，所以这个title呢，是指定我们标签的标题的，你设置title以后，当你移动到这个标签上，它就会给你显示一个简单的小的提示文字，这个文字是什么？你在这个值这写的是什么，这个文字显示的就是什么啊，这是title的一个属性，我们拿它来演示一下，当然别的属性也可以啊，属性没有什么限制啊，别的属性也。

可以，所以这个时候我们来看啊，我这来一个title等于ABC，这下边呢，来一个这个title等于ABCDEF啊，然后呢，下边我们等于来一个这个title等于hello啊，等于hello，我们随便写这么三个标签对吧？给他们加了三个属性，那现在你看上面三个你一进去是不是都会出现这种提示的文字啊，哎，想要提示文字，那接下来我们要说的就是什么呢？如何通过属性来选中，那现在我说了，我如果直接写一个P的话，那直接写一个P的话，我直接来一个color，来一个orange，那这样的效果就是所有的P元素都变成了橙色，对吧，都变成了橙色，那现在假如说我想干嘛呢？我想。

让有T头属性的元素变成橙色，那怎么办呢？诶，有title头属性，也就是说你的值是多少我不管，只要你有就行，那怎么办呢？哎，在这儿我可以直接写一个中括号来，什么呢？T啊，我直接写一个中号title，那这表示什么意思呢？这就变成了一个复合选择器了，实际上这个是元素选择器，这个是一个属性选择器，这就表示什么呢？你得是P元素，同时你P元素里还得包含有title属性值，所以这个时候是不是只有前三个变成orange，后边三个都都没变呀，为什么？因为只有前三个有title，而后边的是不是没有啊？哎，就这么一个意思啊，所以这个是我们要说的第一种，我直接写了叫做一个号，哎，它是一个中号，这里边写的是一个属性名，这叫什么呢？叫选择，哎含。

你有我们这个指定属性的元素啊，只要有这个属性就行了，所以这个P啊，其实你可以省略不写，你省略不写效果也是一样的，你省略不写其实就相当于这写了一个什么呢？写了一个星号，就是任意元素，只要你有title，而我写了一个P以后就表示什么呢？哎，P元素有title头，你既得是P元素还得有title头啊，所以这是我们第一种直接写一个属性名，再来说我们的第二种，第二种呢，我后边需要属性名，这等于一个什么呢？等于一个属性值，这表示什么呢？选择含有哎指定属性，且诶指定属性和属性值的元素，也就是说这个时候要求就多了，它不仅要求你的你得有这个属性，而且你这个属性还得是指定值，所以在这我改一个，我直接来一个title等于ABC，那这个时候你看就只有第一个变。

只有第一个变成这个颜色，而第二个第三个就都没有变，为什么？诶，因为title头等于ABC，它不仅找你有没有title，还要求什么，你的title的值还必须得是ABC，那是不是只有它是，哎，只有它是，所以这个时候就是只有它了啊，所以这个等于号，就是找这种完全符合的啊，完全符合的还有什么呢？还有我们这叫做一个这个属性名叫什么呢？叫一个这个小三角等于一个属性值，这小三角谁呢？小三角是我们六上面，你需要摁住你的shift加六把它摁出来啊小三角，那小三角什么效果看着了，我还是直接写一个P，我们来一个中号TITT啊，我们直接来一个小三角，等于一个ABC啊，别这么写啊，等于一个ABC小三角，那这个时候我们来看效果，看谁变了。

哎，你看前边两个都变了，为什么前边两个都变，哎，因为ABC这块表示什么意思，哎，这叫表示以ABC开头啊，以ABC开头，所以这叫什么呢？选择哎我们这个属性值，以我们这什么呢？以我们这个指定值开头的元素啊，所以小三角这小三角这个等于就表示什么什么开头，以这个值开头就行，后边是什么无所谓，只要你前边是ABC就行啊，有开头，那我们就还有什么呢？还有这个结尾，结尾我们叫Dollar。

Dollar符，所以这是选择属性值以指定值结尾的元素啊，以指定值结尾元素，所以在这儿我还是复制一下它，我改成一个Dollar符，Dollar符ABC，那当然一个也没有，因为我们这诶当然只有第一个对吧，第一个就是ABC，那你就是以ABC开头，以ABC结尾，我换一个，我把这hello呢，我这也写ABC，你发现什么了，这个是不是也变成橙色了，为什么它也变成橙色，因为什么呀？哎，因为它是不是也是以ABC结尾的呀，哎，所以啊注意了，哎，这写的一个人民币符号的啊，Dollar符四上边的啊，我们Dollar符如果你是中文输入法，它默认就出那个人民币的符号，诶英英文输入法就出现个美元，也就是这个Dollar符一个符号啊，所以这个时候我们的属性名Dollar等于一个什么东西什么值，这表示以什么什么结尾，除了这个还有什么呢？我们接着来说还有最后一个，我们叫做一个星号，我就说这几种常用的啊，叫做星号属。

静止中。哎，属性值中含有哎某些某值的元素啊，含有某值的元素，所以非常简单，这个叫以什么什么开头，叫以什么什么结尾，这个星呢，就是什么呀，随便你爱出现在哪儿出现在哪儿，只要你有就行。所以看着我直接来一个星星，我来什么呢？我来一个ABC，诶，我来一个ABC，你看这三个全都亮了，为什么全都了？因为这个ABC在前面，这个ABC也在前面，而这个ABC在结尾有没有有有就行，但是没有就不行了，对吧，只要有在什么位置出现，无所谓，你在前边也好，在后边也好，在中间也好，只要有就行。所以比如说我这换一个，我换一个E，那这表示什么意思啊，这个title使用执着含有E的，那第一个就没有了，因为第一个是没有E啊，但是第二一个E是不是在这儿啊，诶到第三一个E在这儿，位置重不重要不重要，只要。

有就行啊，所以这是三种情况，一个是直接写属性，有属性就行，值不考虑，第二一个直接写等于号，让你的值还得必须得是某个值，必须得是一模一样的，然后小三角这表示以什么开头，那符表示以什么结尾啊，这么几种设置方式啊，几种设置方式属性选择器我们现在其实用的还挺多的啊，这个语法一定要记住，包括一个星号，任意位置，对吧？好还是啊，我们先把这些东西大体上过一下，我们真正的实战的话，我们会在练习中去强调这些东西，别着急，我们一点点去去做啊，好，我们先来停一下。