• CSS前端入门（第二天）选择器

    后代选择器

    元素1 元素2 {样式说明}

    子选择器

    子选择器（子元素选择器）只能选作为某元素的最近一级子元素，简单理解就是选亲儿子元素
    元素1>元素2 {样式说明}

    • 元素1和元素2中间用大于号
    • 元素1是父级，元素2是子级，最终选择是元素2
    • 元素2必须是亲儿子
    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素选择器title>
    <style>
        .nav>a {
            color: red;
        }
    style>
head>

<body>
    <div class="nav">
        <a href="#">我是儿子a>
        <p>
            <a href="#">我是孙子a>
        p>
    div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述

    并集选择器

    并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
    并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都看作为并集选择器的一部分。
    元素1 ，元素2 {样式说明}
    上述语法表示元素1和元素2

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器title>
    <style>
        /* 要求1：把熊大熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */
        /* 要求2：请把熊大和熊二改为粉色，还有小猪佩奇一家也改为粉色 */
        
        div,
        p,
        .pig li {
            color: pink;
        }
    style>
head>

<body>
    <div>熊大div>
    <p>熊二p>
    <span>光头强span>
    <ul class="pig">
        <li>小猪佩奇li>
        <li>猪爸爸li>
        <li>猪妈妈li>
    ul>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    要求1效果

    在这里插入图片描述

    要求2效果

    在这里插入图片描述

    伪类选择器

    伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
    伪类选择器书写最大的特点是用冒号（:）表示，比如:hover、:first-child。

    a:link /* 选择所有未被访问的链接*/
    a:visited /* 选择所有已被访问的链接*/
    a:hover /* 选择鼠标指针位于其上的链接*/
    a:active /* 选择活动链接（鼠标按下未弹起的链接）*/

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之链接伪类选择器title>
    <style>
        /* 1.未访问的链接 a:link  把没有点击过的（访问过的）链接选出来*/
        
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* 2. a:visited 把点击过的（访问过的）链接选出来*/
        
        a:visited {
            color: orange;
        }
        /* 3. a:hover选择鼠标经过的那个链接 */
        
        a:hover {
            color: skyblue;
        }
        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接*/
        
        a:active {
            color: green;
        }
    style>
head>

<body>
    <a href="#">小猪佩奇a>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    链接伪类选择器注意事项

    1.为了确保生效，请按照LVHA的顺序声明:link-:visited-:hover-:active
    2. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

    focus伪类选择器

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

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>focus伪类选择器title>
    <style>
        /* 把获得光标的input表单元素选取出来 */
        
        input:focus {
            background-color: pink;
        }
    style>
head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    在这里插入图片描述

    显示模式

    网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页

    元素显示模式就是元素（标签）以什么方式进行显示，比如

    自己独占一行，比如一行可以放多个
    HTML元素一般分为块元素和行内元素两种类型。

    块元素

    块级元素的特点：

    1. 比较霸道，自己独占一行
    2. 高度、宽度、外边距以及内边距都可以控制
    3. 宽度默认是容器（父级宽度）的100%
    4. 是一个容器及盒子，里面可以放行内或者块元素

    注意

    1. 文字类的元素内不能使用块级元素

    2. 标签主要用于存放文字，因此

      里面不能方块级元素，特别是不能放

    3. 同理，

      ~

      等都是文字类块级标签，里面也不能放其他块级元素

    行内元素（内联元素）

    行内元素的特点：

    1. 相邻行内元素在一行上，一行可以显示多个
    2. 高、宽直接设置是无效的
    3. 默认宽度就是它本身内容的宽度
    4. 行内元素只能容纳文本或者其他行内元素
      注意：

    行内块元素

    、、,他们同时具有块元素和行内元素的特点
    行内块元素的特点：

    1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
    2. 默认宽度就是它本身内容的宽度（行内元素特点）
    3. 高度、行高、外边距以及内边距都可以控制（块级元素特点）

    元素显示模式转换

    特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性
    比如想要增加链接的触发范围

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=" -width, initial-scale=1.0">
    <title>元素显示模式转换title>
    <style>
        /*转换为块元素*/
        
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            display: block;
        }
        /* 转换为行内元素 */
        
        div {
            /* 转换后宽高不起作用 */
            width: 300px;
            height: 100px;
            background-color: purple;
            display: inline;
        }
        /* 转换为行内块元素 */
        
        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    style>
head>

<body>
    <a href="#">链接1a>
    <a href="#">链接2a>
    <div>块级元素1div>
    <div>块级元素2div>
    <span>行内元素转换为行内块元素span>
    <span>行内元素转换为行内块元素span>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    在这里插入图片描述

    小米左侧导航栏仿写

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米左侧导航栏仿写title>
    <style>
        /*1. a链接转换为块元素*/
        
        a {
            width: 230px;
            height: 40px;
            background-color: #55585a;
            display: block;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }
        /* 2. 鼠标经过链接变换背景色 */
        
        a:hover {
            background-color: #ff6700;
        }
    style>
head>

<body>
    <a href="#">手机 电话卡a>
    <a href="#">电视 盒子a>
    <a href="#">笔记本 平板a>
    <a href="#">出行穿戴a>
    <a href="#">智能 路由器a>
    <a href="#">健康 儿童a>
    <a href="#">耳机 音响a>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    在这里插入图片描述

    单行文字垂直居中

    解决方案：
    让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

  • 相关阅读:
    uniapp 微信小程ios端键盘弹起后导致页面无法滚动
    Spring Boot 2.x系列【24】应用监控篇之指标Metrics
    天然气网络潮流计算模型研究（Matlab代码实现）
    HarmonyOS 非线性容器特性及使用场景
    Spring Boot 之 ORM
    mysql 索引选取规则
    【OpenVINO】 使用 OpenVINO CSharp API 部署 PaddleOCR 项目介绍
    Vue2-生命周期
    6步搭建一个飞机大战游戏
    函数和call详解
  • 原文地址：https://blog.csdn.net/Aa12364567/article/details/126153334