[css] Twitter 부트 스트랩에서 스타일을 덮어 쓰는 방법

이에 대한 대답은 CSS 특이성입니다. 부트 스트랩 CSS 속성을 재정의 할 수 있도록 CSS에서 “특정”적이어야합니다.

예를 들어 부트 스트랩 메뉴의 샘플 코드가 있습니다.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

여기서 특이성의 계층 구조를 기억해야합니다. 다음과 같이 진행됩니다.

• ID가 100 포인트 인 요소를 제공하십시오.
• 10 개의 클래스를 가진 요소를 부여하십시오
• 간단한 요소에 단일 1 점을 줘

따라서 위의 경우 CSS에 다음과 같은 것이 있으면

.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */

따라서 .navbar a이후를 정의한 경우에도.navbar ul li a 특이도가 더 높기 때문에 (13 포인트) 녹색 대신 빨간색으로 대체됩니다.

따라서 기본적으로 브라우저에서 inspect 요소를 통해 CSS를 변경하려는 요소의 점을 계산하면됩니다. 여기서 부트 스트랩은 요소의 CSS를 다음과 같이 지정했습니다.

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;
}

따라서 CSS 가로 드되는 경우에도 다음 줄이있는 bootstrap.css 후에로드됩니다.

.navbar-nav li a {
    color: red;
}

여전히 # 999로 렌더링됩니다. 이를 해결하기 위해 부트 스트랩에는 22 포인트가 있습니다 (직접 계산하십시오). 우리에게 필요한 것은 그 이상입니다. 따라서 홈 메뉴 컨테이너 및 홈 메뉴와 같은 요소에 사용자 정의 ID를 추가했습니다. 이제 다음 CSS가 작동합니다.

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

끝난.

이 MDN 링크를 참조 할 수 있습니다 .

답변

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

.page-header
{
    padding-bottom: 9px;
    margin: 15px 0 10px 0px !important;
}

$bodyBackground: red;
@import "bootstrap";

@import "bootstrap";

/* override anything manually, like rounded buttons */
.btn {
  border-radius: 0;
}