CSS选择器

最新推荐文章于 2024-10-22 09:22:43 发布

小XiaXia

最新推荐文章于 2024-10-22 09:22:43 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

分类专栏：前端、Java 文章标签： html css

本文链接：https://blog.csdn.net/m0_51055743/article/details/113609629

前端、Java 专栏收录该内容

31 篇文章

订阅专栏

本文深入讲解CSS选择器的应用技巧，包括ID选择器、类别选择器等，并通过实例展示如何利用这些选择器优化网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原始方法编写一个简单的网页，很多重复的，显得代码不够简化

<!DOCTYPE html>
<html style="background-color: #ddd;">
    <head>
        <meta charset="utf-8"/>
         <title>虾虾有限公司</title>
    </head>

    <body style="margin: 0">
        <div id="banner">
            <img src="images/brief-1.jpg" style="width: 100%;">
        </div>
        <div id="navigation" style="height: 80px; line-height: 80px; text-align: center;background-color: white;">
            <a href="#" style="text-decoration: none; color: black; margin: 0 15px;">首页</a>
            <a href="#" style="text-decoration: none; color: black; margin: 0 15px;">关于虾虾</a>
            <a href="#" style="text-decoration: none; color: black; margin: 0 15px;">产品世界</a>
            <a href="#" style="text-decoration: none; color: black; margin: 0 15px;">新闻中心</a>
            <a href="#" style="text-decoration: none; color: black; margin: 0 15px;">网络事件</a>
            <a href="#" style="text-decoration: none; color: black; margin: 0 15px;">联系我们</a>
            <a href="#" style="text-decoration: none; color: black; margin: 0 15px;">关于我们</a>
            <a href="#" style="text-decoration: none; color: black; margin: 0 15px;">网络新闻</a>
        </div>

        <div id="bottom" style="height: 40px;line-height: 40px;text-align: center;font-size: 14px; color: gray;">
            版权所有：小虾虾有限公司&nbsp;技术支持虾虾网络
        </div>
    </body>
</html>

2.CSS选择器

id选择器（#box）：id表示身份，在页面中元素的id不允许重复，因此id选择器只能选择单个元素
类别选择器：选择拥有该类别的多个元素
标签选择器：根据标签名称，选择对应的所有标签
通用选择器：
选择器优先级:行内样式（1000）>id选择器(100)>类选择器(10)>标签选择器(1)>通用选择器(0)
权重值不一样，选择器选择的范围越小越精确，优先级就越高
例如：#box p .tt 为100+1+10

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
         <title>虾虾有限公司</title>
         <style>
             /*标签选择器*/
             /*使整个页面背景为灰色*/
            html{
                background-color: #ddd;
            }
            /*解决照片上面留白的问题*/
            body{
                 margin: 0;
            }
            /*id选择器*/
            /*div有很多个，所以，用id选择器*/
            /*行高与容器高度一致,这样就美观很多了*/
            /*字体默认高度16px,行高21px*/
            #navigation{
                height: 80px; line-height: 80px; text-align: center;background-color: white;

            }
            #bottom{
                height: 40px;line-height: 40px;text-align: center;font-size: 14px; color: gray;
            }
            /*去掉最后一条竖线*/
            /*也可以直接在a标签中使用style直接改,行内样式优先级>内部样式优先级*/
            #navigation .last{
                border: none;
            }
            /*通用选择器*/
            *{
                color: antiquewhite;
            }
            /*类选择器*/
            .nav{
                /*去掉下划线；字体颜色；margin:左  右，使词之间有一定的间距；*/
                text-decoration: none; color: black; margin: 0 15px;
                /*border是一个框，保留右框而已*/
                border-right: solid 1px #808080;
                padding: 0 15px;
            }
            #banner img{
                width: 100%;
            }
            /*选择器优先级:行内样式>id选择器>类选择器>标签选择器>通用选择器*/
         </style>
         
    </head>

    <body>
        <div id="banner">
            <img src="images/brief-1.jpg">
        </div>
        <div id="navigation">
            <a href="#" class="nav">首页</a>
            <a href="#" class="nav">关于虾虾</a>
            <a href="#" class="nav">产品世界</a>
            <a href="#" class="nav">新闻中心</a>
            <a href="#" class="nav">网络事件</a>
            <a href="#" class="nav">联系我们</a>
            <a href="#" class="nav">关于我们</a>
            <a href="#" class="nav.last">网络新闻</a>
        </div>

        <div id="bottom">
            版权所有：小虾虾有限公司&nbsp;技术支持虾虾网络
        </div>
    </body>
</html>

在这里插入图片描述

在这里插入图片描述
字体默认高度16px,行高21px。所以，设置文字的行高line-height与容器的高height一致，文字就自动居中了，这样就整齐了
3.其他选择器

同级兄弟选择器(伪类选择器)：：nth-of-type(number)，跟在某一个选择器后面，起到进一步修饰的作用，number不是他在兄弟元素的排名。但是如果增加一个li,而原来是根据li的顺序分配图片，增加li就打乱了顺序，所以引入了详细解析看代码中的分析
根据文件不同的后缀名来对应显示不同的图标

兄弟选择器

<!DOCTYPE>

<head>
    <title>同级兄弟选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">
        ul li a{
            background-image: url(images/icon.png);
            background-repeat: no-repeat;
            padding-right: 30px;
            background-position: right;
        }
        /*不能写成a:nth-of-type(number),因为a在所属的同级li中都是排行老大*/
        ul li:nth-of-type(1) a {background-position-y: -6px;}
        ul li:nth-of-type(2) a {background-position-y: -46px;}
        ul li:nth-of-type(3) a {background-position-y: -86px;}
        ul li:nth-of-type(4) a {background-position-y: -126px;}
        ul li:nth-of-type(5) a {background-position-y: -166px;}
        ul li:nth-of-type(6) a {background-position-y: -206px;}
        ul li:nth-of-type(7) a {background-position-y: -246px;}
    </style>
</head>

<body>
        <ul>
            <li><a href="xxx.com">电脑</a></li>
            <li><a href="xxx.mp3">music</a></li>
            <li><a href="xxx.tool">tool工具</a></li>
            <li><a href="xxx.folder">文件1</a></li>
            <li><a href="xxx.addfolder">文件2</a></li>
            <li><a href="xxx.addFolder">文件3</a></li>
            <li><a href="xxx.html">html文档</a></li>
        </ul>
</body>

</html>

属性（后缀名）选择器

<!DOCTYPE>

<head>
    <title>后缀名选择器</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">
        ul li a{
            background-image: url(images/icon.png);
            background-repeat: no-repeat;
            padding-right: 30px;
            background-position: right;
        }
        /*不能写成a:nth-of-type(number),因为a在所属的同级li中都是排行老大*/
        ul li a[href$='.com'] {background-position-y: -6px;}
        ul li a[href$='.mp3'] {background-position-y: -46px;}
        ul li a[href$='.tool'] {background-position-y: -86px;}
        ul li a[href$='.folder'] {background-position-y: -126px;}
        ul li a[href$='.addfolder'] {background-position-y: -166px;}
        ul li a[href$='.jpg'] {background-position-y: -206px;}
        ul li a[href$='.html'] {background-position-y: -246px;}
    </style>
</head>

<body>
        <ul>
            <li><a href="xxx.com">电脑</a></li>
            <li><a href="xxx.mp3">music</a></li>
            <li><a href="xxx.tool">tool工具</a></li>
            <li><a href="xxx.folder">文件1</a></li>
            <li><a href="xxx.addfolder">文件2</a></li>
            <li><a href="xxx.jpg">照片</a></li>
            <li><a href="xxx.html">html文档</a></li>
        </ul>
</body>

</html>

在这里插入图片描述

其余各类选择器

其中nth-of-type(number)和nth-child(number)的区别在于：nth-typ是根据类型来查找的，nth-child是根据自然顺序来编号

<!DOCTYPE>

<head>
    <title>电影排行榜</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: none;
            /*CSS重置*/
            list-style: none;
        }
        img{
            height: 80px;
            vertical-align: middle;
        }
        ul{
            width: 600px;
            margin: 50px auto;
            border-radius: 4px;
            /*ul设定了圆角，蓝色背景是加给li标签的，所以给ul添加一个overflow：hidden圆角才能生效*/
            overflow: hidden;
        }
        ul li{
            height: 90px;
            line-height: 90px;
        }
        ul li span{
            display: inline-block;
            width: 29px;
            height: 32px;
            background: url(images/stars.png);
            background-position-y: -98px;
        }
        /*选中li当中的第一个元素*/
        ul li:first-child{
            height: 40px;
            background: #22A4FF;
            line-height: 40px;
            font-weight: bold;
        }
        /*even偶数行*/
        ul li:nth-of-type(even){
            background: #eee;
        }
        ul li div{
            float: left;
            text-align: center;
        }
        ul li div:nth-child(1){
            width: 120px;
        }
        ul li div:nth-child(2){
            width: 250px;
        }
        ul li div:nth-child(3){
            width: 100px;
        }
        ul li div:nth-child(4){
            width: 130px;
        }

    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <div>电影</div>
                <div>IMDB电影排行</div>
                <div>评分</div>
                <div>年份</div>
            </li>
            <li>
                <div><img src="images/No1.png"></div>
                <div>No1.《唐人街探案》</div>
                <div><span></span>9.3</div>
                <div>2015</div>
            </li>
            <li>
                <div><img src="images/No2.png"></div>
                <div>No2.《我和我的家乡》</div>
                <div><span></span>9.2</div>
                <div>2020</div>
            </li>
            <li>
                <div><img src="images/No3.png"></div>
                <div>No3.《扫黑英雄》</div>
                <div><span></span>9.0</div>
                <div>2020</div>
            </li>
            
        </ul>
    </div>  
</body>

</html>

在这里插入图片描述