CSS学习日记12-选择器4-伪类选择器6

最新推荐文章于 2024-08-27 15:10:51 发布

此时的你才是你

最新推荐文章于 2024-08-27 15:10:51 发布

阅读量198

点赞数

分类专栏： CSS 学习日记文章标签： css

本文链接：https://blog.csdn.net/qq_24681419/article/details/107982417

版权

CSS 学习日记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

（四）伪类选择器
3.都有哪些呢？
1）:超链接伪类
2）结构伪类
3）表单伪类
4）字符伪类
注意这里其实是伪元素，要用:: 两个冒号

首字母大写

通过对文本标签的选择，可以对其内容进行操作，比如首字母大写

<body>
   
<p>
    他们都到海边去了。我为左眼发炎不曾去。我独坐在前廊，偎坐在一张安适的大椅内，袒着胸怀，赤着脚，一头的散发，不时有风来撩拂。清晨的晴爽，不曾消醒我初起时睡态；但梦思却半被晓风吹断。我阖紧眼帘内视，只见一斑斑消残的颜色，一似晚霞的余赭，留恋地胶附在天边。廊前的马樱、紫荆、藤萝、青翠的叶与鲜红的花，都将他们的妙影映印在水汀上，幻出幽媚的情态无数；我的臂上与胸前，亦满缀了绿荫的斜纹。
</p>
<p> 从树荫的间隙平望，正见海湾：海波亦似被晨曦唤醒，黄蓝相间的波光，在欣然的舞蹈。滩边不时见白涛涌起，进射着雪样的水花。浴线内点点的小舟与浴客，水禽似的浮着；幼童的欢叫，与水波拍岸声，与潜涛呜咽声，相间的起伏，竞报一滩的生趣与乐意。但我独坐的廊前，却只是静静的，静静的无甚声响。妩媚的马樱，只是幽幽的微辗着，蝇虫也敛翅不飞。只有远近树里的秋蝉，在纺纱似的垂引他们不尽的长吟。 
</p>

</body>

p::first-letter {
    font-size: 30px;
}

在这里插入图片描述

段落首行处理

p::first-line {
         font-size: 20px;
}

在这里插入图片描述

在元素前添加

还可以直接在元素的内容前后添加，文字或样式

<!--html-->
<span>
五月天山雪，无花只有寒。
</span>

/*CSS*/
    span::before{
        content:" 这是谁写的  ";
        color: blue;
    }

    span::after{
        content: "  李白写的";
        color: red;
    }

在这里插入图片描述

搜索框示例

cursor: pointer;就是鼠标经过时，会有一只小手

<body>
   <div>
       <input type="text">
       <span></span>
   </div>


</body>

        <style>
            div{
                border: solid 1px #ddd;
                width: 220px;
            }
            div>input[type="text"]+span:after{
                content: "确定";
                cursor: pointer;
            }


        </style>

在这里插入图片描述

此时的你才是你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习日记12-选择器4-伪类选择器6

（四）伪类选择器3.都有哪些呢？1）:超链接伪类2）结构伪类3）表单伪类4）字符伪类注意这里其实是伪元素，要用:: 两个冒号首字母大写通过对文本标签的选择，可以对其内容进行操作，比如首字母大写<body> <p> 他们都到海边去了。我为左眼发炎不曾去。我独坐在前廊，偎坐在一张安适的大椅内，袒着胸怀，赤着脚，一头的散发，不时有风来撩拂。清晨的晴爽，不曾消醒我初起时睡态；但梦思却半被晓风吹断。我阖紧眼帘内视，只见一斑斑消残的颜色，一似晚霞的余赭，留恋地胶
复制链接

扫一扫