css基础知识:组合选择器、兄弟选择器

组合选择器

今天复习css选择器的最后一个内容,组合选择器,其实我觉得叫选择器的组合方法更加的贴切一点。光从名字就可以知道。这次我们不会学新的选择器了。就像做饭一样,之前的我们像是开始认识各种菜,各种调料,而这一节则是开始看菜谱,学习如何搭配才能炒出美味的菜来。下面开始我们的正文。

选择器组

形式如: A,B,C。ABC分别代表了不同的三个不同的选择器,可以是class选择器,也可以是id选择、标签选择器,属性选择器。就像一群人在上班,老师突然说张三,穿红衣服的人,课代表上讲台讲一下问题。那么,张三就像id选择器(暂时假定不会重名),穿红衣服的就像class选择器,课代表则是标签选择器,他们都得上台。同理选择器组也可以这样,随便组合,只要用逗号隔开就可以,css代码会在所有选择器上生效。

例:

index.html

demo.css

在上面的例子中,我们涉及了多种标签,尤其是h1和h2标签,在默认情况下和其它标签在字体大小上会有比较大的区别,但在这里我们把他们同意设置成了大小30px,颜色为#DAA520。可以自己动手,敲下代码试一下。示例请查看组合选择器,若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html

上面代码中,parent就是父标签,child的就是子标签,即所谓的后代标签,形式就是父元素在前,子元素在后。因为parent下面只有一个div,所以child和div的指代都是相同的。在实际写代码中,我们可能在不同的地方都定义了相同的class,使用同一样式,但某一个地方需要有点特殊,那么这种后代标签就是其中一个选择。如:

demo.css

示例请查看组合选择器,若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html

子选择器

子选择器呢,和后代选择器实际上差不多。不过限制比后代选择器更多一点。从名字上也很容易理解,后代选择器范围更广。就像人类一样,说小强是大强的后代,那么这个小强,可以是大强的孙子,儿子,重孙,十八辈孙等。而说小强人是大强的儿子,那就只能是儿子喽。看例子。

这就是子选择器的形式,仔细观察和上面有什么不同。上面的代码中,css样式只能对“我是parent的子代。”起作用,但用于继承,“我是parent的后代”也有和前面子代相同的样式。大家可以手敲一下试试。示例请看示例请查看子选择器,若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html。在市里中,我对div设置了某认样式。对于这一节可能会比较难理解,先不要着急,在后面讲到继承的时候,再详细了解,现在知道有子选择器这一块就可以。

相邻兄弟选择器和通用兄弟选择器。

你是我的兄弟,还站在我后面,就是相邻选择器。如

上面的代码中,b就是a的相邻选择器,c就是b的。 .a+div的样式会对2起作用。.b+div会在3起作用。示例请看示例请查看兄弟选择器,若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html。

通用选择器则比较大方,只要是兄弟就可以,不管位置。如下

上面的代码,会在除了1以外的所有兄弟代码中生效。示例请看示例请查看通用选择器,若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181205G1PGKN00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券