부트스트랩으로 스타일을 변경할 수 있나요?

부트스트랩 기본 스타일 변경

부트스트랩을 오랫동안 사용하지 않아서 필요에 따라 스타일을 수정하는 것을 잊어버렸습니다.

시작하자마자 새 클래스를 추가하고 CSS 스타일을 다시 작성하여 원래 스타일을 덮어썼는데 실제로 작동하지 않았습니다. 선택자의 우선순위를 고려하지 않기 때문입니다. 면접 때 이런 질문도 나오겠지만, 이론과 실무를 연결한 적은 한 번도 없습니다.

제 해결책은 하위 선택자를 통해 가중치를 높이는 것입니다. 다른 사람들도 ID를 사용하는 것을 보니 ID 선택자를 추가하는 것을 별로 좋아하지 않습니다.

선택자의 물결과 우선순위를 기억해 보세요.

1. CSS 선택자

1. 태그 선택자(예: body, div, p, ul, li)

2. 클래스 선택자(예: class)

3. id)

4. 전역 선택자(예: *)

5. 결합 선택자(예: .head .head_logo, 두 선택자는 스페이스바로 구분됩니다.)

6. as: # head .nav ul li 상위 세트에서 하위 세트로 선택)

7. 그룹 선택기 div, span, img {color:Red} 즉, 동일한 스타일의 태그가 그룹에 표시됩니다

8. (예: :div p, 두 선택기는 스페이스바로 구분됩니다.)

9. 의사 클래스 선택기(예: 링크 스타일, a 요소의 의사 클래스, 4가지 상태) 링크, 방문, 활성, 호버.)

10. 문자열 일치를 위한 속성 선택기(^$* 세 가지 유형, 각각 시작, 끝, 포함에 해당)

11 하위 선택기(예: div>p , 초과 기호 포함)

12. CSS 단계 환경 선택기(예: h1+p, 더하기 기호 + 포함)

관련 권장 사항: "Bootstrap 시작 튜토리얼"

2. 스타일 선언에 !important 규칙을 사용하면 이 스타일 선언이 CSS의 다른 선언보다 우선 적용되며 ie6에서는 이 속성을 지원하지 않습니다.

인라인 스타일 시트의 가중치는 최대 1000입니다. 즉, HTML의 요소 태그에 스타일을 추가하는 것, 즉 인라인 스타일입니다. 이 방법을 사용하면 CSS 관리가 어려워지므로 권장되지 않습니다.

ID 선택기의 가중치는 하나 이상의 ID 선택기로 정의됩니다. 예를 들어 #id{margin:0;}id 선택기는 클래스 선택기 .classname{margin:3pxl}을 재정의합니다.

클래스 클래스 선택자의 가중치는 하나 이상의 클래스 선택자, 속성 선택자 및 의사 클래스 선택자로 정의됩니다. 예를 들어, .classname{margin:3px}은 div{margin:6px;}을 포함합니다.

태그 선택기 가중치는 1입니다. 하나 이상의 유형 선택기로 정의됩니다. 예를 들어 div{marigin:6px;}는 *{margin:10px;}을 포함합니다.

와일드카드 선택기: *{marigin:6px;} 등.

브라우저 사용자 정의 또는 상속 가중치는 0.1입니다.

요약: !중요 > 인라인 스타일 > ID 선택기 > 태그 > 상속 > 브라우저 기본 속성

important

!important를 사용하는 것은 나쁜 습관이며 가능한 한 피해야 합니다. 스타일 시트에 내재된 계단식 규칙을 위반하고 디버깅 및 버그 찾기를 더 어렵게 만들기 때문입니다. !important 규칙이 있는 두 개의 충돌하는 선언이 동일한 요소에 적용될 때 더 높은 우선 순위를 갖는 선언이 사용됩니다.

쿼리 레슨:

사이트 전체 CSS에서는 !important를 절대 사용하지 마세요.

전체 사이트나 외부 CSS(예: 참조된 ExtJ 또는 YUI)를 포괄해야 하는 특정 페이지에서만 !important를 사용하세요.

플러그인에 !important를 절대 사용하지 마세요.

최적화하려면 !important 대신 스타일 규칙의 우선순위를 사용하여 문제를 해결하는 것이 좋습니다.

위 내용은 부트스트랩으로 스타일을 변경할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!