第一次分享——选择器、浮动

选择器权重

ID选择器

• ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。

class选择器

• class选择器是可以复用的。
• class属性中可以有多个值，例：

	<p class="book important"></p>

• 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。

	.book{}
	.important{}

• 标签+类的写法

	p.book{}

• 命名规范

• 命名的规范，由字母、下划线、中划线、字母（第一个不能是数字）
  • 驼峰写法 : searchButton (小驼峰) SearchButton (大驼峰)
  • 短线写法：search-small-button
  • 下划线写法：search_small_button

标签选择器(TAG选择器)

• 使用的场景：
  • 去掉某些标签的默认样式时，例：

  	li{list-style-type:none;}
  	a{text-decoration: none;}
  

  • 复杂的选择器中，如 层次选择器

群组选择器(分组选择器)

• 可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

通配选择器

• 使用的场景：去掉所有标签的默认样式时

*{	margin: 0;  
	padding: 0;
	}

• 注：尽量避免使用通配选择器添加样式，因为会给所有的标签添加样式，慎用。

层次选择器

• 后代 M N

	div p{}   //即div里所有的p

• 父子 M > N { }

	div>p{}  // 即只选择作为div子元素的P

也可结合后代选择器

	div p>a{}  

• 兄弟 M ~ N { } 当前M下面的所有兄弟N标签

	<li class="one">1</li>
   	<li>2</li>
    <li>3</li>
    .one~li{}		//选择的是后面两个 li

• 相邻 M + N { } 当前M下面相邻的N标签

	<li class="one">1</li>
   	<li>2</li>
    <li>3</li>
    .one~li{}		//选择的是第二个 li

属性选择器

• M[attr] {}

	*[title]{}
	a[href][title]{}

• = : 完全匹配，属性与属性值完全匹配

	a[href="#"]{}
	a[href="#"][title="具体值"]{}

• ~= : 部分属性选择器

	<p class="book important"></p>
	p[class~="important"]{}  //即可选class属性中有important的
	p[class~="impor"]{}  //不能选中
	img[title~="Figure"]{}

• 字串匹配属性选择器
  • ^= : 起始匹配
  • *=：包含即可
  • $= : 结束匹配

	<p class="book important"></p>
	p[class^="bo"]{}  //可选class属性中起始是bo的
	p[class$="tant"]{}  //可选class属性中结束是tant的
	p[class*="important"]{}  //可选class属性中有important的
	p[class*="impor"]{}  // 可选中

• [][][] : 组合匹配，都可以组合起来匹配

伪类选择器

• M:伪类{}

  • 锚伪类
    :link 访问前的样式 ( 只能添加给a标签 )
    :visited 访问后的样式 ( 只能添加给a标签 )
    :hover 鼠标移入时的样式 (可以添加给所有的标签)
    :active 鼠标按下时的样式 (可以添加给所有的标签)

  • 结构伪类选择器
    nth-of-type() nth-child()
    角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大
    first-of-type
    last-of-type
    only-of-type

    • nth-of-type()和nth-child()之间的区别
      type : 类型
      child : 孩子
• 结构伪类选择器
  • 同一类被选择，如只选 li

	nth-of-type()			 
	first-of-typ
	last-of-type
	only-of-type	

• 子元素被选择，只要是子元素就可以，不需要标签一样

	nth-child()	 
 	first-child
 	last-child
 	only-child

注：()里填写数字，数字从1开始，1表示第一项，以此类推，也可以写n，表示从零到无穷大。

    <ul>
        <li></li>         
        <div>aaaaa</div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    // 数数时都不包括div
    li:nth-of-type(2n+1/2n)  // 除去div，在li中第奇/偶数个
    li:nth-of-type(2) 
    li:first-of-type  //第一个li
    li:last-of-type	  //最后一个li
    div:only-of-type  //可以选中div
    li:only-of-type    //当 ul中只有一个li时，才能被选中
	//数数时都包括div
	li:nth-child(2n+1/2n)  //div参与数数，第奇偶数个li 
    li:nth-child(3)
    div:only-child  //不能选中div
	p>a:fist-child{}
	p:first-child a{}

• !important > style行间 > id > class/属性选择器/伪类 > 标签 > * > 继承
  注：权重
  style： 1000
  id：100
  class：10
  tag：1
  *：0 （通配符）
• !important：可将优先级变成最高
  用法
  color:blue !important;
• 标签+类与单类
  标签+类 > 单类
• 相同样式优先级
  当设置相同样式时，后面的优先级较高

什么是浮动，清除浮动的方法

• float特性：加浮动的元素，会脱离文档流，会沿着父容器靠左或靠右排列
• float：left、right、none属性定义元素在哪个方向浮动
• float注意点
  只会影响后面的元素。
  内容默认提升半层。
  浮动元素默认宽根据内容决定。
  换行排列。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
  主要给块元素添加，但也可以给内联元素添加。
• 如何清除浮动？
  clear属性：clear属性只会操作块标签，对内联标签不起作用 ，表示清除浮动的，left、right、both
  :after伪类

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

• 上下排列：clear属性，表示清除浮动的，left、right、both
• 嵌套排列：after伪类