如何解決CSS檔案的問題？-有解無憂

我是新用戶，這是我在 StackOverflow 上的第一篇文章。
我想嘗試使用 HTML 和 CSS 撰寫 Infinity RGB 影片并完成作業，我按照此視頻的說明 ( https://youtu.be/dxquAfnHhqg )。
當我結束編碼時，在我的 CSS 檔案中，第 3margin 0;行和第 4行出現了 2 個錯誤padding 0;，其中兩個“ 0 s”都帶有下劃線，并帶有訊息冒號預期css(css-colonexpected)，我不知道如何修復它們即使我完美地復制了視頻中顯示的源代碼（視頻中的 CSS 編碼從1:00開始）。
我也在 StackOverflow 上搜索過，我嘗試將檔案擴展名從.css更改為.sass但我沒能解決這個問題。
此外，當我運行我的程式時，它只顯示全屏多色漸變背景，而應該有無限影片。
如果您嘗試向我解釋問題是什么以及如何解決它，那將非常有幫助。
謝謝你們的時間和幫助。

這是源代碼：

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #042104;
    animation: animateColor 8s linear infinite;
}
@keyframes animateColor
{
    0%
    {
        filter: hue-rotate(0deg);
    }
    100%
    {
        filter: hue-rotate(360deg);
    }
}
section.container
{
    display: flex;  
}
section.container.circle
{
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 -7.5px;
}
section.container.circle span
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
    /* 360 / 20 = 18deg */
}
section.container.circle span::before
{
    content: '';
    position: absolute;
    right: 0;
    top: calc(50% - 7.5px);
    width: 15px;
    height: 15px;
    background-color: #00ff0a;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff0a,
    0 0 20px #00ff0a,
    0 0 40px #00ff0a,
    0 0 60px #00ff0a,
    0 0 80px #00ff0a,
    0 0 100px #00ff0a;
    transform: scale(0.1);
animation: animate 4s linear infinite;
animation-delay: calc(0.1 * var(--i));
}
@keyframes animate
{
    0%
    {
        transform: scale(1);
    }
    50% , 100%
    {
        transform: scale(0.1);
    }
}
section.container.circle:nth-child(2)
{
    transform: rotate(-180deg);
}
section.container.circle:nth-child(2) span::before
{
animation-delay: calc(-0.1s * var(--i));
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Infinity Dots Animation Effects</title>
        <link rel="stylesheet" href="styleInfinity.css">
    </head>
    <body>
        <section>
            <div class="container">
                <div class="circle">
                    <span style="--i:0;"></span>
                    <span style="--i:1;"></span>
                    <span style="--i:2;"></span>
                    <span style="--i:3;"></span>
                    <span style="--i:4;"></span>
                    <span style="--i:5;"></span>
                    <span style="--i:6;"></span>
                    <span style="--i:7;"></span>
                    <span style="--i:8;"></span>
                    <span style="--i:9;"></span>
                    <span style="--i:10;"></span>
                    <span style="--i:11;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:13;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:15;"></span>
                    <span style="--i:16;"></span>
                    <span style="--i:17;"></span>
                    <span style="--i:18;"></span>
                    <span style="--i:19;"></span>
                    <span style="--i:20;"></span>
                </div>
                <div class="circle">
                    <span style="--i:0;"></span>
                    <span style="--i:1;"></span>
                    <span style="--i:2;"></span>
                    <span style="--i:3;"></span>
                    <span style="--i:4;"></span>
                    <span style="--i:5;"></span>
                    <span style="--i:6;"></span>
                    <span style="--i:7;"></span>
                    <span style="--i:8;"></span>
                    <span style="--i:9;"></span>
                    <span style="--i:10;"></span>
                    <span style="--i:11;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:13;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:15;"></span>
                    <span style="--i:16;"></span>
                    <span style="--i:17;"></span>
                    <span style="--i:18;"></span>
                    <span style="--i:19;"></span>
                    <span style="--i:20;"></span>
                </div>
            </div>
        </section>
    </body>
</html>

uj5u.com熱心網友回復：

結果未顯示的主要原因是您以不正確的方式撰寫了 CSS。

總而言之，section.container.circle不一樣section .container .circle。

你能解決差異嗎？這是每個類/標簽名稱之間的空格

請參閱此https://www.w3schools.com/cssref/css_selectors.asp以了解 CSS 選擇器的作業原理。

margin: 0;此外，正如 Kip 回答的那樣，您在我修復的原始代碼中遇到了錯誤和一些小的錯誤撰寫的 CSS。

這是最終的作業代碼：

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #042104;
    animation: animateColor 8s linear infinite;
}
@keyframes animateColor
{
    0%
    {
        filter: hue-rotate(0deg);
    }
    100%
    {
        filter: hue-rotate(360deg);
    }
}
section .container
{
    display: flex;  
}
section .container .circle
{
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 -7.5px;
}
section .container .circle span
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
    /* 360 / 20 = 18deg */
}
section .container .circle span::before
{
    content: '';
    position: absolute;
    right: 0;
    top: calc(50% - 7.5px);
    width: 15px;
    height: 15px;
    background-color: #00ff0a;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff0a,
    0 0 20px #00ff0a,
    0 0 40px #00ff0a,
    0 0 60px #00ff0a,
    0 0 80px #00ff0a,
    0 0 100px #00ff0a;
    transform: scale(0.1);
animation: animate 4s linear infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate
{
    0%
    {
        transform: scale(1);
    }
    50% , 100%
    {
        transform: scale(0.1);
    }
}
section .container .circle:nth-child(2)
{
    transform: rotate(-180deg);
    
}
section .container .circle:nth-child(2) span::before
{
animation-delay: calc(-0.1s * var(--i));
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Infinity Dots Animation Effects</title>
        <link rel="stylesheet" href="styleInfinity.css">
    </head>
    <body>
        <section>
            <div class="container">
                <div class="circle">
                    <span style="--i:0;"></span>
                    <span style="--i:1;"></span>
                    <span style="--i:2;"></span>
                    <span style="--i:3;"></span>
                    <span style="--i:4;"></span>
                    <span style="--i:5;"></span>
                    <span style="--i:6;"></span>
                    <span style="--i:7;"></span>
                    <span style="--i:8;"></span>
                    <span style="--i:9;"></span>
                    <span style="--i:10;"></span>
                    <span style="--i:11;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:13;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:15;"></span>
                    <span style="--i:16;"></span>
                    <span style="--i:17;"></span>
                    <span style="--i:18;"></span>
                    <span style="--i:19;"></span>
                    <span style="--i:20;"></span>
                </div>
                <div class="circle">
                    <span style="--i:0;"></span>
                    <span style="--i:1;"></span>
                    <span style="--i:2;"></span>
                    <span style="--i:3;"></span>
                    <span style="--i:4;"></span>
                    <span style="--i:5;"></span>
                    <span style="--i:6;"></span>
                    <span style="--i:7;"></span>
                    <span style="--i:8;"></span>
                    <span style="--i:9;"></span>
                    <span style="--i:10;"></span>
                    <span style="--i:11;"></span>
                    <span style="--i:12;"></span>
                    <span style="--i:13;"></span>
                    <span style="--i:14;"></span>
                    <span style="--i:15;"></span>
                    <span style="--i:16;"></span>
                    <span style="--i:17;"></span>
                    <span style="--i:18;"></span>
                    <span style="--i:19;"></span>
                    <span style="--i:20;"></span>
                </div>
            </div>
        </section>
    </body>
</html>

uj5u.com熱心網友回復：

正如錯誤所說，它期望冒號（:）替換為margin:0; padding:0;

在 CSS 中，以冒號開頭:具有值;，以分號結尾。??

uj5u.com熱心網友回復：

我可以看到您的代碼首先有一些問題是您應該將冒號:放在邊距和填充中。現在來看您的代碼，因為我可以看到您忘記將應該像這樣的類分開。section .container .circle span::before，并且這個錯誤是每一個如果你糾正它你的代碼現在應該可以作業。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/474072.html

標籤：html css 粗鲁的语法错误对象预期

上一篇：來自控制器的html的PHP變數系結問題，用于ajax回應

下一篇：如何使用flexbox右對齊div內的文本以獲取多行內容