前端基础之CSS

最新推荐文章于 2023-11-03 17:38:16 发布

王小小鸭

最新推荐文章于 2023-11-03 17:38:16 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

文章标签：前端 css 前端

本文链接：https://blog.youkuaiyun.com/clover_oreo/article/details/121681518

这篇博客介绍了如何使用CSS选择器来控制网页元素的样式。内容包括：链接外部CSS文件、选择并改变正方形背景色、选中特定行的圆圈颜色、调整圆圈边框样式、隐藏第一列圆圈、选择特定颜色或样式的元素并设置新颜色、添加鼠标悬停时的模糊效果以及实现悬停时的放大效果。博客中还包含了HTML和CSS代码示例，以及对每个选择器用法的详细解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从练习中学习CSS选择器：

问题1：在index.html中链接style.css文件，将CSS样式添加到您的网站中。

代码：

<link rel="stylesheet" href="./assets/css/style.css">
 <!--放在<head>里面-->

问题2：选择所有正方形(square)，并将其背景设为橙色。

找到square，更改背景色：

问题3：选择第三行中的所有圆圈(circle)，并使其变为红色。

代码如下：

#third-row>.circle {
    background: #de6868
}

思路：

先找到第三行（third-row），再找到圆圈(circle)
考虑子元素选择器，语法：
父元素>子元素{
样式声明
}
完成此步骤后，您的页面应如下所示：
问题4：选择所有灰边的圆圈(fancy circle)，使其边框变为虚线。

代码：
```
.circle.fancy {
    border-style: dotted
}
```
思路：
先找到所有灰边的圆圈(fancy circle)，通过审题可知，必须同时满足“圆圈”（ circle）和“灰边”（fancy）两个条件，是交集选择器。
语法：选择器1选择器2选择器3...选择器n{
样式声明
}
完成此步骤后，您的页面应如下所示：

PS：经实测实际上没有那么虚线
问题5：选择第一列中的所有圆圈(circle)并使它们消失。

提示：请使用 :first-child 选择器，和透明度 opacity: 0

.row .circle:first-child {
    opacity: 0
}

/*后辈选择器和父子选择器 */

/* .row>.circle:first-child {
    opacity: 0
} */

思路：

先找到第一列中的所有圆圈(circle)，我们发现原网页代码只有行的表示，只能通过提示的first-child 选择器来找到每一列第一个元素，再从中选中圆圈(circle)。
PS：易错点：
前面如果加.row第七题也要加，因为涉及优先级
后辈选择器和父子选择器都可以（第七题选择器和第五题一致）
完成此步骤后，您的页面应如下所示：
问题6：选择所有绿色(green)或灰边(fancy)的形状，将它们设置为蓝色。
```
.green,.fancy {
    background: #6392c0
}
```
思路：
先找到所有绿色(green)或灰边(fancy)的形状，通过审题可知，只要满足绿色(green)或灰边(fancy)其中一个条件，是并集选择器。
语法：
选择器1,选择器2,选择器3,...选择器n{
样式声明
}
完成此步骤后，您的页面应如下所示：
问题7：选择所有圆圈(circle)，添加效果：当你的鼠标悬停在它们上方时，它们会变得模糊。

提示：请使用opacity: 0.5

注：当您将鼠标悬停在问题4中隐藏的圆圈上时，该圆圈会出现。

.row .circle:hover {
    opacity: 0.5
}

/*后辈选择器和父子选择器 */

/* .row>.circle:hover {
    opacity: 0
} */

完成此步骤后，您的页面应如下所示（第三列中的圆圈，第二行处于悬停状态）：

选择第二行中的所有圆圈(circle)，添加效果：当鼠标悬停在它们上时，会放大。
```
#second-row>.circle:hover {
    transform: scale(1.25)
}
```
完成此步骤后，您的页面应如下所示（鼠标悬停在第二行，第三列的圆圈上）：

HTML代码：

<html>

<head>
    <title>摆弄形状</title>
    <!-- 我们应该在此<head>标记中链接什么文件? -->
    <link rel="stylesheet" href="./assets/css/style.css">
    <!-- 问题1 在index.html中链接style.css文件，将CSS样式添加到网站中。-->
</head>

<body>
    <div id="container">
        <div id="first-row" class="row">
            <div class="square"></div>
            <div class="circle green"></div>
            <div class="square"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
        </div>

        <div id="second-row" class="row">
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="circle fancy green"></div>
        </div>

        <div id="third-row" class="row">
            <div class="circle"></div>
            <div class="circle green"></div>
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="square"></div>
        </div>

        <div id="fourth-row" class="row">
            <div class="square"></div>
            <div class="circle"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

        <div id="fifth-row" class="row">
            <div class="circle"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="square"></div>
            <div class="circle green"></div>
        </div>
    </div>
</body>

</html>

CSS代码：

body {
    font-family: "Karla";
    background: #edeae5;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0px;
    text-align: center;
}

a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
    transition: 0.4s;
}

a:hover {
    color: rgba(0, 0, 0, 0.7);
}

div {
    transition: linear 0.2s;
}

#container {
    width: 480px;
    height: 480px;
    position: absolute;
    top: calc(50% - 240px);
    left: calc(50% - 240px);
}

.circle {
    width: 60px;
    height: 60px;
    background: white;
    display: inline-block;
    margin-right: 30px;
    border-radius: 50%;
}

.square {
    width: 60px;
    height: 60px;
    background: #e67e22;
    /* 问题2  选择所有正方形(square)，并将其背景设为橙色。*/
    display: inline-block;
    margin-right: 30px;
}

.row {
    margin-bottom: 30px;
}

.green {
    background: #78c272;
}

.fancy {
    border: 3px inset rgba(74, 74, 74, 0.25);
    width: 54px;
    height: 54px;
}


/* 问题3 选择第三行中的所有圆圈(circle)，并使其变为红色。*/

#third-row>.circle {
    background: #de6868
}


/* 问题4 选择所有灰边的圆圈(fancy circle)，使其边框变为虚线。*/

.circle.fancy {
    border-style: dotted
}


/* 问题5 选择第一列中的所有圆圈(circle)并使它们消失。 */


/* .row .circle:first-child {
    opacity: 0
} */

.row>.circle:first-child {
    opacity: 0
}


/* 问题6 选择所有绿色(green)或灰边(fancy)的形状，将它们设置为蓝色。*/

.green,
.fancy {
    background: #6392c0
}


/* 问题7 选择所有圆圈(circle)，添加效果：当你的鼠标悬停在它们上方时，它们会变得模糊*/

.row .circle:hover {
    opacity: 0.5
}


/* 问题8 选择第二行中的所有圆圈(circle)，添加效果：当鼠标悬停在它们上时，会放大。*/

#second-row>.circle:hover {
    transform: scale(1.25)
}