2021-07-27 知识总结-优快云博客

本文链接：https://blog.youkuaiyun.com/DMKSA/article/details/119149881

本文介绍了CSS中的双飞翼宽高自适应布局方法，并详细解释了各种CSS属性选择器及结构伪类选择器的应用，包括如何针对不同状态的UI元素进行样式设定。

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

一、“双飞翼宽高自适应”

1.给第一个第二个元素设置宽高左浮动第三个元素width为100% overflow：hidden

   <style>
        html,body{
            height: 100%;
        }
        .box1 ,.box2{
            width: 300px;
            height: 100%;
            background-color: chartreuse;
        }
        .box1{
            float: left;
        }
        .box2{
            float: right;
        }
        .box3{
            height: 100%;
            background-color: cyan;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

2.给box3 一个子元素设置子元素宽高为100% margin 0px 300px;

        html,body{
            height: 100%;
        }
        .box1 ,.box2{
            width: 300px;
            height: 100%;
            background-color: chartreuse;
        }
        .box1{
            float: left;
        }
        .box2{
            float: right;
        }
        .box3{
            height: 100%;
            background-color: cyan;
            overflow: hidden;
        }
        .son{
            height: 100%;
            height: 100%;
            margin: 0px 300px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        <div class="son"></div>
    </div>
</body>

二、css属性选择器

E[attr]	希望选择有某个属性的元素，而不论属性值是什么例如：a[href]{color:red;}
E[attr=”value”]	除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素例如: a[href=”www.baidu.com”]{color:red;}
E[attr^=”value”]	指定了属性，并且指定了属性值，属性值是以value开头的例如：a[title^="text"] {color: red;}
E[attr$=”value”]	指定了属性，并且指定了属性值，属性值是以value结尾的例如：a[title$="text"] {color: red;}

    <style>
        [type=text]{
            width: 200px;
            height: 60px;
           background-color: cyan;
        }
        [href="http://www.taobao.com"]{
            text-decoration: none;
            color: red;
            font-size: 20px;
        }
    </style>

三、结构伪类选择器：

E:fisrt-child	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E F:nth-child(n)	选择父元素E的第n个子元素F。:nth-child(length)、:nth-child(n)、:nth-child(nlength)、:nth-child(n+length)、:nth-child(-n+length)、:nth-child(nlength+1)
:nth-last-child()	选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:only-child	选择的元素是它的父元素的唯一一个子元素；
:first-of-type	选择一个上级元素下的第一个同类子元素
:last-of-type	选择一个上级元素的最后一个同类子元素
:nth-of-type()	选择指定的元素，类似于:nth-child，不同的是他只计算选择器中指定的那个元素。
:nth-last-of-type()	选择指定的元素，从元素的最后一个开始计算
:only-of-type	选择一个元素是它的上级元素的唯一一个相同类型的子元素
:empty	选择的元素里面没有任何内容
:root	选择文档的根元素

    <style>
        p:nth-child(odd){
            color: green;
            background-color: lemonchiffon;
            font-size: 20px;
        }
        p:nth-child(even){
            color: gold;
            background-color: white;
        }
        p:first-child{
            color: turquoise;
        }
        p:last-child{
            color: violet;
        }
        p:nth-child(5){
            color: sienna;
        }
    </style>

四、css伪类选择器

UI状态伪类选择器

input:enabled{ 可用状态下的样式}

input:disabled{ 禁用状态下的样式}

input:checked{ 选中状态下的样式}

否定伪类选择器

:not() 除了什么什么可以让你定位不匹配该选择器的元素

目标伪类选择器

:target 选择器可用于选取当前活动的目标元素。

使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

    <style>
        [type=text]{
            width: 200px;
            height: 80px;
        }
        [type=text]:disabled{
            width: 100px;
            height: 40px;
        }
        [type=text]:focus{
            background-color: skyblue;
        }
        [type=radio]:checked{
            appearance: none;
            width: 10px;
            height: 10px;
            background-color: chartreuse;
            border: 1px solid black;
        }
        [type=password]:focus{
            outline: none;
            border: 1px solid yellow;
        }
    </style>

    <style>
        input:not(.button){
            width: 500px;
            height: 80px;
            margin-bottom: 30px;
        }
        .button{
            margin-right: 100px;
            width: 100px;
            height: 60px;
        }
    </style>

后代选择器

  .one>div{
            width: 300px;
            height: 300px;
            /* background-color: royalblue; */