2020-12-03

量子次元

于 2020-12-03 22:12:44 发布

阅读量71

点赞数

分类专栏：选择器

本文链接：https://blog.csdn.net/fengchang11111/article/details/110578168

版权

选择器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、选择器类型。

1.分组选择器：有一组选择选择器构成的，中间用逗号隔开。

一组一组的都是同一级别的。

egg:

<style >

.s1{ color:red}
#d1{color: red;}

</style >

可以合并，成：

<style >

.s1， #d1{color: red;}

</style >

2.后代选择器：由父子选择器构成的一种选择器，就像分级一样，body在html内，span、p、选择器class、id在body中。

有上下级之分，先找到大标签再找到小标签，一级一级往下找，中间用空格隔开

<head>
       <meta charset="UTF-8">
       <title></title>
       <style >
           html body p,span{color: red;}
       </style>
   </head>
   <body>
       <span class="s1">河南</span>
       <p id="d1">计科</p>
   </body>

3.通配符选择器：通用全部标签。

形式：*{ }

egg： <style >

           *{margin: 0px; padding: 0px;}

       </style>

二、新浪网页以及各种网页都分区域。

由好几个分割开的区域，写好几个<div></div>区域。

<head>
       <meta charset="utf-8" />
       <title></title>
       <style >
           *{margin: 0px; padding: 0px;}
           div{border: 1px solid aqua;}
       #header{
           padding: 20px;
          padding-bottom: 26px;
              width: 1200px;
              margin: 0px auto;}
       #header #logo{float: left;}
       #header #int{
           height: 47px;
              line-height: 47px;
              float: right;}
       #header #logo a img{vertical-align: middle;}
       </style>
   </head>
   <body>
       <div id="header" >
<div id="logo">
<a href="http://www.sina.com.cn/" target="_blank"><img src="img/logo.png" alt="logo"></a></div>
<div id="int">国际化</div>
<div style="clear: both;"></div>
       </div>
       <div id="container" >zhong</div>

  <div id="footer" >wei</div>
   </body>