CSS第二帖

1.选择器

1.核心选择器

• 标签选择器

   		h2 { }
   		div {规则 }
  

• id选择器

   		#two {}
   		<div id="one"></div>
   		<div id="two"></div>
  

• 类选择器

   		.second{}
   		<div class="second"></div>
   		<div class="second"></div>
  

• 逗号选择器

   		h1,h2,h3 {}
  

• 组合选择器

   		div#two {}
   		选择id为div的元素
   		div,#two {}
   		选择div元素和id为two的元素
  

• 普遍选择器

   		*{}
  

2. 层次选择器

• 子元素选择器

   		.header > a
   		选中class为header的元素的直接孩子元素a标签
   		<div class="header">
   			<a href=""></a>
   			<ul>
   				<li><a href=""></a></li>
   				<li><a href=""></a></li>
   			</ul>
   		</div>
   		<div class="content">
   			<a href=""></a>
   			<a href=""></a>
   		</div>
  

• 后代元素选择器

   		.header a
   		选中class为header的元素的后代元素a标签
  

• 下一个兄弟
  语法： ul>li.two + li或.two + *（用“+”加号连接）

   		<ul>
   			<li>zero</li>
   			<li>one</li>
   			<li class="two">two</li>
   			<li>three</li>
   			<li>four</li>
   			<li>five</li>
   		</ul>
  

• 之后所有兄弟
  语法：ul>li.two ~ li或.two ~ *（用“~”波浪线连接）

3. 属性选择器【过滤器】

在已有选择器的基础上进行筛选

• selector[]
• input[type] 对包含type属性的元素进行样式的添加
• input[type=text] 对type属性值为text的元素进行样式的添加
• input[type^=s] 选择type属性值以"s"开头的所有元素
• input[type$=t] 选择type属性值以"t"开头的所有元素
• input[type*=t]选择type属性值以包含子串"t"的所有元素

4. 伪类选择器

表示结构的

:first-child：第一个子元素
:last-child：最后一个子元素
:only-child: 匹配属于父元素中唯一子元素的 p 元素
:nth-child(n): 同级别中第一个子元素
:nth-child(odd): 同级别中所有的奇数标签
:nth-child(even): 同级别中所有的偶数标签
:first-of-type：同级别中同类型的第一个标签
:last-of-type：同级别中同类型的最后一个标签
:nth-of-type(n)