子选择器的使用-CSS入门基础(004)

今天我们继续分享关于选择器的内容。

子元素选择器,就是选中某个或某一类元素的子元素。

语法:

#father #child {width:100px;height:100px}#父层 #子层 {属性1:属性值;属性2:属性值}

父元素与子元素必须用空格分隔开,表示在父元素包含下的子元素。

示例代码:

​​​​​​​

<html>  <head>    <title>子元素选择器</title>    <style type="text/css">      #father1      {        width:400px;        height:400px;        border:1px solid black;      }            #father1 div      {        background-color:green;      }            #father2      {        width:300px;        width:200px;        border:1px solid black;      }            #father2 #p1       {        color:blue;      }    </style>  </head>  <body>    <div id="father1">      <div>区域一子元素</div>      <div>区域二子元素</div>    </div>    <div id="father2">      <p id="p1">内容</p>      <p id="p2">内容</p>    </div>  </body></html>

预览浏览器后,我们会发现father1和father2都设置了宽度高度和边框,然后使用father1 div,表示第一个div区域下的全部div,都设置背景色为绿色;而father2 p1则表示,第二个div区域下只有p1元素,设置了字体蓝色,不影响其他的段落标签。

相邻选择器:

相邻选择器,就是选中元素的下一个兄弟元素。在这里注意一点,相邻选择器的操作对象是该元素的同级元素。

语法:

​​​​​​​

#friend div {width:100px;height:100px;}#元素 相邻元素 {width:100px;height:100px;}

示例代码:

​​​​​​​

<html>  <head>    <title>相邻选择器</title>    <style type="text/css">      #friend      {        width:200px;        height:200px;        border:1px solid black;      }            #friend div      {        width:200px;        height:200px;        border:1px solid black;        background-color:green;      }    </style>  </head>  <body>    <div>区域一</div>    <div id="friend">区域二</div>    <div>区域三</div>  </body></html>

使用#friend div,表示与friend相邻的div,也就是下一个兄弟元素,起作用,与上面的不起作用。

群组选择器:

群组选择器,就是同时对好几个元素进行相同的操作。这个一般都是在对页面元素进行默认值设定时使用的,便于管理,也减少冗余代码。

语法:

h1,h3,div,p,span {margin:0;padding:0;}

示例代码:

​​​​​​​

<html>  <head>    <title>群组选择器</title>    <style>      h3,p,div,span      {        background-color:green;        color:white;      }    </style>  </head>  <body>    <h3>标题内容</h3>    <p>段落内容</p>    <div>分隔内容</div>    <span>行内容</span>  </body></html>

预览浏览器后,大家会发现以上几个元素,背景色均为绿色,字体色均为白色了,这个就是群组选择器的作用。另外插一句,大家看绿色的大小会发现,h3,p,div都是block块元素,而只有span是inline行元素。

以上分享的选择器内容,基本覆盖选择器90%以上的内容了,也够用了,其他那些更高级,更复杂的选择器,今后学习高级教程时,再给大家分享。

来源:https://www.icode9.com/content-4-780601.html

(0)

相关推荐

  • A0 字节系广告入门基础概念篇

    A1 信息流广告优化是份什么样的职业? A2 头条信息流广告底层竞价逻辑 A3 头条信息流广告搭建流程介绍 A4 头条信息流账户优化方法论 不问不知道,一问吓一跳! 居然有同学,连最基础的广告入门相关 ...

  • 梁钢筋平法识图入门基础,一看就明白

    来源:易筑施工.筑天下 如有侵权请联系删除 梁钢筋平法详细讲解 梁混凝土强度,结构层高表中说明 梁标高,结构层高表中说明 梁钢筋示意 梁钢筋分类 箍筋类型图 各部位钢筋

  • 八字入门基础知识

    看完60集,小白也能成大师. 看完60集,小白也能成大师. Show More

  • 毛笔书法入门基础教学,字右旁的写法!这才是最好的教学方法!

    毛笔书法入门基础教学,字右旁的写法!这才是最好的教学方法!

  • 周易入门基础知识

    周易入门基础知识

  • 艾灸:入门基础知识

    艾灸是之所以成为现代人追捧的养生之法,是因其绿色.天然.安全.无副作用.一般针对不同的病症,中医总会给出多个穴位,这么多穴位,究竟先灸哪一个? 相信很多人都不清楚,这就跟吃西药分饭前.饭后吃一样,时间 ...

  • 阳宅风水入门基础学习

    本文只介绍重点和必须掌握的知识,从阳宅风水的基础讲起,步步深入,循序渐进,在风水的学习道路上少走弯路,很快掌握阳宅风水的学习要领. 基础知识 (1)五行:  1:金水木火土(初学者按此顺序背诵,顺次相 ...

  • 易经入门基础知识

    易经入门基础知识 前段时间写了不少的易经入门知识以及概述的文章,但是感觉还是少了一些东西,今在完善一下写一个易经入门基础知识偏向概述的理解文章,易道远大,三人行必有我师焉.希望大家可以互相分析讨论,促 ...

  • 八字算命入门基础知识速查表

    在中华民族优秀的历史文化传统之中,八字命理学说占据着重要的席位.在老祖宗看来,八字命理可以帮助人们更好的去了解未来的生活,直到现在也依旧有着重要的存在意义.那么人们如何才能够通过对八字进行测算?从而对 ...