css基础

最新推荐文章于 2024-11-11 23:45:17 发布

Cling007

最新推荐文章于 2024-11-11 23:45:17 发布

阅读量71

点赞数

文章标签： css css3 less

本文链接：https://blog.csdn.net/Cling_y/article/details/121184497

版权

1、三种基本选择器

a.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: aqua;
        }
    </style>
</head>
<body>
<h1>标签选择器</h1>
</body>
</html>

b.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            color: antiquewhite;
        }
    </style>
</head>
<body>
<h1 class="a">类选择器</h1>
</body>
</html>

c. id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a{
            color: antiquewhite;
        }
    </style>
</head>
<body>
<h1 id="a">id选择器</h1>
</body>
</html>

3层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器：在某个元素的后面的有的p1、p2、p3、p4、p5、p6*/
        /*body p{*/
        /*    background: aqua;*/
        /*}*/

        /*子选择器：只有后面一代的即body的下的：p1、p2、p3*/
        /*body>p{*/
        /*    background: antiquewhite;*/
        /*}*/

        /*相邻兄弟选择器：只有自己的同辈且只有下面的第一个即p5*/
        /*.a + p{*/
        /*    background: aquamarine;*/
        /*}*/

        /*通用兄弟选择器：当前元素的下面的所有兄弟即p5p6*/
        /*.a~p{*/
        /*    background: blueviolet;*/
        /*}*/
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p class="a">p4</p>
        <p>p5</p>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

4、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
        /*ul li:first-child{*/
        /*    background: blueviolet;*/
        /*}*/
        /*ul的最后一个子元素*/
        /*ul li:last-child{*/
        /*    background: aquamarine;*/
        /*}*/
        /*选中p1：定位到父元素，选择当前第一个元素，只有第一个是当前元素才能生效*/
        /*p:nth-child(1){*/
        /*    background: aqua;*/
        /*}*/
        /*选中父元素下的p元素的第一个对应的类型*/
        /*p:nth-of-type(1){*/
        /*    background: antiquewhite;*/
        }
    </style>
</head>
<body>
<h1>的方法</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>