CSS가 오류를 보고하지 않습니다.-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

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

王林

May 29, 2023 am 10:37 AM

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

클래스와 ID 선택기 사이의 시상은 무엇입니까?May 12, 2025 am 12:13 AM

classselectorsareversatiledreusable, whileDselectorsareUniqueAndspecific.1) USECLASSSELECTORS (DENOTEDBY.) ForstylingMultipleElementSwithSharedCharacteristics

CSS IDS 대 클래스 : 실제 차이점May 12, 2025 am 12:10 AM

idsareUniqueIndifiersforsinglelemes, whileclassesstylemultipleements.1) useidsforuniqueElements 및 Javascripthooks.2) useclassessforusable, flexiblestylingacrossmultipleelements.

CSS : 클래스 만 사용하면 어떻게됩니까?May 12, 2025 am 12:09 AM

클래스 전용 선택기를 사용하면 코드 재사용 성과 유지 관리가 향상 될 수 있지만 클래스 이름 및 우선 순위를 관리해야합니다. 1. 재사용 성과 유연성 향상, 2. 여러 클래스를 결합하여 복잡한 스타일을 만들고, 3. 긴 클래스 이름과 우선 순위로 이어질 수 있습니다.

CSS의 ID 및 클래스 선택기 : 초보자 안내서May 12, 2025 am 12:06 AM

ID 및 클래스 선택기는 각각 고유 및 멀티 요소 스타일 설정에 CSS에서 사용됩니다. 1. ID 선택기 (#)는 특정 탐색 메뉴와 같은 단일 요소에 적합합니다. 2. 클래스 선택기 (.)는 통합 버튼 스타일과 같은 여러 요소에 사용됩니다. ID는주의해서 사용하고 과도한 특이성을 피하며 스타일 재사용 성과 유연성을 향상시키기 위해 클래스를 우선시해야합니다.

HTML5 사양 이해 : 주요 목표 및 이점May 12, 2025 am 12:06 AM

HTML5의 주요 목표와 장점은 다음과 같습니다. 1) 개선 된 웹 의미 론적 구조, 2) 멀티미디어 지원 향상 및 3) 교차 플랫폼 호환성 홍보. 이러한 목표는 더 나은 접근성, 더 풍부한 사용자 경험 및보다 효율적인 개발 프로세스로 이어집니다.

HTML5의 목표 : 웹의 미래에 대한 개발자 가이드May 11, 2025 am 12:14 AM

HTML5의 목표는 개발 프로세스를 단순화하고 사용자 경험을 향상 시키며 동적 및 액세스 가능한 네트워크를 보장하는 것입니다. 1) 오디오 및 비디오 요소를 기본적으로 지원하여 멀티미디어 컨텐츠의 개발을 단순화합니다. 2) 콘텐츠 구조와 SEO 친근감을 향상시키기위한 의미 론적 요소 등을 소개합니다. 3) 애플리케이션 캐시를 통해 오프라인 함수 향상; 4) 요소를 사용하여 페이지 상호 작용을 향상시킵니다. 5) 모바일 호환성을 최적화하고 반응 형 디자인을 지원합니다. 6) 형태 기능을 개선하고 검증 프로세스를 단순화합니다. 7) Async 및 Defer 속성과 같은 성능 최적화 도구를 제공하십시오.

HTML5 : 새로운 기능과 기능으로 웹 변환May 11, 2025 am 12:12 AM

html5transformswebdevelopment는 소개 antranticlementements, multimediacapabilities, andperformanceoptimizationtools.1) semanticlements likes ,, andenhanceseoandaccessibility.2) multimediaElements and withoutplugins, iceveringue

CSS의 ID 대 수업 : 포괄적 인 비교May 11, 2025 am 12:12 AM

TherealDifferenceBet weenusinganidversusaClassincssissiSTIDSAREUNIQUENDHAVEHIGHERSPECIFIC, WHELECLASSEREEREUSABLEADBETTERSTYLINGMULTIPLEEMENTES.USEIDSFORJAVASFORJAVASCRICTSORUNIQUELEMENTS, AndUSECLASSESFORSTYLINGPURES

See all articles