day006——CSS选择器和伪元素

最新推荐文章于 2023-03-17 10:58:40 发布

王总总

最新推荐文章于 2023-03-17 10:58:40 发布

阅读量104

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/Teeeeesting/article/details/112236551

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.CSS伪类选择器：

伪类：专门用来表示元素的一种特殊状态。

常用伪类选择器：

1）:link/:visited/:hover/:active

2）:focus获得焦点

3）:first-child/:last-child/:nth-child(number)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS伪类选择器</title>
    <style>
        a:link{/*这里:link可以省略*/
            color:red;
        }
        a:visited{
            color:green;
        }
        a:hover{
            color:yellow;
        }
        a:active{
            color: blue;
        }

        input:focus{
            outline:1px solid red;
        }

        ul li:first-child{
            color: #75e0ee;
        }
        ul li:last-child{
            color: darkorange;
        }
        ul li:nth-child(2){
            color: fuchsia;
        }
    </style>
</head>
<body>
    <a href="#">单击wo跳转</a>
    <input type="text">
    <ul>
        <li>aaaa</li>
        <li>aaaa</li>
        <li>aaaa</li>
        <li>aaaa</li>
    </ul>
</body>
</html>

2.属性选择器：

[属性名]：包含有指定属性名的元素（常用）

[属性名=值]：属性名的值为指定值的元素（常用）

[属性名~=值]：属性名的值包含指定值的元素

[属性名^=值]：属性名的值以指定值的开头的元素

[属性名$=值]：属性名的值以指定值的结尾的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS属性选择器</title>
    <style>
        div.content[title]{
            font-weight:bold;
        }

        input[name=two]{
            background-color: aqua;
        }

        /*div[class~=box2]{*/
            /*background-color: blue;*/
        /*}*/

        div[class^=content2]{
            background-color: blue;
        }

        div[class$=box2]{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="content1 box1 box2" title="内容">content1</div>
    <div class="content2 box2">content2</div>

    <form action="">
        <input type="text" name="one">
        <input type="text" name="two">
    </form>
</body>
</html>

3.关系选择器：

1）空格：后代选择器

2）>：只选择儿子元素

3）+：兄弟选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS关系选择器</title>
    <style>
        /*h1 strong{   后代选择器：空格选择所有*/
            /*color: red;*/
            /*background-color: gray;*/

        /*}*/
        /*h1>strong{*/
        /*!*>：只选择儿子元素*!*/
            /*color: red;*/
            /*background-color: gray;*/

        /*}*/

        ul li+li+li{
            list-style-type: none;
            color: fuchsia;
        }
    </style>
</head>
<body>
    <h1><strong>关系1</strong> <span> <strong> 关系2</strong></span></h1>

    <ul>
        <li>aa1</li>
        <li>aa2</li>
        <li>aa3</li>
        <li>aa4</li>
        <li>aa5</li>
    </ul>
</body>
</html>

4.CSS伪元素

CSS伪元素与伪类区别：
CSS引入伪类和伪元素槪念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。
伪类用于当己有元素处于的某个状态时，为其添加对应的样式，这个状态足根据用户行为而动态变化的。
它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本.，并为这些文本添加样式。虽然用户可以狞到这些文本，但是这些文本实际上不存在文档树中。

伪元素&伪类的特点：
伪元素和伪类都不会出现在源文档或者文档树中
伪类允许出现在选择器的任何位罝，而一个伪元素只能跟在选择器的最后一个简单选择器后面
伪元素名和伪类名都是大小写不敏感的
有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）。

1）:before/:after/:first-letter/:first-line等：前面可以是一个冒号，也可以是双冒号。

2）::selection/::placeholder/::backdrop等：前面只能是双冒号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        p:first-letter{
            font:60px 黑体;
            color: red;
            text-indent: 2em;
        }
        p:first-line{
            text-decoration: underline;
        }
        p:before{
            content: "❀";
        }
        p:after{
            content: "❀";
        }
    </style>
</head>
<body>
    <p>高颜值，2种模式的趣味基地。此款商品为乐高根据我国经典名著《西游记》灵感推出的全新ip系“悟空小侠系列”，以致敬西游记和美猴王的传奇故事
        打造，传承了人物形象中勇.</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业1</title>
    <link rel="stylesheet" href="css/zy1.css">
</head>
<body>
    <!--开发思路，先整体，再局部;从上至下开发-->
    <div class="wrapper">
        <h1>被子大促销</h1>
        <p> <span class="summary">摘要：</span>丝滑与保暖兼备～</p>
        <p>此款被子采用中间优质层原料，放弃了茧衣层，茧衬层，优质层蚕丝细腻柔软的触感，让您拥有更优质睡眠。此款尺寸：200*230cm，填充物1250g。</p>
        <p>京东现售价739元，参加满199元减140元活动，使用满359减200券，到手价399元，近期好价。</p>
        <p>叠加优惠券：满359元减200元</p>
        <p>什么值得买是一家中立的消费门户网站:</p>
        <ul>
            <li><a href="">好价信息来自热心值友爆料和商家自荐</a></li>
            <li><a href="">经小编人工审核或小值机器人智能判断后发布</a></li>
            <li><a href="">促销折扣可能随时变化</a></li>
            <li><a href="">请值友们购买前注意核实</a></li>
        </ul>
    </div>
</body>
</html>

*{
    /*样式初始化*/
    margin:0;
    padding:0;
}
body{
    padding: 10px 0;
    font-family: 微软雅黑;

}
.wrapper{
    width: 640px;
    border:1px solid #ccc;
    padding:20px;
    margin: 0 auto; /*左右居中*/
}

h1{
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    margin: 10px 0 20px;  /*上边距为10px，左右为0，下边距为20px*/
    color: coral;
}
p{
    font-size: 12px;
    text-indent: 2em;  /*缩进两个字*/
    margin: 1.5em 0 ;  /*上下边距为1.5倍字符距离，左右为0*/
    line-height: 1.5em;  /*行距为1.5倍字符距离*/
}
h1+p{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    text-indent: 0; /*缩进0*/
    color: #75e0ee;
    font-size: 12px;
}
.summary{
    color: #ff353b;
}
ul{
    list-style-type: none; /*取消列表前的点*/
    text-indent: 5ex;
    font-size: 12px;
}
ul li{
    line-height: 2em;
}
a{
    color: #666666;
    text-decoration: none;  /*取消a标签的下划线*/
}
a:hover{
    color: #000000;
    text-decoration: underline;
}

王总总

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day006——CSS选择器和伪元素

1.CSS伪类选择器：伪类：专门用来表示元素的一种特殊状态。常用伪类选择器： 1）:link/:visited/:hover/:active 2）:focus获得焦点 3）:first-child/:last-child/:nth-child(number)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&...
复制链接

扫一扫