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

瑶瑶南波万

已于 2024-01-04 11:15:19 修改

阅读量652

点赞数 23

于 2023-12-20 22:37:37 首次发布

本文链接：https://blog.csdn.net/yaoya_yaoya/article/details/135119290

版权

（一）html表格

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

<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

代码示例：

  <table>
    <caption></caption>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>

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

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

（二）colgroup和col

1.作用

用于对 <table> 标签里的某一列进行样式定义

2.用法

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

用法一：代码示例如下：

<table>
	<colgroup style="width: 100px;background-color: red;"></colgroup>
	<colgroup style="width: 200px;background-color: green;"></colgroup>
</table>

用法二：代码示例如下：

<table>
	<colgroup>
		<col style="width: 100px;background-color: red;" >
		<col style="width: 200px;background-color: green;" >
	</colgroup>
</table>

注意：

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

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

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的样式作用于列上。

代码示例如下：

<style>
  td {
    width: 240px;
    height: 30px;
  }

  .col-1 {
    background: lightblue;
  }

  .col-23 {
    background: pink;
  }
</style>

<table border="1">
  <col class="col-1">
  <col span="2" class="col-23">
</table>

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

<table>
	<colgroup>
		<col style="width: 100px;background-color: red;" span="2" >
	</colgroup>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

// 两列都是红色

（三）: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()的区别

代码示例如下：

			// :nth-of-type（）

                table tr:nth-of-type(odd) {
				background-color: white;
			}


            // :nth-child（）

			table tr td:nth-child(1) {
				font-size: 24px;
				text-align: center;
			}

:nth-of-type（）的意思是指定奇数行的tr标签设置样式

:nth-child（）的意思是tr父元素下所有的td标签内容都设置样式

（4）not()

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .i2{
            border: 1px solid blue;
            width: 100px;
            height: 80px;
         }
        .i1{
            border: 1px solid green;
            width: 100px;
            height: 80px;
        }
        div:not(.i1)：not(.i2){
            border: 1px solid red;
            width: 100px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="i1"></div>
    <div class="i2"></div>
</body>
</html>

瑶瑶南波万

关注

23
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫