【前端】CSS基础（2）-CFANZ编程社区

文章目录

前言
1、CSS选择器

前言

这篇博客仅仅是对CSS的基本结构进行了一些说明，关于CSS的更多讲解以及HTML、Javascript部分的讲解可以关注一下下面的专栏，会持续更新的。
链接： Web前端学习专栏
下面我对这个专栏的内容进行几点说明：
1. 适合每一个前端0基础的小伙伴学习。
2. 对常用标签以及常用属性进行了详细讲解。
3. 最后有综合案例实现，手把手带大家实现每一个综合案例。
4. 可以把专栏当作查询资料，前端的知识忘记了的话可以根据博客的目录找到相对应的内容进行复习。
首先，提示一下大家，如果是在手机端看这篇博客的小伙伴，请移步电脑端学习哈！在电脑上会更好看一些！如果能够跟着在电脑上进行代码的实现就会更好了！
其次，欢迎大家来到前端的学习，因为我们可以很直观的看见代码的效果，所以我觉得前端的学习其实是很有意思的。这篇博客，将帮助您从零开始学习前端。
在这个学习过程中，将遇到挑战和困难，但请相信，每一次的努力和坚持都将化为成长的动力。让我们携手共进，一起探索Web前端的无限可能！

1、CSS选择器

CSS选择器是非常重要的，当我们要对页面上某些元素进行更改来实现页面的展示效果，就需要CSS的加持才能实现。那么CSS就需要指定所要更改的元素，我们就是通过选择器来来实现元素的指定。

下面涉及到的选择器都是我们常用的选择器，如果大家想要了解更多选择器，可以点击下方的链接进行CSS选择器的详细学习。
链接：CSS选择器参考文档

1.1选择器的功能

1.2 选择器的种类

1.2.1 基础选择器

1.2.1.1 标签选择器

基本语法：

html元素名 {
    属性1：属性值1；
    属性2：属性值2；
    ...
}

标签选择器是非常简单的，我们在CSS基础（1）中的简单代码展示就使用到了标签选择器。

代码：
.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fecode01.css">
</head>
<body>
    <p>hello css</p>
</body>
</html>

.css文件：

p {
    color: red;
    font-size: 40px;
}

浏览器显示如下：

下面我们再来看下面的一个代码：

.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fecode01.css">
</head>
<body>
    <p>hello css</p>
    <p>hello html</p>
    <p>hello JavaSript</p>
    <h1>这是h1标题</h1>
</body>
</html>

.css文件：

p {
    color: red;
    font-size: 40px;
}

浏览器显示如下：

通过上面的代码和页面展示效果我们可以了解到：选择器选中的标签是代码中的所有标签，它控制所有被选中的标签中的内容的页面展示效果。

那么如果，我们只想让其中一个或者几个标签中的内容是选择器选中的标签中所控制的效果，而不是所有的呢？

这个就需要使用类选择器来实现这种效果了。

1.2.1.2 类选择器

基本语法：

.类选择器名{
    属性1：属性值1；
    属性2：属性值2；
    ...
}

ok了家人们，我们来看下面的一个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>吃饭</p>
    <p>睡觉</p>
    <p>玩游戏</p>
</body>
</html>

浏览器显示如下：

代码：
.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fecode02.css">
</head>
<body>
    <p class="eat">吃饭</p>
    <p class="sleep">睡觉</p>
    <p class="game">玩游戏</p>
</body>
</html>

.css文件：

.eat {
    color: red;
}
.sleep {
    color: green;
}
.game {
    color: blue;
}

浏览器显示如下：

我们的一个元素的类名可以有多个，不同的类名之间使用空格（“ ”）隔开就好。那就意味着我们可以使用类选择器来实现页面展示样式的叠加。

代码：
.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fecode02.css">
</head>
<body>
    <p class="eat">吃饭</p>
    <p class="sleep">睡觉</p>
    <p class="play game">玩游戏</p>
</body>
</html>

.css文件：

.eat {
    color: red;
}
.sleep {
    color: green;
}
.game {
    color: blue; 
}
.play {
    font-size: 80px;
}

浏览器实现如下：

1.2.1.3 id选择器

基本语法：

#ID选择器 {
    属性1：属性值1；
    属性2：属性值2；
    ...
}

代码：
.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fecode03.css">
</head>
<body>
    <p id="fe">前端开发</p>
    <p id="sever">后端开发</p>
</body>
</html>

.css文件

#fe {
    color: red;
}
#sever {
    color: green;
}

浏览器显示如下：

1.2.1.4 通配符选择器

基本语法：

* {
    属性1：属性值1;
    属性2：属性值2;
}

代码：
.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fecode04.css">
</head>
<body>
    <p>哈哈哈哈哈哈</p>
</body>
</html>

.css文件：

* {
    background-color: aqua;
}

浏览器显示如下：

1.2.1.5 伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="#">不跳转</a>
</body>
</html>

浏览器显示如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            color: black;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">不跳转</a>
</body>
</html>

浏览器显示如下：

默认的是黑色：
在这里插入图片描述
鼠标悬停时，是红色：

鼠标按下去，没有弹起时是绿色：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            color: black;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">不跳转</a>
    <input type="button" value="按钮">
</body>
</html>

浏览器显示如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            color: black;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: green;
        }

        input {
            color: red;
        }
        input:hover {
            color: green;
        } 
        input:active {
            color: blue;
        }
    </style>
</head>
<body>
    <a href="#">不跳转</a>
    <input type="button" value="按钮">
</body>
</html>

浏览器显示如下：
默认是红色：

鼠标悬停时，是绿色：

鼠标按下但还没有弹起时，是蓝色：

在这里插入图片描述

以上就是我们所介绍的常用的基础选择器，我们来总结一下：

	作用	特点
标签选择器	能选出所有相同标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求选择，最灵活，最常用
id选择器	能选出一个标签	同一个id在一个html中只能出现一次
通配符选择器	选择所有标签	特殊情况下使用
伪类选择器	选择不同状态的链接	重点掌握a:hover的写法
：focue伪类选择器	选择被选中的元素	重点掌握input:focus

1.2.2 复合选择器

1.2.2.1 后代选择器

基本语法：

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

我们先来看下面这样一个代码：

.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ol>
    <ol>
        <li>睡觉</li>
        <li>睡觉</li>
        <li>睡觉</li>
    </ol>
</body>
</html>

浏览器显示如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ol>
    <ol>
        <li>睡觉</li>
        <li>睡觉</li>
        <li>睡觉</li>
    </ol>
</body>
</html>

浏览器显示如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ol>
    <ol>
        <li>睡觉</li>
        <li>睡觉</li>
        <li>睡觉</li>
    </ol>
</body>
</html>

浏览器显示如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol>
        <li class="red">吃饭</li>
        <li class="red">吃饭</li>
        <li class="red">吃饭</li>
    </ol>
    <ol>
        <li>睡觉</li>
        <li>睡觉</li>
        <li>睡觉</li>
    </ol>
</body>
</html>

浏览器显示如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol>
        <li class="red">吃饭</li>
        <li class="red">吃饭</li>
        <li class="red">吃饭</li>
    </ol>
    <ol>
        <li>睡觉</li>
        <li>睡觉</li>
        <li>睡觉</li>
    </ol>
</body>
</html>

浏览器显示如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hobby li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol class="hobby">
        <li class="red">吃饭</li>
        <li class="red">吃饭</li>
        <li class="red">吃饭</li>
    </ol>
    <ol>
        <li>睡觉</li>
        <li>睡觉</li>
        <li>睡觉</li>
    </ol>
</body>
</html>

浏览器显示如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hobby a {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol class="hobby">
        <li class="red">吃饭</li>
        <li class="red">吃饭</li>
        <li class="red">吃饭</li>
        <li>
            <a href="#">不跳转</a>
        </li>
    </ol>
    <ol>
        <li>睡觉</li>
        <li>睡觉</li>
        <li>睡觉</li>
    </ol>
</body>
</html>

浏览器显示如下：

1.2.2.2 子选择器

基本语法：

选择器1>选择器2{
    属性1：属性值1；
    属性2：属性值2；
    ...
}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p>span {
            color: red;
        }
    </style>
</head>
<body>
    <p>
        这个小伙儿<span>真帅</span>
    </p>
</body>
</html>

浏览器显示如下：

再来看下面的一个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p>span {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>
            这个闺女<span>真漂亮</span>
        </p>
    </div>
</body>
</html>

浏览器显示如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>span {
            color: red;
        }
    </style>
</head>
<body>
    <!-- <p>
        这个小伙儿<span>真帅</span>
    </p> -->
    <div>
        <p>
            这个闺女<span>真漂亮</span>
        </p>
    </div>
</body>
</html>

浏览器显示如下：

1.2.2.3 并集选择器

基本语法：

    选择器1， 选择器2，选择器3，...{
    属性1：属性值1；
    属性2：属性值2；
    ...
}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1,h2,p {
            color:red;
        }
    </style>
</head>
<body>
    <h1>hhhhh</h1>
    <h2>hahahaha</h2>
    <p>哈哈哈哈</p>
</body>
</html>

浏览器显示如下：

以上就是我们所介绍的复合选择器，接下来我们做一个小结。

选择器	作用	注意事项
后代选择器	选择后代元素	可以是孙子元素
子选择器	选择子元素	只能选亲儿子，不能选孙子
并集选择器	选择相同样式的元素	更好的做到代码重用