选择器进阶

后代元素选择器

• 空格连接 E F{}

• 选择E元素中所有的后代F元素（E元素结构包含所有F选择器）

  .box p{
  	background-color:green;
  }
  .box ul li p{
  	color:red;
  }
  

子代元素选择器

• 大于号连接 E>F{ }
• 选择的是E元素中的直接子元素F(结构上第一层级)

.box > p{
            background-color:green;
}

群组选择器（并集）

• 【逗号】分隔

• 一组拥有相同样式的选择器（联合声明）

  • 一定程度上起到精简代码的作用

  ul,ol{
      margin:0;
      padding: 0;
      list-style: none;
  }
  .box p,#header>li{
  	background-color:green;
  }
  

交集选择器

• 两个或多个连续没有分隔符的选择器（慎用）

div.box{
	background-color: red;
}
.box#test{
	color:pink;
}    

伪类选择器

语法：元素:伪类{ }

超链接的四种状态伪类

• a:link{ } 当超链接未被访问时
• a:visited{ } 当超链接被访问过后
• a:hover { } 当鼠标悬停时
• a:active{ } 当链接被激活时（鼠标按下不抬起）
  • 书写顺序： l-v-h-a
  • :hover,:active也适用于其它标签

元素特性总结

块级元素（block）

• 垂直排列，默认独占一行

• 默认占满容器内容宽的100%

• 可以设置所有盒模型的属性（支持宽、高，四个方向的padding,margin,border）

• 可以支持行高（text-indent,text-align）

  嵌套规则：通常包含块级元素也可以包含行内元素

行内元素(inline)

• 水平排列，可以在一行并列显示，当父元素空间不足自动折行
• 默认宽、高由内容决定
• 不支持宽、高，不支持【垂直】方向的margin,padding,border(不占位)
• 不支持行高(text-indent,text-align)
• 代码视图的折行、空格会引起间隙问题

​ 嵌套规则：通常作为块级元素的后代元素，包含文字、图片及其它行内元素

行内块元素(inline-block)

既拥有块级元素的特征，又拥有行内元素的特征

• 水平排列，可以在一行并列显示，当父元素空间不足自动折行（行）
• 代码视图的折行、空格会引起间隙问题(行)
• 可以设置所有盒模型的属性（支持宽、高，四个方向的padding,margin,border）_(块)
• 可以支持行高（text-indent,text-align）_(块)

display

• block 显示为块——具有块元素的特征
• inline 显示为内联——具有行内元素的特征
• inline-block 显示为行内块——具有行内块元素的特征

常用场景

行内转块

• 支持宽高，支持行高，独占一行

行内块转块： img转块

• img独占一行

• 实现居中{ display:block;margin:0 auto;}

• 解决图片间隙问题

块转内联块

• 在一行排列
• 父元素{text-align:center}可以实现在父元素中的居中

浮动

float:

• left左浮动 （从左向右）
• right右浮动（从右向左）
• none不浮动

浮动会使元素【脱离文档流】
使元素按照指定的方向【排列】，直到遇到父元素的边界或另一个浮动元素【停止】

文档流：所有可见元素在文档中排列占位（块元素从上向下排，行内元素从左向右排）

浮动的问题

• 浮动脱离文档流，使父元素高度塌陷 （无法撑开父盒子）
• 影响浮动元素之后元素的布局

清浮动的方法（解决浮动产生的问题）

给父元素固定高度

• 缺点：不够灵活

给父元素加overflow:hidden;

• overflow除了visible以外的值也可以

• 缺点：存在溢出隐藏、滚动条的隐患

• 在父元素内部，浮动元素之后，定义一个空的，不浮动的，块元素{clear:both;}

  • clear:both; 两侧抗浮动
  • 缺点：代码冗余，可读性差

• 推荐方法

给浮动元素的父元素加.clearfix

.clearfix:after{
	content:"";
	display: block;
	clear: both;
}

:after

• 元素：after{content:“内容”} 在元素内部最后位置生成内容
• 默认以行内形式存在

.box1:after{
 	 content:"123";
 }

最后

以上就是谨慎白昼为你收集整理的进阶选择器、元素特性的总结、浮动以及浮动解决办法元素特性总结浮动的全部内容，希望文章能够帮你解决进阶选择器、元素特性的总结、浮动以及浮动解决办法元素特性总结浮动所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。