CSS(九) 更多的选择器和更多的样式

最新推荐文章于 2024-04-21 18:11:50 发布

码界索隆

最新推荐文章于 2024-04-21 18:11:50 发布

阅读量173

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/COOL66BOY/article/details/123308530

版权

文章目录

更多的选择器
- 更多伪类选择器
- 更多的伪元素选择器
更多的样式

更多的选择器

更多伪类选择器

测试的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更多的选择器</title>

    <Style>
        /* div a:first-child{
            color: red;
        } div下的第一个a元素字体无法显示颜色*/

        div>a:first-of-type{
            color: green;
        } /*第一个div下的a元素字体显示绿色*/

        /* div a:last-child{
            color: blue;
        } div下的最后一个a元素字体不显示颜色 */

        div a:last-of-type{
            color: yellow;
        } /*div下的最后一个a元素字体显示黄色*/
        
        div a:nth-child(3){
            color:pink;
        } /*div下的第三个子元素或是第二个a元素字体颜色为粉色*/

        div a:nth-last-of-type(3){
            color: aquamarine;
        }/*div下的第三个a元素字体颜色为青色*/

        .test1 p::first-letter{
            color: red;
        }

        .test1 p::first-line{
            color: bisque;
        }

        .test1 p::selection{
            color: chocolate;
            background-color: blue;
        } /*用鼠标选中的文字颜色为巧克力色，背景为蓝色*/

    </Style>
</head>
<body>
    <div>
        <p>fdmashdiansdansdnada</p>
        <a href="">Lorem.</a>
        <a href="">Aliquam!</a>
        <a href="">Accusantium?</a>
        <a href="">Minus.</a>
        <a href="">Consequatur!</a>
        <a href="">Incidunt.</a>
        <p>dnioasndoipnasdldma;nd</p>
    </div>

    <div class="test1">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo assumenda officia omnis animi consectetur totam veritatis alias nisi! Fuga atque beatae totam quia magni reprehenderit ex ea qui animi tempore saepe modi quam rerum voluptatum vero sint, assumenda quis consequuntur, et ducimus similique doloremque enim! Esse facere tenetur, iste illum fugit natus rerum? Reiciendis nulla cumque aspernatur ducimus officiis, quaerat ex mollitia veniam quo iusto labore minus, molestias, non ipsa! Ea rerum ut illo facilis dicta. A illo temporibus similique iure, sed aliquid sint. Harum aut magnam quae nisi id nemo dolores architecto, consequatur labore nam, voluptate natus iure soluta!</p>
    </div>
</body>
</html>

效果图:
在这里插入图片描述

first-child: 选择第一个子元素

        /* div a:first-child{
            color: red;
        } div下的第一个a元素字体无法显示颜色*/

first-of-type: 选中子元素中第一个指定类型的元素

        div>a:first-of-type{
            color: green;
        } /*第一个div下的a元素字体显示绿色*/

last-child

        /* div a:last-child{
            color: blue;
        } div下的最后一个a元素字体不显示颜色 */

nth-child: 选中指定的第几个子元素

     div a:nth-child(3){
            color:pink;
        } /*div下的第三个子元素或是第二个a元素字体颜色为粉色*/

nth-of-type: 选中指定的子元素中第几个某类型的元素

        div a:nth-last-of-type(3){
            color: aquamarine;
        }/*div下的第三个a元素字体颜色为青色*/

更多的样式

透明度

opacity，它设置的是整个元素的透明，它的取值是0 ~ 1
在颜色位置设置alpha通道(rgba )

鼠标

使用cursor设置

盒子隐藏

原本网页样式：
在这里插入图片描述

display:none，不生成盒子
如图：
visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。
如图：

背景图

和img元素的区别

img元素是属于HTML的概念

背景图属于css的概念

当图片属于网页内容时，必须使用img元素
当图片仅用于美化页面时，必须使用背景图

涉及的css属性

background-image：用url来书写背景图的位置。
background-repeat：默认情况下，背景图会在横坐标和纵坐标中进行重复
background-size：预设值：contain、cover，类似于object-fit数值或百分比
background-position：设置背景图的位置。预设值：left、bottom、right、top、center数值或百分比
雪碧图（精灵图）（spirit）：多个图标放在一个图上，同过改变背景图的位置来选择想要的图标。
background-attachment：通常用它控制背景图是否固定。
背景图和背景颜色混用
速写（简写）background

码界索隆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS(九) 更多的选择器和更多的样式

更多的选择器更多伪类选择器first-child选择第一个子元素first-of-type，选中子元素中第一个指定类型的元素last-childnth-child选中指定的第几个子元素nth-of-type选中指定的子元素中第几个某类型的元素更多的伪元素选择器first-letter选中元素中的第一个字母first-line选中元素中第一行的文字selection选中被用户框选的文字...
复制链接

扫一扫