Tại sao tôi không thể ghi đè CSS bootstrap

Tôi đã cố gắng rất nhiều để ghi đè css bootstrap bằng css thanh điều hướng sau. Mỗi lần tôi cố tải css, tôi thậm chí không thể thấy gì trong trình duyệt của mình

 .navbar-default {
    background-color: #205ba2;
    border-color: #2d74ca;
}
.navbar-default .navbar-brand {
    color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #dce9f8;
}
.navbar-default .navbar-text {
    color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
    color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #dce9f8;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #dce9f8;
    background-color: #2d74ca;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #dce9f8;
    background-color: #2d74ca;
}
.navbar-default .navbar-toggle {
    border-color: #2d74ca;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #2d74ca;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #ecf0f1;
}
.navbar-default .navbar-link {
    color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
    color: #dce9f8;
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ecf0f1;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #dce9f8;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #dce9f8;
        background-color: #2d74ca;
    }
}

Đây là thứ tự đúng theo ý kiến ​​​​của tôi nhưng nó không hoạt động bất cứ lúc nào

ghi bàn. 1

câu trả lời được chấp nhận

1. Bạn cần bao gồm liên kết CSS của mình tới trang sau liên kết tới Bootstrap. Ví dụ

2. Đối với một số quy tắc bạn cần sử dụng. quan trọng

3. Ngoài ra, hãy thử thêm bất kỳ chuỗi truy vấn nào vào URL tệp CSS của bạn để tránh sự cố сaching chẳng hạn

Bài đăng nổi bật từ cùng một thẻ

Từ trang trước, chúng ta đã biết rằng các biến toàn cục có thể được truy cập/sử dụng trong toàn bộ tài liệu, trong khi các biến cục bộ chỉ có thể được sử dụng bên trong bộ chọn nơi nó được khai báo

Nhìn vào ví dụ từ trang trước

Ví dụ

:root {
  --blue. #1e90ff;
  --white. #ffffff;
}

body {
  màu nền. var(--blue);
}

h2 {
  đường viền dưới cùng. 2px solid var(--blue);
}

.container {
  màu. var(--blue);
  màu nền. var(--white);
  phần đệm. 15px;
}

nút {
  màu nền. var(--white);
  màu. var(--blue);
  viền. 1px solid var(--blue);
  phần đệm. 5px;
}

Đôi khi chúng tôi muốn các biến chỉ thay đổi trong một phần cụ thể của trang

Giả sử chúng ta muốn có một màu xanh lam khác cho các phần tử nút. Sau đó, chúng ta có thể khai báo lại biến --blue bên trong bộ chọn nút. Khi chúng ta sử dụng var(--blue) bên trong bộ chọn này, nó sẽ sử dụng giá trị biến cục bộ --blue được khai báo tại đây

Chúng ta thấy rằng biến --blue cục bộ sẽ ghi đè biến --blue toàn cầu cho các phần tử nút

Ví dụ

:root {
  --blue. #1e90ff;
  --white. #ffffff;
}

body {
  màu nền. var(--blue);
}

h2 {
  đường viền dưới cùng. 2px solid var(--blue);
}

.container {
  màu. var(--blue);
  màu nền. var(--white);
  phần đệm. 15px;
}

nút {
  --blue. #0000ff; . var(--white);
  background-color: var(--white);
  màu. var(--blue);
  viền. 1px solid var(--blue);
  phần đệm. 5px;
}

Thêm một biến cục bộ mới

Nếu một biến chỉ được sử dụng ở một nơi duy nhất, chúng ta cũng có thể khai báo một biến cục bộ mới, như thế này

Ví dụ

:root {
  --blue. #1e90ff;
  --white. #ffffff;
}

body {
  màu nền. var(--blue);
}

h2 {
  đường viền dưới cùng. 2px solid var(--blue);
}

.container {
  màu. var(--blue);
  màu nền. var(--white);
  phần đệm. 15px;
}

nút {
  --button-blue. #0000ff; . var(--white);
  background-color: var(--white);
  màu. var(--button-blue);
  viền. 1px solid var(--button-blue);
  đệm. 5px;
}

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng var()

Bạn có thể ghi đè Bootstrap CSS không?

Tại sao Bootstrap CSS không hoạt động?

Tôi có thể sử dụng Bootstrap và CSS cùng nhau không?

Làm cách nào để ghi đè Bootstrap CSS trong Angular?