H5C3练习心得12.20 （音乐排行榜效果）--表格,col,:nth-child()和:nth-of-type(),not()

（一）html表格

看这个博主写的-----   http://t.csdnimg.cn/p4Qzn 写得很清楚

 元素定义表格行， 元素定义表头， 元素定义表格单元。

代码示例：

设置单元格之间无间隔，代码如下：

			table {
				width: 100%;
				/* border: 2px solid #000; */
				border-spacing: 0;
				border-collapse: collapse;
			}

（二）colgroup和col

1.作用

用于对

标签里的某一列进行样式定义

2.用法

col 和 colgroup 的属性用法基本相同，col 是放在 colgroup 里面的

用法一：代码示例如下：

用法二：代码示例如下：

注意：

colgroup标签必须在table中使用且必须位于 caption 元素之后，thead、tbody、tfoot、tr 元素之前。col标签通常用于colgroup中使用，且在 HTML 中， 标签没有结束标签。在XHTML中， 标签必须被正确的关闭。

一般用第二种用法，更实用。

3.col属性

• span：指定col元素横跨的列数，此属性值为正整数，默认值为1
• align：指定col元素关联的列的内容的水平对齐方式，包括left（左对齐）、center（居中对齐）、right（右对齐）、char等，注意此属性HTML5已废弃，仅IE7及以下等浏览器可用，绝大多数浏览器已不再支持
• bgcolor：指定col元素关联的列的背景色，其属性值可指定rgba、rgb、hex和颜色名称，注意此属性为非标准属性，不同浏览器对此属性支持度不一致
• valign：指定col元素关联的列的内容的垂直对齐方式，包括top（顶端对齐）、middle（居中对齐）、bottom（底部对齐）、baseline（基线对齐），注意此属性HTML5也已废弃，不同浏览器支持程度不一致
• width：指定col元素关联的列的宽度，值为px宽度或者百分比，注意HTML5已废弃，绝大多数浏览器支持
• char：align属性设置为char时生效，用于指定某列以某个字符对齐，注意HTML5不再支持此属性，且大部分浏览器不支持
• charoff：align属性设置为char时生效，规定内容相对于char属性指定的字符的偏移量
   

只有span属性还被html5支持，其它的都废弃了。

（1）span属性

span指定横跨的列数，不指定或者指定为默认则为1，通过指定col的样式作用于列上。

代码示例如下：

// 第一列为蓝色，第二三列为粉色

// 两列都是红色

（三）:nth-child()和:nth-of-type()

（1）:nth-of-type()

:nth-of-type()只会匹配与指定类型相符的元素。

例如，下面这些代码会将container中的奇数段落字体变为绿色：

.container p:nth-of-type(odd) {
  color: green;
}

 nth-of–type(odd); odd表示奇数，给奇数排设置样式

  nth-of-type(even)：even表示偶数，给偶数排设置样式

（2）:nth-child()

:nth-child() 选择器用于选取一个元素的父级元素下的某个位置的子元素。在括号内输入数字n即可，它表示选中父元素下的第n个子元素，包含所有元素，而不管它的类型。

例如，要选择container下的第二个子元素可以使用如下代码：

#menu>li:nth-of-type(n+1){
    background-color: linen;
}

（3）:nth-of-type()和:nth-child()的区别

http://t.csdnimg.cn/7PboP

看这个博主写的很清楚

（4）not()

除了该标签之外，它用于取消某一个标签和其他标签具有相同的属性。