码迷,mamicode.com
首页 > Web开发 > 详细

CSS快速入门-组合选择器

时间:2018-05-13 00:34:49      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:style   组合   size   class   入门   hello   空间   bsp   注意   

<div class="gradefather"> hello1
  <div class="father">hello2
    <p class="son">hello4</p>
  </div>
  <p>hello3</p>
  <p>hello5</p>
</div>

 

一、A,B :任意选择器 A or B

div,p {    #所有div或者p标签
font-size:10px;
color:blue;
}

 

二、A B:后代选择器,A 标签下的所有B

div p { #div下所有p标签
font-size:20px;
color:green;
}

 

三、A>B:子选择器,仅仅儿子级别会选中.

gradefather>p {#gradefather的子标签,仅hello3 hello5 会作用
font-size:20px;
color:red;
}
.father>p {#father的子标签,仅hello4 会作用
font-size:20px;
color:red;
}

 

四、A+B:毗邻选择器,仅仅相邻的同级别(兄弟sibling)第一个会选中.

father+p { #father的第一个邻居,仅仅hello3会作用
font-size:20px;
color:green;
}

 

注意:
1、块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。块级标签默认占一行,内联标签占内容大小的空间。
2、有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
3、li内可以包含div
4、块级元素与块级元素并列、内联元素与内联元素并列。

CSS快速入门-组合选择器

标签:style   组合   size   class   入门   hello   空间   bsp   注意   

原文地址:https://www.cnblogs.com/skyflask/p/8678979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!