CSS语法基础

卑微的玩对抗
118 阅读1分钟

选择器

1.行内写样式（避免出现行内写法）

案例：
<div style="height: 100px; width: 100px; background-color: black;"></div>

2.在head中写，用style标签写样式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .container{
            height: 100px;
            width: 100px;
            background-color: chartreuse;
        }
     </style>
     <body>
         <div id="container"></div>
     </body>
 </head>

3.外连写样式（常用）

Snipaste_2022-07-14_14-50-01.png

id选择器：#

案例：
<style>
#container{
    background-color: crimson;
}
</style>
<body>
    <div id="container"></div>
</body>

class选择器 .

案例：
<style>
.container{
    background-color: crimson;
}
</style>
<body>
    <div class="container"></div>
</body>

空格键：后代选择器

案例：
 <style>
#container1 .container-div{
        height: 100px;
        width: 100px;
        background-color: crimson;
    }
</style>
<body>
    <div id="container1">
    <div class="container-div"></div>
</div>
</body>

> 子代选择器

案例：
<style>
.container2>.container-div{
        height: 100px;
        width: 100px;
        background-color: darkkhaki;
    }
</style>
<body>
    <div class="container2">
        <div class="container-div">
            <div class="container-div"></div>
        </div>
    </div>
</body>

, 并集选择器

案例：
<style>
.container,.container3{
        height: 100px;
        width: 100px;
        background-color: chartreuse;
    }
</style>
<body>
    <div class="container"></div>
    <div class="container3"></div>
</body>

* 通配选择器 （全局选择器）

案例：
<style>
*{
    position: 0;
    margin: 0;
}
</style>

:first-child 选中的所有元素的第一个，必须是第一个子元素

:last-child 选中的所有元素的最后一个

:first-of-type 选中的所有元素的第一个

:last-of-type 选中的所有元素的最后一个

:nth-chid(n) 取出满足条件的元素，并且是第n个子元素

:nth-of-type(n) 取出满足条件的n个

:not(其他选择器)

案例：
<body>
    <div id="app">
    <input type="text">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <ul class="list">
        <p>11111</p>
        <li id="item1" class="item">item</li>
        <li id="item2" class="item">item</li>
        <li id="item3" class="item">item</li>
        <li id="item4" class="item">item</li>
    </ul>
</div>
<br>
<br>
<div id="app2">
    <input type="text">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <ul class="list">
        <p>11111</p>
        <li id="item1" class="item">item</li>
        <li id="item2" class="item">item</li>
        <li id="item3" class="item">item</li>
        <li id="item4" class="item">item</li>
    </ul>
</div>
<div class="menu-div">
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</body>
<style>
.container,.container3{
让p标签下面的第一个li改变背景颜色
    #app>.list>.item:nth-child(2){
        background-color: cornflowerblue;
    }
让p标签下面的第二个li改变背景颜色
    #app>.list>.item:nth-child(3){
        background-color: crimson;
    }
让p标签下面的第最后一个li改变背景颜色
    #app>.list>.item:last-child{
        background-color: darkblue;
    }
让p标签下面的第三个li不变其他的改变背景颜色
    #app2>.list>.item:not(:nth-child(3)){
        background-color: darkorchid;
    }
[属性名="属性值"] 属性选择器
    #app>input[type="checkbox"]{
        height: 50px;
        width: 50px;
    }
::before :在最前边添加文本
    .menu-div::before{
        content: "大";
    }
::before :在最前边添加元素
    .menu-div::before{
        content: "";
        display: table;
        height: 30px;
        width: 30px;
        background-color: rgb(255, 0, 179);
    }
::afterq :在最后边添加文本
    .menu-div::after{
        content: "小";
    }
::after :在最后边添加元素
    .menu-div::after{
        content: "";
        display: table;
        height: 30px;
        width: 30px;
        background-color: rgb(255, 0, 179);
    }
::selection ：获取选中的文本
    .menu-div::selection{
        color: #ffff;
        background-color:  rgb(255, 0, 179);
    }
</style>
avatar
文章
阅读
粉丝