css3伪类、表单控件伪类、文本相关伪类、afater清浮动、not选择器、毗邻元素、文字缩略

最新推荐文章于 2024-04-25 20:37:26 发布

wangyuanti

最新推荐文章于 2024-04-25 20:37:26 发布

阅读量547

点赞数

本文链接：https://blog.csdn.net/wangyuanti/article/details/78990255

版权

0804

css3伪类

target

突出显示活动的 HTML 锚

div:target{
            background: #0e3757;
        }

表单控件伪类

<style>
        input:enabled{
            background-color: #FFF2AB;
        }
        input:disabled{
            background-color: #f00;
        }
</style>

<body>
<input type="text" enabled>
<input type="text" disabled>
</body>

文本相关伪类

<style>
        p{
            width:400px;
        }
        p:first-line{
            color: #fff;
            background-color: #0e3757;
        }
        p:first-letter{
            font-size: 30px;
        }
    </style>

p::selection{
            color: #fff;

            background: rgba(0,0,0,0.9);

 }

p::selection 表示P元素在用户选中文字时
只能改变文字的颜色以及背景颜色

 p:before{
            position: absolute;
            left: 100px;
            top:300px;
            content: '这是我输入的文字';
            color: #fff;
            width:200px;
            height:300px;
            display: inline-block;
            background: url("images/04.png");
        }

        p:after{
            content: '';
            width:100px;
            height:200px;
            display: inline-block;
            background-color: #0e3757;
        }

在每个

元素的内容之前插入新内容： :before
在每个

元素的内容之后插入新内容： :after

afater清浮动

 <style>
        .clearFix{
            *zoom:1;
        }
        .clearFix:after{
            content:'';
            display:block;
            clear:both;
        }

not选择器

p:not(s) 除了s以外所有的p元素

 p:not(#main){
            background-color: #0e3757;
}

毗邻元素

E~F 表示选择E元素后面同级的所有F元素

<style>
        h1~div{
            background-color: #0e3757;
        }
</style>

E+F 表示选择E元素后面同级紧跟着的第一个F元素

<style>
        h1+h2{
            background-color: #0e3757;
        }
    </style>

文字缩略

text-overflow: ellipsis; 文字溢出显示省略号
一定要配合
overflow: hidden;
white-space: nowrap;
使用

<style>
        p{
            background-color: #0e3757;
            color: #fff;
            width:400px;
            height:30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>