부트스트랩에서 스타일을 바꾸는 방법

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

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

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

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

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

1. CSS 선택자

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

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

3. : id)

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

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

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

7. 그룹 선택기 div,span,img {color:Red}는 동일한 스타일의 태그가 그룹으로 표시됨을 의미합니다

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

9. 의사 클래스 선택기(예: 링크 스타일, 요소의 의사 클래스, 4가지 상태: 링크 , Visited, active, hover.)

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

11. 하위 선택기(예: div>p) , 숫자보다 큼>)

12. CSS 인접 형제 선택기(예: h1+p, 더하기 기호 +)

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

두 번째, 우선 순위

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

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

ID 선택기의 가중치는 하나 이상의 ID 선택기로 정의됩니다. 예를 들어, #id{margin:0;}id 선택기는 class selector.classname{margin:3pxl}

클래스 클래스 선택기의 가중치는 10입니다. 이는 하나 이상의 클래스 선택기, 속성 선택기, 의사 클래스 선택기 정의. 예를 들어 .classname{margin:3px}은 div{margin:6px;}

레이블 선택기 가중치는 1입니다. 하나 이상의 유형 선택기에 의해 정의됩니다. 예를 들어 div{marigin:6px;}는 *{margin:10px;}

와일드 카드 선택기를 재정의합니다. 예: *{marigin:6px;}

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

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

important

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

쿼리 경험:

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

!important만 사용하세요

사이트 전체 또는 외부 CSS(예: 참조된 ExtJ 또는 YUI)를 다루어야 하는 특정 페이지에서는 절대 !important

를 사용하세요.

플러그인에서 최적화하려면 !important

대신 스타일 규칙 우선순위를 사용하여 문제를 해결하는 것이 좋습니다.

위 내용은 부트스트랩에서 스타일을 바꾸는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!