집 > 기사 > 웹 프론트엔드 > CSS가 오류를 보고하지 않습니다.

CSS가 오류를 보고하지 않습니다.

王林원래의: 2023-05-29 10:37:37345검색

CSS는 오류를 보고하지 않습니다.

CSS는 프런트 엔드 개발에서 매우 중요한 부분이며 웹 페이지 스타일 표현을 담당합니다. 프런트 엔드 개발자로서 우리 모두는 다음과 같은 상황에 직면했습니다. CSS 구문에는 분명히 문제가 없지만 스타일이 페이지에 올바르게 표시되지 않습니다.

이 상황은 일반적으로 개발자를 매우 혼란스럽고 혼란스럽게 만들고 심지어 문제를 찾는 데 많은 시간을 낭비하게 만듭니다. 이 기사에서는 CSS가 오류를 보고하지 않지만 스타일이 올바르게 표시되지 않는 몇 가지 일반적인 문제에 대해 논의하고 독자가 이러한 문제를 빠르게 해결할 수 있도록 몇 가지 솔루션을 제공합니다.

CSS 선택기가 요소와 올바르게 일치하지 않습니다

CSS를 작성할 때 일반적으로 선택기를 사용하여 스타일을 지정할 요소를 대상으로 합니다. 그러나 때로는 잘못된 선택기를 선택하거나 잘못된 선택기를 사용하여 요소를 찾아 CSS 스타일이 올바르게 표시되지 않을 수도 있습니다.

예를 들어, 클래스 선택기를 사용하여 ID 선택기로 묶인 요소의 스타일을 지정하거나 ID 선택기를 사용하여 클래스 선택기로 묶인 요소의 스타일을 지정할 수 있습니다.

#my-class {
    color: red;
}

.my-id {
    font-size: 16px;
}

이런 방식으로 작성된 CSS 스타일은 작동하지 않습니다. 선택기가 요소와 올바르게 일치할 수 없기 때문에 올바르게 발생합니다. 올바른 쓰기는 다음과 같아야 합니다.

#my-id {
    color: red;
}

.my-class {
    font-size: 16px;
}

CSS 스타일은 다른 스타일에 의해 재정의됩니다.

스타일 시트에서는 일반적으로 여러 스타일을 정의하지만 이러한 스타일은 서로 영향을 미쳐 일부 스타일이 다른 스타일에 의해 재정의될 수 있습니다. 이러한 상황은 일반적으로 브라우저에서 요소 스타일을 보고 스타일이 잘못 표시되거나 스타일의 일부만 유효한 경우에 발생합니다.

예를 들어, 스타일 시트의 동일한 요소에 대해 여러 스타일을 정의할 수 있습니다.

.my-class {
    color: red;
}

.my-class {
    font-size: 16px;
}

이런 방식으로 작성된 스타일은 최신 스타일에만 적용되는 반면, 이전 스타일은 최신 스타일에 의해 재정의됩니다. 올바른 작성 방법은 하나의 스타일을 사용하여 여러 속성을 정의하는 것입니다.

.my-class {
    color: red;
    font-size: 16px;
}

CSS 스타일은 상속됩니다

CSS 스타일에는 요소의 하위 요소에 의해 상속될 수 있는 일부 속성이 있습니다. 예를 들어 color 및 font-size 속성은 하위 요소에 의해 상속될 수 있습니다. 때로는 하위 요소가 특정 스타일을 상속하는 것을 원하지 않지만 요소의 상위 요소에 이러한 스타일을 실수로 정의하여 하위 요소가 이러한 스타일을 상속하게 하여 페이지가 잘못 표시되는 경우가 있습니다. color 和 font-size 属性就是可以被子元素所继承的。而有时候我们不希望子元素继承某些样式，但我们却错误地将这些样式定义在了元素的父元素上，导致子元素继承了这些样式，从而导致页面展现不正确。

例如，我们可能会在一个 div 中定义了一些样式，但这些样式却被其子元素所继承了：

div {
    color: red;
    font-size: 16px;
}

这样编写的样式，将会导致 div 内的所有子元素都继承了这些样式，包括文本和链接等。正确的写法应该是对每个元素单独定义样式，而不是定义在其父元素上。

CSS 样式属性被浏览器默认属性覆盖

浏览器的默认行为是会为一些 HTML 元素设置一些默认的样式属性，例如，ul

예를 들어 div에서 일부 스타일을 정의할 수 있지만 이러한 스타일은 하위 요소에 상속됩니다.

ul {
    margin: 0;
}

이런 방식으로 작성된 스타일을 사용하면 div 내의 모든 하위 요소가 텍스트와 링크를 포함하여 이러한 스타일을 상속하게 됩니다. 등. 이를 작성하는 올바른 방법은 상위 요소에 스타일을 정의하는 대신 각 요소에 대해 별도로 스타일을 정의하는 것입니다.

ul

때때로 이러한 기본 속성을 정의하려고 시도할 수도 있지만 실제로 이러한 속성은 브라우저 기본값으로 재정의되어 스타일이 올바르게 표시되지 않습니다.

예를 들어 ul 요소에 대한 여백 속성을 정의하려고 시도할 수 있지만 이 속성은 브라우저 기본 속성에 의해 재정의되었습니다.

ul {
    padding: 0;
    list-style: none;
}

이런 방식으로 작성된 스타일은 브라우저가 이미 설정했기 때문에 올바르게 표시되지 않습니다. ul 요소의 경우 기본 들여쓰기 및 여백 값입니다. 이를 작성하는 올바른 방법은 특정 CSS 속성을 사용하여 기본 속성의 값을 수정하는 것입니다.

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="my-class">Hello World!</div>
</body>

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="my-class">Hello World!</div>
</body>

위 내용은 CSS가 오류를 보고하지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html 继承选择器样式表 margin ul

성명：

이전 기사：댓글 CSS다음 기사：댓글 CSS