第三周预习

最新推荐文章于 2024-07-13 20:38:58 发布

李白飞

最新推荐文章于 2024-07-13 20:38:58 发布

阅读量93

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/weixin_67569323/article/details/124317977

版权

一、高级选择器

类选择器、属性选择器、伪类选择器权重是10
高级选择器和基础选择器可以复合使用

1、后代选择器

又称包含选择器，选择父元素里的子元素，类似于相对路径的写法，最终选择的是子元素

<style>
    ul li {
        color: red;
    }
</style>

<ul>
     <li>我想吃泡面</li>
     <p>我想吃泡面</p>
</ul>

效果图
子选择器只能选择作为元素的最近一级子元素，选亲儿子元素
语法：

元素1 > 元素2 (样式声明)

例如：

<style>
    .nav>div {
        color: aquamarine;
    }
</style>
<body>
    <div>
    <!-- 类选择器选择了ul,ul就是家长 -->
        <ul class="nav">
            <li>我想吃泡面</li>
            <li>我想吃泡面</li>
            <div>
                <p>i`m grandson</p>
            </div>
        </ul>
    </div>
</body>

效果图

2、并集选择器

可以选择多组标签，同时为他们定义相同的样式，用于集体声明。

<style>
    ol,
    p {
        color: pink;
    }
</style>
<body>
    <div>
        <ul>
            <li>我想吃泡面</li>
            <li>我想吃泡面</li>
            <div>
                <p>i`m grandson</p>
            </div>
        </ul>
        <ol>
            <li>我不想吃紫色</li>
            <li>我不想吃紫色</li>
        </ol>
    </div>
</body>

效果图
可以看到，并集选择器并没有受到父子级别的限制，在 ul标签中的 div标签中的p标签中的字符也受到了修饰。

3、伪类选择器

为了更好的记忆，来一个中二的名字
伪•类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个、第n个元素。
书写特点：用冒号表示（：），比如 :hover、:first-child等

链接伪类选择器

<style>
    /* 1.未访问过的链接 a:link */
    a:link {
        color: blue;
        text-decoration: none;
    } 
    /* 2.选择点击过的链接 a:visited */
    a:visited {
        color: orange;
    }
    /* 3.鼠标经过的那个链接 :hover */
    a:hover {
        color: purple;
    }
    /* 4.按下时的样式 a:active */
    a:active {
        color: red;
    }
</style>
<body>
    <p>
        <a href="https://www.jianshu.com/p/99a03b460f84" target="_blank">点击之后变色</a>
    </p>
</body>
<!-- 这个herf里的链接是一篇简书中的“a链接的伪类选择器杂谈” -->

链接伪类的注意事项：

为了确保生效，有特定声明顺序 :link - 、:visited-、:hover - 、:active；（LVHA）
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

<style>
    a {
        color: red;
    }
    a:hover {
        color: blue;
    }
</style>
<body>
    <p>
        <a href="https://www.jianshu.com/p/99a03b460f84" target="_blank">点击之后变色</a>
    </p>
</body>

focus伪类选择器
用于选取获得焦点的表单元素
焦点即光标，一般情况下input类表单才能获取，因此这个选择器也主要针对表单元素来说。

<style>
    input:focus {
        background-color: green;
    }
</style>
<body>
    <input type="text"><input type="text" name="" id="">
</body>

效果图
结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child-()	匹配父元素中的第n个子元素E

<style>
    /*last 同理*/
    ul :first-child {
        background-color: burlywood;
    }
    ul :nth-child(2){
        backgroung-color: yellow;
    }   
</style>
<body>
    <ul>
        <li>我是老大</li>
        <li>我是老二</li>
        <li>我是老三</li>
        <li>我是老四</li>
        <li>我是老五</li>
        <li>我是老六</li>
        <li>我是老七</li>
    </ul>
</body>

效果图
P.S. ul后必须有空格，不然所有的child都有背景
详解重点——nth-child()

数字类型，指定第几个子元素的样式；
关键字 even（偶数），odd（奇数）；
公式；

<style>
    ul :nth-child(odd) {
        background-color: greenyellow;
    }
</style>
<body>
    <ul>
        <li>我是老大</li>
        <li>我是老二</li>
        <li>我是老三</li>
        <li>我是老四</li>
        <li>我是老五</li>
        <li>我是老六</li>
        <li>我是老七</li>
    </ul>

在这里插入图片描述
公式（只能是n，而且n必须写在最前边）：

<style>
    ul :nth-child(2n) {
        background-color: greenyellow;
    }
</style>
<body>
    <ul>
        <li>我是老大</li>
        <li>我是老二</li>
        <li>我是老三</li>
        <li>我是老四</li>
        <li>我是老五</li>
        <li>我是老六</li>
        <li>我是老七</li>
    </ul>
</body>

效果图

公式总结：
在这里插入图片描述

4、属性选择器

根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性值等于val的E元素
E[att$=“val”]	匹配具有att属性且值以val结尾的E元素
E[att*=“val”]	匹配具有att属性且值含有val的E元素
E[att^=“val”]	匹配具有att属性且值以val结尾的E元素

基本形式：

<style>
    input[value]{
        color: rgb(253, 6, 6);
    }
</style>
<body>
    <input type="text" value="text">
    <input type="password">
</body>

效果图
选择“属性=属性值”的某些元素

<style>
    input[type = "text"]{
        color: rgb(253, 6, 6);
    }
</style>
<body>
    <input type="text" value="">
    <input type="password">
</body>

效果图
选择属性值开头的某些元素（^是开头,$是结尾）

<style>
    div[class^=icon]{
        color: rgb(253, 6, 6);
    }
</style>
<body>
    <div class="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="icon3">图标3</div>
    <div class="icoon4">图标4</div>
</body>

选择器里不写冒号也可以运行
效果图
至于"first-of-type"们与他们的区别，打算再写一个CSDN解决。
链接：

5、相邻选择器(+)

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻选择器
以+隔开相邻关系的元素(模块名+模块名修饰加号前模块往下的相邻的模块只一个)

<style>
    li + p {
        background-color: greenyellow;
    }
</style>
<body>
    <ul>
        <li>我是老大</li>
        <p>我是老二</p>
        <p>我是老三</p>
        <li>我是老四</li>
        <li>我是老五</li>
    </ul>
</body>

在这里插入图片描述

6、兄弟选择器(~)

如果标签都相同的情况下，相邻选择器和兄弟选择器效果相同
以~隔开相邻关系的元素(模块名+模块名修饰加号前模块往下的模块所有)

<style>
    li ~ p {
        background-color: greenyellow;
    }
</style>
<body>
    <ul>
        <li>我是老大</li>
        <p>我是老二</p>
        <p>我是老三</p>
        <li>我是老四</li>
        <p>我是老五</p>
    </ul>
</body>

隔了一个li的p仍然被修饰了
在这里插入图片描述

7、群选择器(,)

要为不同的HTML对象定义相同的样式时，可以采用群组声明。

<style>
    ol , p {
        background-color: greenyellow;
    }
</style>
<body>
    <ul>
        <li>我是老大</li>
        <p>我是老二</p>
        <p>我是老三</p>
        <li>我是老四</li>
        <p>我是老五</p>
    </ul>
    <ol>
        <li>我是老大</li>
        <p>我是老二</p>
        <p>我是老三</p>
        <li>我是老四</li>
        <p>我是老五</p>
    </ol>
</body>

在这里插入图片描述
很喜欢，不要顺序~
（有一种似曾相识的感觉）

二、背景、阴影、圆角边框

一、背景

1、背景颜色(bgc)
默认值为transparent（透明）
2、背景图片(bgi)
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置
url里写相对路径和绝对路径

background-image :none | url (url)

3、背景平铺(bgr)
在背景图像比盒子小的时，背景图像不会放大，会纵向或横向复制铺满整个盒子

background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认值）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

3、背景图像的位置(bgp)
利用background-position属性可以改变图片在背景中的位置。

 background-position: x y;

可以使用方位名词或者精确单位

如果都是方位名词，和顺序就没有关系了
若只指定了一个方位名词，另一个值省略，则默认居中对齐

<style>
/*没办法，我的狗图片太大了*/
    div {
        width: 3000px;
        height: 1000px;
        background-color: purple;
        background-image: url(../HTML笔记/图片/tupian/我的狗.jpg);
        background-repeat: no-repeat;
        background-position: center top;
    }
</style>
<body>
    <div></div>
</body>

在这里插入图片描述
如果是精确单位呢?
第一个肯定是x坐标，第二个肯定是y坐标
如果只指定一个数值，那数值一定是x坐标，另一个默认垂直居中

<style>
    div {
        width: 3000px;
        height: 1000px;
        background-color: purple;
        background-image: url(../HTML笔记/图片/tupian/我的狗.jpg);
        background-repeat: no-repeat;
        background-position: 200px;
    }
</style>
<body>
    <div></div>
</body>

在这里插入图片描述
4、背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。（视差滚动效果）

   background-attachment : scroll | fixed

参数	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定

5、背景色半透明
利用rgba写，和阴影透明度的原理一样

二、圆角边框

border-radius:属性值；
设置元素的外边框圆角
该属性值是一个圆的半径，半径越大，圆角边框的弧度就会越大

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: rgb(238, 5, 5);
        border-radius: 30px;
    }
</style>
<body>
    <div> </div>
</body>

在这里插入图片描述

圆角边框可以用来设置圆形，只需要使border-radius: 50% | 边框长度的一半

圆角矩形设置为高度的一半，但并不是新的属性值。

<style>
    div {
        width: 200px;
        height: 100px;
        background-color: rgb(238, 5, 5);
        border-radius: 50px;
    }
</style>
<body>
    <div> </div>
</body>

在这里插入图片描述
但是不能写百分比——成了椭圆

<style>
    div {
        width: 200px;
        height: 100px;
        background-color: rgb(238, 5, 5);
        border-radius: 50%;
    }
</style>
<body>
    <div> </div>
</body>

在这里插入图片描述

设置不同的圆角简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

<style>
    div {
        width: 200px;
        height: 100px;
        background-color: rgb(238, 5, 5);
        border-radius: 10px 20px 30px 40px;
    }
</style>
<body>
    <div> </div>
</body>

在这里插入图片描述

三、阴影

一、盒子阴影(box-shadow)
语法：

 box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必须，水平阴影的位置，允许负值
v-shadow	必须，垂直阴影的位置，允许负值
blur	可选，距离模糊
spread	可选，阴影的尺寸
color	可选，阴影颜色
inset	可选，外部阴影改为内部阴影（默认外阴影）

在color中复杂的可以使用rgba的属性值，最后一个值就是阴影的透明度

<style>
    div {
        width: 200px;
        height: 100px;
        background-color: rgb(238, 5, 5);
        border-radius: 10px 20px 30px 40px;
        box-shadow:  10px 10px 10px 10px rgba(17, 12, 12, 0.8);
    }
</style>
<body>
    <div> </div>
</body>

在这里插入图片描述
添加hover使光标指向盒子的时候出现阴影

    div:hover{
        box-shadow:  10px 10px 10px 10px rgba(17, 12, 12, 0.8);
    }

二、文字阴影(text-shadow)

值	描述
h-shadow	必须，水平阴影的位置，允许负值
v-shadow	必须，垂直阴影的位置，允许负值
blur	可选，距离模糊
color	可选，阴影颜色

背景就不要太鲜艳了，显得阴影很脏啊

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: rgb(228, 19, 19);
        text-shadow: 10px 10px 10px rgba(2, 2, 2, 0.8);
    }
</style>
<body>
    <div>我坐了一天了，呜呜呜</div>
</body>