Day02

1.导入方式

/*外部样式*/
h3{
    color:yellow;
}
h4{
    color:green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2{
            color:blue;
        }

        @import url("css/style.css");
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我的标题1</h1>
<h2>我的标题2</h2>
<h3>我的标题3</h3>
<h4>我的标题4</h4>
</body>
</html>

2.三种基本选择器

作用：选择页面上的某一个或者某一类元素

2.1基本选择器

1.标签选择器:选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: #b5c1cd;
            background:lavenderblush;
            border-radius:24px;
        /*border-radius表示圆角 */
        }
        p{
            font-size:40px;
        }
    </style>
</head>
<body>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<p>标签选择器1</p>
<p>标签选择器2</p>
<p>标签选择器3</p>
</body>
</html>

2.类选择器 class: 选择所有class属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式  以 .class的名称{}
        好处：可以多个标签归类，是同一个class，可以复用*/
        .xcl{
            color:#3748ff;
        }
        .cl{
            color:#a24fff;
        }
    </style>
</head>
<body>
<h1 class="xcl">类选择器1</h1>
<h1 class="cl">类选择器2</h1>
<h1>类选择器3</h1>
<p class="cl" style=" font-size: 40px">p标签</p>
</body>
</html>

3.id选择器：全局唯一！#id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
   /* id选择器
    #id名称{}
    id选择器不能复用，class选择器可以复用
    优先规则：id选择器>类选择器>标签选择器
    */
    <style>
        #xcl{
            color:indianred;
        }
        #cl{
            color:#b5c1cd;
        }
    </style>
</head>
<body>
<h1 id="xcl">id选择器</h1>
<h1>id选择器</h1>
<h1 id="cl">id选择器</h1>
<h1>id选择器</h1>
</body>
</html>

2.2层次选择器

1.后代选择器：在某个元素的后面（祖爷爷爷爷爸爸你）

body p{
    background: #cf64ec;
}

2.子选择器（只有一代，儿子）

body>p{
    background: lavenderblush;
    border-radius:30px;
}

3.相邻兄弟选择器（同辈）

运行结果只有p2变色，相邻选择器只针对于同级别的相邻的后者
<style>
        .active+p{
            color:red;
        }
    </style>
</head>
<body>
<p >p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>

4.通用选择器: 通用兄弟选择器，当前选中元素向下所有的兄弟元素(与兄弟选择器的不同点是一个是向下一个兄弟，一个是向下所有兄弟)

        .active~p{
            background: aliceblue;
        }
         
    </style>
</head>
<body>
<p >p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>

2.3结构伪类选择器

    <style>
/*ul的第一个元素*/
        ul li:first-child{
            background: #3748ff;
        }
/*ul的最后一个子类*/
        ul li:last-child{
            background: #a24fff;
        }
    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
/*ul的第一个元素*/
        ul li:first-child{
            background: #3748ff;
        }
/*ul的最后一个子类*/
        ul li:last-child{
            background: #a24fff;
        }
/*选择当前p元素的父级元素，选中父级元素的一个，并且是当前元素才生效（选父级元素中的低n个子元素，n由括号里的数决定）*/
        p:nth-child(2){
            background: #91889b;
        }
        /*选中父级下的p元素的第二n*/
        h1:nth-of-type(2){
            background: indianred;
        }
        /*特效标签hover*/
        a:hover{
            background: black;
        }
    </style>
</head>
<body>
<!--用了h1会影响p:nth-fist(){}标签的实现
<h1>h1</h1>-->
<a href="">1231223</a>
<h1>11111</h1>
<h1>11111</h1>

<p >p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>li1</p>
    </li>
    <li>
        <p>li2</p>
    </li>
    <li>
        <p>li3 </p>
    </li>
</ul>
</body>
</html>

posted @ 2022-10-05 00:14 宙斯xcl 阅读(126) 评论(0) 收藏举报

刷新页面返回顶部

xclxcl