利用CSS3的伪类画表格

最新推荐文章于 2024-05-14 16:52:58 发布

btshjhewei

最新推荐文章于 2024-05-14 16:52:58 发布

阅读量1.4k

点赞数

分类专栏： css3 文章标签： css3 伪类选择器表格样式

本文链接：https://blog.csdn.net/btshjhewei/article/details/50719627

版权

本文介绍了如何利用CSS3的伪类选择器，包括动作伪类、目标伪类等，来实现表格的样式设计，从而避免使用JavaScript，简化了表格的制作过程。

摘要由CSDN通过智能技术生成

css3 伪类分为：动作伪类、目标伪类、语言伪类、结构伪类、UI元素状态伪类、否定伪类选择器。通过这些伪类选择器，可以实现很多原来需要js才能实现的功能。现在我们来用这些伪类选择器来制作表格。

表格1：

<!DOCTYPE html>
<html lang="en">
<head> <title>表格1</title>
 <style>
div.demo{
            width:600px;
            margin:30px auto;
            font-size:14px;
            font-family: "微软雅黑";
            color:#444;
        }
        table{
            *border-collaspe:collaspe;
            border-spacing: 0px;
            width:100%;
        }
        /* 制作圆角表格*/
        .bordered{
            border:solid 1px #ccc;
            border-radius:6px;
            box-shadow: 0 1px 1px #ccc;
        }
        .bordered tr{
            -o-transition:all 0.1s ease-in-out;
            -webkit-transition:all 0.1s ease-in-out;
            -moz-transition:all 0.1s ease-in-out;
            -ms-transition:all 0.1s ease-in-out;
            transition:all 0.1s ease-in-out;
        }

        .bordered th,.bordered td{
            border-left: 1px solid #cccccc;
            border-top:1px solid #cccccc;
            padding:10px;
            text-align:left;
        }
        .bordered td{
            border-left-color:#fff;
        }
        .bordered tr:nth-child(n+3) td{