css选择器与xpath哪个更好用

关于 css 选择器的优先级，你们有做过比较详细的了解吗？除了像 important 打遍天下无敌手 id 选择器比 class 选择器优先级更高， 其他的选择器对 css 优先级有什么影响呢？实际上 css 选择器的优先级还是有一定难度了，这个问题在前段面试里面算是一个中高难度的问题，那我们来一起看一看他有哪些你可能不知道的地方吧。呃，这里先纠正一下，说选择器的优先级可能不是太准确，因为引破线的和内敛样式并不属于选择器， 不过也没有比较好的描述来表示这些优先级的差异啊，所以咱们还是统称为 css 的选择其优先级啊。 important 破产的相信就不用多说了，它是一个非常有效，同时又是一个非常恶心的配置。因为通常的情况下，你只要给某个属性加上了引破产，基本上就可以覆盖掉其他 cs 的选择器对这个属性的配置。但是如果你的 cs 代码中有很多引破产的，你就会发现项目中写 cs 的时候会非常难受。有这么 一种情况啊，如果有人在恋人样式里面给属性添加了影 potent， 那你可能就有问候他祖上十八代的想法了。这如果是别人封装了一个组建，老板说让你把这个棕色改成绿色，那你仅仅使用 css 的话是根本没办法改变组建里面的这个棕色的。你只能使用 zs 拿到这个元素，然后强行更改他的颜色。 因为 input 的优先级甚至会高于内敛样式，所以他的优先级是最高的。除了 important 的这个特例之外，其他所有选择器，包括内敛样式，他的优先级都遵循一个规则，越能够准确表示某个元素的选择器，他的优先级就更高。相同优先级的选择器 机会优先选择靠后生命的选择器中配置的属性。比如说优先级排在第二的内内样式，他被直接写在了标签上面，是离标签最近的 css 样式。所以即使你声明的 class 选择器和 id 选择器最终 background 开了，还是会应用内内样式中的配置。接下来我们看看常见选择器的优先级。 id 选择器算你刚接触 htm 和 css 的时候，肯定就有人跟你说过，不要重复声明 id 选择器。这是因为在规范上，我们常把一个 id 选择器对应到一个元素，所以 id 选择器优先级比 class 选择器优先级要高。即使 class 选择器放在了 id 选择器的后面，页面显示的时候依然使用的是 id 选择器中对应的黄色。 那除了前面说到的三种优先级，这四种选择器优先级你们知道顺序是怎样的吗？元素选择器就是我们常在页面上面看到的 htm 标签，比如 div 标签、 p 标签、 span 标签， 它可以应用到页面上任何与之相匹配的标签上面。所以元素选择器是这几个选择器里面优先级最低的。关于委内选择器，这里会涉及到另一个经常会被问到的问题，那就是另一个 v 字体的 hobaktv 的放置顺序。这四个委内的放置顺序就是 lvha， 这里设置的宁可为类中的颜色是红色，而克拉斯旋射器中的颜色是黑色，页面上最终显示出来的颜色效果是红色，所以 明显委内的优先级比 class 选择器优先级更高。这四个委内选择器必须按照 lvha 的顺序放置，否则逻辑会出现问题。 那属性选择期的优先级又处在什么位置呢？实际上属性选择期的优先级比稳定选择期要低，而 cross 选择期的优先级则和属性选择期的优先级相同。 在这个逆子中，属性选择器中定义的颜色是绿色，而尾内选择器中定义的颜色是红色，最终 a 标签的颜色是红色，所以尾内选择器优先级比属性选择器优先级更高。那属性选择器和卡卡选择器优先级相同是怎么测出来的呢？视频前面说过，相同优先级的选择器， 浏览器会选择使用更靠后的选择器中配置的属性，让 p 一这个卡拉选择器放在属性选择器的前面，而 p 二放在属性选择器的后面。那根据优限级规则呢， p 一就会应用蓝色，而 p 二会应用绿色。根据前面做出的对比呢，我们就可以得出这样的选择 有限几顺序。 我们回到视频开头，给出了这个经典面试题，两个 div 中都有 blue 和 red 这两个 class 选择器，只不过他们放置了顺序是反的，但是这并不影响优先级。而 css 选择器定义的时候， red 是放在 blue 后面的，所以最终两个 div 中的文字颜色都是红色。 最开始你看到这个题目的时候可能会犹豫好久，但是当你想明白之后，这个问题实际上是非常简单的。最后再提一个点，前面说的都是单一选择器的优先集， 实际上还存在一个 css 选择器权重的概念。这个权重的概念和前面说了， css 选择器的优先级是基本匹配的。我们用一个逆子来看一看权重，这里设置了两条 crss 规则， p 一和 pr 都是克拉斯选择器。第一条 css 规则呢，是把 p 一和 p 二放在一起定义的规则，而第二条规则是单独对 p 一定义的规则。 那页面最终显示的文字颜色是什么呢？是绿色，因为两个卡拉斯选择器的权重肯定是大于一个卡拉斯选择器的权重了。好了，本期视频到这里就结束了，感谢你们的观看，拜拜！

这个视频再来说一个非常非常好用的 css 三的尾类选择器 has， 如果大家还没有用过或者不知道具体怎么用的，一定要好好学一下， 可以把它当成一个工具，有了它呢，以前我们只能通过 j s 或者 jk 里才能实现的功能，现在我们用 c s s 就可以搞定了。看一下代码， 这里我写了两个 diff， 其中一个里面有一个 spam， 写了一句 hello what， 另外一个 diff 是空的，给这两个 diff 写了一些简单的样式， 现在呢就这样，如果说我们想要给这个 spam 设置一个背景颜色呢，是很容易可以办到的，直接呢通过点找到它里面的 spam， 这样 spam 的背景颜色就出来了， 这样呢是很简单，我们可以通过复元素找到里面的子元素再来设置样式。如果现在啊，我想要反过来通过子元素去找到复元素，给复元素来设置背景颜色，那要怎么做呢？ 大家可能啊就会想到用 j s 哈，以前的话呢，确实需要用到 j s， 但是现在呢，我们可以直接使用 has 尾类选择器， 我们就看一下这个 diff， 它里面呢是不是包含有 spend， 如果有呢，我们就给他的背景颜色设置成红色， 对吧？第一个 diff 的背景颜色呢，就设置上来了，第二个呢还是没有，这样我们就可以很简单的通过子元素找到他的复元素来设 这样式了。再来看一个呆萌，这里我写了两个 d 和两个 h 一，这四个元素呢，他们是兄弟元素的关系，正常我们可以很容易通过 d 找到紧挨着他的下一个兄弟元素，对吧，给他设置一个字体颜色 对吧？这一个 h e， 它的字体颜色呢就变成蓝色了。我们是通过这一个点找到紧挨着它的下一个兄弟元素，也就是呢，这个 h e， 就把它的字体颜色呢设置上来了。同样我想要反过来，可不可以通过 h e， 然后找到紧挨着他的上一个兄弟元素，也就是呢，这个点设置他的样式呢？这里同样可以用 has， 当这个点他存在 一个紧挨着他的兄弟元素啊，下一个兄弟元素为 h 一，那我就设置 def 的样式，这样我们就可以通过 h 一来设置紧挨着他的上一个兄弟元素的样式了。 没问题，现在呢就是这个 deep 里面的字体颜色呢发生变化了。我们是通过这一个 h e， 然后找到这个 deep 来设置它的字体颜色的。如果我们想要通过它 把它前面所有的兄弟元素的样式都设置上来呢，我们就只要改一下这个通配符就可以了。加号呢是选择紧挨着的这一个， 我们要选择所有呢，就给他改成这个波浪符，这样呢前面两个的字体颜色就都设置上来了。这个选择 器呢是很好用的，大家一定要把它拿下啊，他会大大提高我们的开发效率，很多情况呢就不需要用到 gs 了。我们再通过一个具体一点的例子来巩固一下。这里我简单的模仿了 masp 里面的 doctor 蓝， 把鼠标移到其中一个项目的时候呢，当前项目他会放大，旁边左右两个呢也会跟着放大哈，只是呢没有当前项目这么大，就这么一个简单的功能，我们来看一下怎么实现了 这个布局呢，我们就不说了，都是非常简单的布局啊，就用列表来做的，非常简单，就这个样子啊，只不过呢现在把鼠标移进去呢，他是没有效果的，我们来写一下，我们先来控制当前项目进行放大， 就把它的字体和自身的大小改大一点就可以了， 把鼠标移上去，对吧？每一个呢都可以放大了，然后我们找下一个也跟着放大啊，这里呢复制一下紧挨着的下一个呢，非常简单，大家应该知道通过加号就可以了，然后呢这个他没有那么大，就改一下这两个值， 鼠标一进去，对吧？当前这一个和紧挨着的下一个呢都发生变化了， 这个呢我们之前都可以做，很简单哈，主要呢就是怎么样控制他上一个，紧挨着的上一个呢也发生变化，这里我们就可以用到刚才说过的 has 选择器了，如果他 挨着的下一个背鼠标经过，然后呢我就来设置他的样式，那相对于背鼠标 over 背鼠标经过的这一个来说， 我们要设置的这个力他就是上一个了，对吧？并且呢是紧挨着的这一个的样式呢，就和下一个是一样了，就给他复制一下， 没有问题啊。 ok， 这个视频呢我们就分析了 has 尾类选择器的用法，并且做了简单的 doctor on demo， 这个视频呢就到这里感谢大家的收看。

在我们开发网页的时候，当我们使用 cs 的多个选择器只向同一个标签时，这个标签到底是听哪个选择器的呢？ 我们回到代码中来看一下，这里我们先写一个按钮，叫搜索按钮，我们看一下页面，然后我们用前几天说的 cs 的选择器，首先先写一个标签选择器，这里写一个巴特，然后给他设置一个背景颜色，这里给他设置成一个蓝色， 然后我们再写一个类选择器，这里我们给他取一个名字叫红色，然后我们给他的字体颜色设置成红色，然后我们再使用这个类选择器，需要在标签上增加一个 krs， 然后写上我们定义的类名， 这样他就可以使用这个类了。最后我们再写一个 id 选择器，首先我们需要给标签定一个 id， 比如这里叫 a， 然后我们在 style 中写 id 选择器，这里写上一个井号，一个 a， 然后划过号，这里我们给他的高度设置成五十像素，然后我们三个 选择器都写好了，并且大家注意看这三个选择器都指向了这个疤痕。我们到页面上验证一下，可以看到这个按钮的背景颜色是蓝色了，它的字体颜色变成了红色，并且它的高度也生效了，也就是这三个选择器都生效了， 这里是因为他们的样式没有冲突点，比如你是做这件事的，他是做那件事的，最后你们事情都做完了，所以我们就看到这个现象了。但是这里我们想验证他的优先级，就必须给他制造一个冲突点，也就是让你们都做同一件事情， 最后谁做的事情生效了，那就说明谁的优先级最高，也就是我们最终会看到这个优先级比较高的选择期的样式了。已经看到这里的小伙伴相信都是对前单比较感兴趣的， 希望大家也养成一个给八哥点赞关注的好习惯，在你们的努力下，八哥也会更卖力的给大家带来优质视频的。好，我们回到大马上我们这里给他制造一些冲突点吧， 我把他们都改成设置背景色的，也就是做同一件事都是设置背景色的，我把类选择器的样式改成设置背景色为红色，然后把 id 选择器也改成设置背景色的， 这里给他设置一个橙色。接下来我们只用看按钮，按钮是哪个背景颜色对应的选择器优先级就是最高的。我们到页面上看一下，这里看到按钮标签的背景色是橙色了，橙色是 id 选择器设置的，所以我们就可以认定 id 选择器就是这三个选择器里面优先级最高的。 那么剩下这两个选择器谁的预算机比较高呢？我们先把 id 选择器给注视掉，大家可以理解为注视掉这段代码后，浏览器就不会解析它了， 也就是只剩下这两个选择器了。我们来看页面对比一下，这个按钮的颜色变成红色了，那就说明这个类选择器的优先级是比这个标签选择器的优先级高的。所以我们就有结论了，他们三个的优先级是 id 选择器的优先级高于类选择器，类选择器高于这个标签选择器。结合上一期跟大家说的，我们对比一下，这里可以总结为选择器覆盖的面越大，它的优先级就越小。 所以我们开发设置样式的时候，一般会先设置统一的样式作为页面规范，像一些网页字体按钮样式、下拉框之类的，我们通常先会用标签选择去设置一下。下一期我们继续看一些 cs 的新样式。

请说说四 s 选择器有哪些优先级？分别是什么？在面试中，这个题目一直都是一个高频面试题，四 s 选择器的使用如同 gs 中的动操作，所以是前端很重要的面试题，那么我们可以这么回答，会比较全面，给旭旭点个赞吧， 我们来聊聊。首先说下 size 选择器，是 size 规则的第一部分，它是元素和其他部分组合起来，告诉浏览器哪个 htm 元素是被选中，需要用 size 样式进行页面装修。那么其实说通俗点就是选中页面标签，针对该标签进行样式控制。那么常用的 size 选择器有哪些呢？ 第一个就是我们的基本类型选择器，就包含我们日常使用的 class 选择器， id 选择器，群主选择器，通配服务等等啊，像这一类我觉得应该是我们平时开发中啊，相对来说使用比较多的。那么第二类呢，就是属性选择器，那属性选择器它一般针对就是标签 本身自带的属性比较多的这种标签，比如说像我们的表单的 input 以及超链接啊。那么第三个就是尾类选择器啊，尾类选择器应该是一个大类啊，里面包含比较多，包含动态尾类，就是像我们的冒号 hover 啊，冒号 focus 啊，就会用的比较多， 那么其实就是 ui 元素状态为类，针对表单相关的一些状态操作的啊，其实就是结构为类的翘的类型和 type 类型啊，特别是 n d h， 翘的和 n d h， n t h o type 相关的使用是比较多的啊。 第四个就是层次选择器，那最常用的就是包含选择器，也就是后代选择器啊，以及我们这个大于号的子代选择器，以及相邻兄弟选择器和通用选择器等等啊， 那么他们在设置权重这一块，我们再去选择使用他们的时候，那就需要去考虑一下他们的优先级问题，那么先来解释一个问题，那么这个优先级那么他涉及到的是什么呢啊？其实指的就是关于 siss 的一个权重值的问题，那么其实所谓的 sis 权重指的是对于标签的样式，很多时候呢我们会添加多个样式，那有些时候是会出现一个样式覆盖，那么有的时候是样式继承，所以说样式之间呢就存在一个权重值的问题 啊，在坊间也流传过这样一句话，就是谁的权重值高，那么谁的样式就是啊生效就是优先级是比较高的啊，所以说如果说我们想要去解决样式啊，去做重新覆盖这种现象来说的话，就需要啊可以增加选择器的权重这一块去着手 啊，我们可以来看一下这个图，那么在这个图里面我们可以看到选择器各自的权重值啊，最后总结来说的话就是 我们的关键字过滤器，感到耗音 potent 啊，他目前来说应该在所有的一些啊对应的属性里面来说的使用还是权重最高的，其实就是内里钥匙的一千，那么在选择器这一块来说的话，权重值相对比较高，就是 id 是一百啊，克拉斯选择器是十，以及标签选择器是一。我是旭旭，祝你面试成功。

接下来呢，我们来看一下啊，一个使用 xpass 啊，来选择元素的时候，一个常见的一个注意点，一个坑啊，我们来看一个例子啊，假如说啊，在我们这个视力网页中啊，来看一下啊，这个视力网页中， 我们要选择什么呢？我们要选择 id 是 china 这个元素内部的所有的 p 元素啊，当然，我们可以一下子用表达式把它写出来，对不对？ 但是呢，假如说有些场合啊，我们必须把它分成两两段写，先找到 id 是 china 的元素，然后根据这个元素找到，不是返回一个 ybaaanyman 的对象吗？对不对？再根据这个 ybaaananame 对象再找啊，他的这个内部的 p 元素，那对应的代码呢？很简， 那我们根据以前的知识就知道该这么写，大家看一下啊，先找到 ids china 的元素，对不对？根据 web driver 对象的发现呢， anome 的白 idids china， 找到他啊，然后呢，再找到内部是 该元素的，内部是这个内部的 p 元素，这个东西呢？你假如说我们用今天学的 x pass 来写的话，那就这样写代码，就这样的， 对不对？找了这个元素，那么这个元素返回了 vip amp。 的对象，我负责给 china， 那么根据这个 china 注意啊，不是 vip job 了，而是 china 这个 web ada 的对象，他对应的就是 id 是 china 这个元素，对不对？再找内部的这个 p 元素，那是不是 x pass 就该这么写啊， 对不对？找，找到屁眼术不就这么写吗？对不对？那么想当然，我们觉得这样的运行的结果应该是对的啊，我们运行一下，看 看一下 id china 内部的 p 元素，你可以发现哦，他找的 p 元素不仅仅是 id 是 china 的，因为这个 id china 里面 p 元素只有两个，一个北京，一个上海，对不对？那为什么我们这边程序运行出来啊，最终结果就打印出这么多 p 元素呢 啊，注意，这个就是一个常见的坑啊，就说我们如果要通过 使用 x pass 的时候，要通过 web alimant 对象，而不是抓的对象啊，通过 web aliman 都要限制范围的话，对不对？那么注意，你一定要在这个前，这个这个是通过 web aliman 的对象啊，一定要在这个前面加一个点 啊，加一个点这个点呢，就代表从这个对象的内部一定要加一个点啊，从当前这个对象的内部开始找， 如果你不加点，那他对不起，他找的还是全部的网页啊，就相当于你这样 web driver 这个效果是一样的，就相当于 web driver 了。 好，一定要加一个点啊，大家记住，就是只要你是通过 web alimand 对象掉 fucking 的，白 x pass 的，就是你不是从整个文档的范围，而是某一个元素的内部找，一定要前面加一个点啊，这样我们再运行一下 啊，这样运行过来，你看最终打印的就是只有北京和上海了啊，这个是一个常见的坑啊，大家记住， 这个坑呢，只有 xps 有啊， css 就没有这个问题，只有就是根据 xps 找啊，如果你根据 css 呢，就不存在这个，不存在什么点不点的啊， css 你也找到里面所有的屁节点，那你直接这样就可以了， 对不对？或者你直接跟白加个 name 也可以，对不对？他们都不存在，只有 xpass 有这个问题啊？比如说你用 css 就不存在这个问题，我们运行一下， 那你看 css 就不需要加什么点的，对不对？只有 x plus 有。

在 c s s 的选择器里，挖呀挖呀挖，还有一些小操作能让你乐开了花，这两个你不知道的 c s s 选择器能直接替换大段 g s， 让您瞬间开挂，大大提高开发效率。下面我通过实际案例教会你， 现在看一下效果，效果呢，很简单，来点击离开，点击离开有没有发现其实两处地方变了，第一呢就是这个 input 框，然后呢，其次呢就是整个大框 input 框呢，他去变，非常的简单，关键就在于这个大框他怎么去变，而且呢是不通过 gs 实现的。 那这里呢，我们就需要去讲一个尾类了啊，来，首先啊，咱先把这个音铺的框自己变呢，给它实现了，这个简单吧，拿到它之后呢，身上是不是有一个 fox 这个尾类啊，然后这个尾类啊，有了之后，当它发生了，我们给它的颜色变一下， boder 卡了啊，来，这里呢， 新开了一个页面来，我们刷新，这时候呢，点击自己的框变了吧，好，这个简单，关键就在于这个大框怎么变是不是？那这个大框要想变的话，你需要去学习一个啊，尾类叫 fox vs， 这个尾类跟他很像，是吧，他俩是有关系的啊，那解释一下他的概念，那理解他的概念， 你可以想象什么 g s 当中的事件冒泡，他俩是一样的，事件冒泡呢，是当我点击一个元素之后呢，所有这个元素的负极都能够监听到点击的时间，对吧？那这个 fox reason 也是一样的，当元素有了 fox 为类之后呢，所有的副级就能够监听到 fox 这个为类或者说 fox 事件了， 那要通过的是谁？就是他，所以其实变得非常的简单。那负极咱让谁变呢？是不是 rap 呀？那就直接拿到这个 rap 给他的身上呢，去添加这个啊，焦点相关的这个伪类了。添加完之后呢， 我们就先变一下 boder color， 让大家先来看一下啊，来，当我刷新一下，点击发现吗？负极现在有没有变化？变了吧，就这么简单。然后其次呢，你再把剩余的那些样式呢给他添上来，我直接复制了啊，放到这 给完之后刷来来刷新一下啊，点击，你看效果出来了吧，就这么简单啊，记住， fox vise， 你要让负极去监听，那谁的负极呢？就是这个一定是 input， 他的负极明白吗？就是跟那个世界冒泡是一样的啊。好，这是第一个，然后呢第二个尾类呢？我们要实现一个效果， 什么效果呢？就是，呃，非填跟必填表单，我们一般都会要验证，是吧？那必填呢？一般情况下他的展示呢？是这样的，在这个后边呢，有一个星号，来，我们刷新一下，然后这个星号呢，他会变成一个红色，是不是？那我们之前是如何做的呢？之前呢，咱们就是我们先拿到这个 input， 哦不，拿到这个死板标签是吧？嗯， l i 下边的 spa， 我们通过一个 after， 然后 content 给它来上一个星，然后这个星呢，再变成一个颜色， 井号 f 四零， ok， 然后把它删掉啊，我们看有没有来刷新一下。是不是所有的都有了？好，这是我们之前的做法，但是现在呢，我想要做的是什么呢？并不是所有的都需要去添加，比如说我现在仅仅只需要让账号对应的这个 input 去添加，那怎么办呢？ 一般情况下，我们需要去给他的音谱的标签一个标识，这个标识呢，其实就是一条属性啊， request 添加这个属性，当然你可以去自定义属性都行，好不好？这个没有关系啊，那其实换句话来讲，但凡这个音谱的标签上有一条属性，那就表示他对应的 spa 标签需要去添加这个星号， ok， 这个在之前是不是也要通过 g s 完成啊？那现在呢，不需要了，那怎么办呢？我们需要再学习另外一个尾类， 这个尾类呢叫做什么呢？叫做 has， 哎， has， 这个在杰斯的数组对象当中呢，其实是有这个方法的啊，那他翻译过来呢，其实是用来检测，就是说是否包含或说是否包括，那包括什么呢？你想要他检测什么，就放到这个括号当中，那其实啊，有了它之后，咱就能实现这个功能了，怎么做呢？很简单， 我们现在呢，是不是要给每一个死办标签都去检测一下？他有一个兄弟节点叫做 input， 并且呢这个 input 身上有一条属性叫 require 的，满足这个条件之后呢，我就给他去添加这个信号 是不是？那怎么去添加呢？其实很简单，首先检测这一步啊，怎么去检测呢？我们要 has 检测谁啊？检测 input， 对吧？然后呢，这个 input 呢，它不光是一个标签，它身上需要有条属性，那属性选择器中括号叫什么？叫 recred 是不可以了，可以。之后呢，那这样是不是就检测到 你要让谁去检测呢？我们要让 spa 标签去检测，对吧？但是 spa 标签，我这个 spa 标签检测这个音谱，它可以吗？不可以吧，那怎么办呢？我们要检测 spa 标签，它的紧跟着的兄弟节点，那是不是在这来上一个加号呀？ 啊？看这个 has， 那这个呢，就表示死半标签，它的兄弟节点叫 input， 并且有条属性叫 recred。 检测如果说成功的话怎么办呢？咱们把这个 up 呢给他拿过来， 有的话是吧，那我就去填好来刷新一下，看现在有没有，是不是只有他有，你想要让第二个也有的话怎么办？来加上这个就可以了，妥了吧。啊，非常的简单啊，这个，那你看啊，当我们去用了这个选择器之后呢，那一切都变得非常的简单，不需要去大段的写 ps 啊，那最后呢，再给大家去看一个案例啊，就是，呃，这个选择器呢，它可以做什么？其实它可以实现一个挺复杂的这么一个功能，这功能呢是什么？是这个来我们看啊。呃，点击这之后呢，有一个 左侧拉出来的一个菜单，然后呢再点击其他地方他就回去了。在之前这个功能一定是要通过 g s 实现的，但是呢，现在呢，当我们去用这个 whison 啊 focus version 用这个之后呢？ notice 看到了吗？你不需要去写 g s 了，点击来点击， 点击是不是就节省很多很多的代码呀？那这个功能各位同学你可以思考一下，看一下到底该如何去做行吗？那这个就是两个伪类选择器了，记得点赞转发关注我，教你高效学编程。

同学们好，这节课呢，我们来学习第五张表单标签里边的 c s s 的知识点啊，这个 c s s 知识点呢？首先我们选择它的，我们学习它的选择器啊，选择器的内容 说到 c s s 选择器呢，我们之前已经接触过了，对吧？我们要想着给网页里边的元素定义样式的话，首先我们得使用 c s s 选择器， 对吧？选择器就是就其实就是 css 的名字，我们之前呃学的选择器有三种，一种是点开始的名字就类名是吧？一种是井号开始的 id 名，还有一种是什么呢？标签开始的名字， 三种啊。呃，当然我们还用到了中间加空格那种，那是什么？后代选择器是吧？比如说某某 某某标签下边的元素啊，那就中间加空格啊，或者是某某样式里边的子样式，或者是后就是某某包含在某某样式里边的样式，那就叫空格隔开，那就叫后代选择器。那么我们来看，除了我们之前学过的这些选择器之外， 我们还有哪些选择器啊？因为选择器的呃应用可以帮助我们减少 c s s 的，就是优化 c s s 代码啊，减少它的重复性使用，或者说荣誉代码。 ok， 我们先来看第一个相邻选择器啊，相邻选择器什么意思呢？就是如果需要选择紧接的另一个元素后的元素，而而且两者有相同的复元素，我们可以 可以使用相邻兄弟选择器啊，比如说这个例子，你看，比如说这个例子啊，我们可以试一下，我已经把它复制到了这个网页里边啊，我先把这个去掉，改回去啊， 加 p， 然后呢把这些都去掉， 这个也是 p， ok， ctrl s 保存。注意啊，这个选择器的意思就是选择 d i v 元素后边， 对吧？紧挨着这个 d i v 元素的后边的 p 元素啊，后边的 p 元素，那么就是这个， 对吧？这两个肯定不行，因为这两个是他的子元素，所以说这个或者是这个是他的兄弟元素，但是呢，相邻兄弟元素呢？只有这一个，对吧？所以只有这一个。变红啊，我保存，然后我们看一下这个页面，现在我刷新， 你看第三个变红啊，因为之前我已经预览过了，所以它你看啊，如果说我没有这个样式，如果说我没有这个样式，我把它去掉线， ctrl s 保存，我们刷新。它是都是黑色的，对吧？都是黑色的，现在我加上它， ctrl s 保存，然后我们刷新，你会看到和这个 d i v 相邻的这个 p 元素变成了红色，这就是相邻选择器的作用， 知道吧？呃，这个呢，用的很少啊，但是呢，如果，呃，如果说恰好我们用到了相邻元素的样式的变化呢？我们可以用这种选择器啊，而且网上还有一种介绍，你看， 比如说这种，你看啊，啊，我把它，哎，这还复制不了呢， 稍等啊，我看能不能复制过来。 哎呀，这太麻烦了，是吧？这让我们自己写一个， 我们从头写一个啊，它就是一个 d i v， 是吧？哎？是一个 d i v 吗？一个 d i v 里边有一个 u l 和一个 o l， 那就是一个 d l v。 哎呦，写这儿了写这儿啊，呃， d l v u l 对吧？然后下边是 o l， 然后是 l i， 对不对？呃，第一，第一个， 然后呢？ ctrl v 把这儿变成第二个，然后第三个， 意思类推，这个我也变成这样，我为了区分啊，这变成一， 二，变成阿拉伯数字的 ctrl s， 然后呢，我给他一个样式， l i l i 加 l i， 然后呢，让他的还是背景吧，要不对吧，背景变成 ground， 背景变成红色， ctrl x 保存。注意啊，呃，找到 r i 元素的相邻的兄弟元素 l i， 把它的背景变成红色，那我们看啊，首先我要么找到，我们要找到 l i 元素，这是一组，这是一组，看到没有？那么这三个是兄弟关系这三个是兄弟关系，对吧？那么这里边的 l i 和这里边的 l i 就不能是兄弟关系了，因为他们一个是在 u l 里边，一个是在 o l 里边，对吧？肯定不是兄弟关系啊。然后呢，注意， 如果以他为基准的话，那么他的兄弟是谁呢？就是第二个 l i， 对吧？如果以他为基准的话，他的兄弟是谁呢？就是第三个 l i。 然后注意啊，我们现在看一下， 这有一句重点话啊，请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。注意啊， 用一个结合符只能选择两个相邻兄弟中的第二个元素，也就是说我选择 l i 相邻的 l i 的话，那么这两个元素我只能选择第二个，对吧？然后如果是这两个元素呢，我只能选择第三， 也就是说我这个样式会把这个 u l 里边的三个 l i 里边的这两个变红 啊，依次类推，这个也是这两个变红，我们看一下啊，现在我们刷新， 你看有问题吗？第一个 u l 里边的两个 l i 变红了，第二个 o l 里边两个 l i 变红了。看到没有，第一个不会被选择啊，你就记着兄弟，选择器只能第一个肯定是不会被选啊。 好了，这是我们的相邻选择器的这个使用啊，使用下边第二种选择器。子选择器啊，子选择器，有同学说了，不是学过吗？什么什么？就是 加空格那种，注意啊，空格那种是后代选择器，你看啊，我们这样，比如说，比如说我们来 加一套 d i v， 对吧？ 你比如说你看，呃，点 demo， 然后是宽度 五百，然后呢？高度三百，那三百还不行是吧？六百吧，高一些，保存，然后呢？我给他一个 class， 等于 demo， 然后呢？我选择，我在 demo 里边我加一个什么呢？我，我们以前经常这样说，比如点 demo 空格，然后呢？我们，呃空格的话 加一个，比如说 u l， 然后呢？背景是 background 是蓝色，比如说，啊，好吧，然后 ctrl s 保存，这样你看啊，我们看一下，我们看一下。样 是刷新，你会发现 ul 变红了啊，这种空格的空格的意思就是，呃，凡是属于点 demo 样式里边的 ul 元素都可以，不管是他的孩子还是他的。呃，孙子。 你比如我在这里边再加个 u l。 我这个我在这里边加个 u l， 你看啊， 你看啊，我是，我是 demo 的儿子， 对啊，儿子一，比如说，对吧， 哎，这个能叫？嗯， 就这样吧，举个例子吧，就说就当他是，你看，因为这个我，我们就说 u l 是 demo 的儿子，好吧，这个 u l 就是孙子了， 因为它属于紫元素 d i v 里边的紫元素啊， 这就改成什么孙子。好吧， 现在你们看啊，现在我们注意啊，现在我什么都不动了，现在我刷新你们会看到它有两个 两，这两个 u l 都变成了蓝色，因为这是后代，就是只要是在 demo 里边的 u l 都会变蓝。下面我们将要学的这个子选的这是什么呢？ 是，呃，你看啊，子选择器中前后部分之间用一个大大于号隔开前后两部分选择符的结构上属于父子关系啊，子选择器是根据左侧选择符指定的副元素，然后在该副元素下寻找匹配右侧选择符的子元素。孙子就不算了，我们试一下啊， 把这个改成大于号，哎，然后我们保存，下面我们刷新看一下啊，你会发 他的儿子变，变蓝了，孙子是不变的了，明白了吧，这就是子选择器的意义啊，子选择器的含义啊，加上大于号就是子选的儿子了啊，在他儿子的儿子就不管了， 明白了吧，这是只选得起啊，一定记住只选得起的一，当然这里边又一个例子是吧，你看 h 一的儿子 strong， h 一的儿子是谁呢？由 strong 对吧？哎，两个 strong 是吧？两个 strong， 然后这个也是有，也有一个 h e， 你看两个 h e， 它是吧？两个 h e， 但是这个 h e 里边儿的 dix 状是属于 e m 里边儿的 dix 状是 e m 的儿子是 h h e 的孙子，所以它不会改变，就是第二个 h e 里边的 vary 不会变成红色，而第一个 h e 里边的两个 vary 会变成红色，明白了吧，这是子选择器啊，子选择器， ok， 我们这个选择器先讲这两个，好吧，同学，你们同学们可以练一下。

各位大家好，这是 h t m l c s s 第七个视频，在上面几个视频，我们主要讲解的是 h t m l 标签， 那么通过讲解标签，我们能够认识到标题段落列表，但是我们通过一保存他们默认的颜色和版面是这样子的，那么这一讲我们主要讲解的内容是 c s s c s s， 它的名字叫层叠样式表，那么它的作用是什么呢？就是改变我们下面这块内容，就说我们默认输入了标签的效果，我们现在看到的是白底黑字，那么 c s s 能够做到改变的 有字体颜色、背景色、添加边框等内容，以及后面的布局的这块知识点，那么他是如何改变，如何能够改变默认的这块样式呢？比如我们现在把它拿过来， 我们要用到一个 c s s， 它有一个功能叫做选择器，各位注意了，为了改变它的外观，我们要选择它， 在我们前期讲的语言主要是 h t m l， 那么为了使用 c s s， 我们要使用另外一种语言，就是 c s s， 那么我们在下边呢，输入代码叫做 style style 这个单词就是上面这个 style， 然后我们直接回车，选择第二个回车以后，那么这一讲呢，我们主要讲两个，第一个是选择器啊， 选择器，那么我们讲一个叫做标签选择器， 标签选择器，那么我们要想改变这个外观，比如上面这块内容，我们要想改变它的外观，如我们段落， 那么我们首先就改变了段落，那么一共有三个段落，那么我们就不要改，不改变标题，也不改变无序列表，那么使用的方法呢？是这样的，要用一个标签名， 段落的标签名是 p 标签，那么我们在此呢，输入一个 p， p 是段落的意思，后边来一个大括号， 大括号里边跟上一个冒号，冒号的左侧是数 属性的名称，如卡了，右侧呢是颜色 red， 那各位看好，那么现在当我保存以后，我们会发现它的变化，那么直接把段落呢？全部颜色被改变了， 改变为什么是红色？那么这种选择呢？叫标签选择题，标签选择题是通过什么来选择的？通过标签名， 他为什么不改变标题，也不改变无序列表，因为它采用的是标签名，各位同学看好，那么下面我们再来说一个，如果我要想改变 无序列表，再次的演示一下，那我们这边呢，来一个 u l u l， 然后直接来个括号，大括号，大括号表示对象 依然中间有冒号，右侧是属性的名啊，然后左侧是属性的指路，那么我们通过一保存，那各位同学，你看到是不是我们这块内容全部是通过什么改变的？通过标签名， 标签名啊，标签名来改变的，那么我们现在呢，再讲补充一个选择题，讲第二个选择题，叫做类选择题， 类选择器，类选择器是什么？我们上面是不是三个段落都被我们改变了，我们对它进行分类 啊，各位要在他每个标签都有这么一个属性，叫做 class， class 单词就是累，那么后边这块内容我们可以给他起一个名字，相当于变量名。老师用的表， 两名是 i b 开头，习惯于 i b 开头。 bag 就是白科葛庄的啊，那么我们直接起一个名字，零啊，那么我们在底部这次就不再用标签名，而要用类的名称啊，通过什么的名来改变呢？通过 lay 的名称来选择，那么 lay 的名称是什么？各位注意， lay 的名称不能直接用 i b bag， 那么我们要在它的前面加上一个点，这样呢，我们就可以区分出标签名， 如果在变量的前边加上一个点表示累，后边依然是大括号，我们现在给它添加一个什么，添加一个背景色啊，白色的卡了等于 yellow， 那么我们一保存，那各位同学，现在我们应该能看到 我们只是改变三个段落中的第几个，第二个背景色是为黄色，以此类类推。如果我们要想改变，在我们的其他的标签上也使用这样的一个类，那么我们只要写上类的名字就可以了。 i b 在一个领带，那么这块内容啊，它依然会指向下边这块内容抛，包括我们在后边的也可以这样呢，我们都会给它填上背景色。那各位你现在看到的啊， bag， 呃， bag 零按啊，前面写错了，少一个，这个名称是跟下边的名称不一样，要保持一致，叫 i b bag 零按，那跟着名称对应就好了。那这个视频就讲到这里，感谢大家的关注，支持和点赞。