Hướng dẫn element style overriding css - kiểu phần tử ghi đè css

Question

Mục lục

Đôi khi các nhà phát triển phải làm việc với các mã cũ, và đó là khi họ gặp phải một số vấn đề lớn, đặc biệt, phong cách nội tuyến không thể bị ghi đè.

Nội dung chính Show

Mục lục
Ví dụ về việc sử dụng một phần tử kế thừa kiểu của phần tử cha:
Ví dụ về việc ghi đè kiểu của thẻ:
Ví dụ về việc ghi đè kiểu CSS với bộ chọn ID:
Ví dụ về việc ghi đè kiểu CSS với bộ chọn lớp:
Ví dụ về việc tạo một kiểu ghi đè khác:
Ví dụ về việc ghi đè kiểu CSS với! Quy tắc quan trọng:

Nội dung chính

Mục lục
Ví dụ về việc sử dụng một phần tử kế thừa kiểu của phần tử cha:
Ví dụ về việc ghi đè kiểu của thẻ:
Ví dụ về việc ghi đè kiểu CSS với bộ chọn ID:
Ví dụ về việc ghi đè kiểu CSS với bộ chọn lớp:
Ví dụ về việc tạo một kiểu ghi đè khác:
Ví dụ về việc ghi đè kiểu CSS với! Quy tắc quan trọng:

Để ngăn chặn vấn đề đó, bạn nên hiểu hai khái niệm - khái niệm về trật tự và kế thừa.

Thuật ngữ xếp tầng xếp tầng có nghĩa là thứ tự phân cấp trong đó các loại bảng kiểu khác nhau tương tác khi hai kiểu đi vào xung đột. Xung đột xảy ra khi hai kiểu khác nhau được áp dụng cho cùng một yếu tố.

Đối với những trường hợp này, tồn tại một đơn đặt hàng cho các bảng phong cách theo mức độ ưu tiên của chúng (4 có ưu tiên cao nhất):

Trình duyệt mặc định.
Tấm phong cách bên ngoài (liên kết hoặc nhập khẩu).
Tấm phong cách nội bộ (nhúng).
Phong cách nội tuyến.

Vì vậy, nó có nghĩa là khi một cuộc xung đột phát sinh giữa hai phong cách, kiểu cuối cùng được sử dụng được ưu tiên. Để làm cho nó rõ ràng hơn, bạn nên nhớ hai quy tắc sau:

Bạn phải đặt các kiểu nội tuyến trong tài liệu HTML, trong khi các bảng kiểu nhúng phải được đặt trong tài liệu HTML để các kiểu nội tuyến sẽ luôn là mẫu được sử dụng cuối cùng và do đó chúng sẽ được ưu tiên.
Các bảng phong cách nội bộ có mức độ ưu tiên cao hơn so với các bảng bên ngoài, vì theo trình duyệt, các bảng phong cách bên ngoài (bảng kiểu liên kết) luôn đến trước các bảng phong cách bên trong (tấm nhúng), ngay cả khi bạn đặt chúng sau.

Bạn có thể tìm thấy các ví dụ về các loại hình kiểu khác nhau ở đây.

HTML sử dụng các mối quan hệ cha mẹ-con. Một phần tử con thường sẽ kế thừa các đặc điểm của phần tử cha trừ khi có định nghĩa khác. Ví dụ, nhìn vào mã sau.

Ví dụ về việc sử dụng một phần tử kế thừa kiểu của phần tử cha:

html>
<html>
  <head>
    <style>
      body {
        color: blue;
        font-family: arial;
      }
    style>
  head>
  <body>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry .
    p>
  body>
html>

Ví dụ về việc ghi đè kiểu của thẻ:

Ví dụ về việc ghi đè kiểu CSS với bộ chọn ID:

Ví dụ về việc ghi đè kiểu CSS với bộ chọn lớp:

Ví dụ về việc tạo một kiểu ghi đè khác:
Ví dụ về việc ghi đè kiểu CSS với! Quy tắc quan trọng:
Để ngăn chặn vấn đề đó, bạn nên hiểu hai khái niệm - khái niệm về trật tự và kế thừa.

Thuật ngữ xếp tầng xếp tầng có nghĩa là thứ tự phân cấp trong đó các loại bảng kiểu khác nhau tương tác khi hai kiểu đi vào xung đột. Xung đột xảy ra khi hai kiểu khác nhau được áp dụng cho cùng một yếu tố.

Đối với những trường hợp này, tồn tại một đơn đặt hàng cho các bảng phong cách theo mức độ ưu tiên của chúng (4 có ưu tiên cao nhất):

Trình duyệt mặc định.

Ví dụ về việc ghi đè kiểu CSS với bộ chọn ID:

html>
<html>
  <head>
    <style>
      #testid {
        color: blue;
        font-weight: bold;
      }
      .example {
        color: red;
        font-weight: normal;
      }
    style>
  head>
  <body>
    <p id="testid" class="example">
      Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    p>
  body>
html>

Ví dụ về việc ghi đè kiểu CSS với bộ chọn lớp:

Ví dụ về việc tạo một kiểu ghi đè khác:

Ví dụ về việc ghi đè kiểu CSS với bộ chọn lớp:

html>
<html>
  <head>
    <style>
      #testid {
        color: #777777;
        font-style: normal;
        background-color: lightgreen;
      }
      .example {
        display: block;
        color: whitesmoke;
        font-style: italic;
        background-color: lightblue;
        padding: 20px;
      }
    style>
  head>
  <body>
    <div id="testid">
      <span class="example">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      span>
    div>
  body>
html>

Ví dụ về việc tạo một kiểu ghi đè khác:

Ví dụ về việc ghi đè kiểu CSS với! Quy tắc quan trọng:

Ví dụ về việc tạo một kiểu ghi đè khác:

html>
<html>
  <head>
    <style>
      .bg-blue {
        background-color: blue;
      }
      .bg-red {
        background-color: red;
      }
    style>
  head>
  <body>
    <div class="bg-blue bg-red">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    div>
  body>
html>

Ví dụ về việc ghi đè kiểu CSS với! Quy tắc quan trọng:!Important declaration is a great way to override the styles you want. When an important rule is used on a style declaration, this declaration will override any other declarations. When two conflicting declarations with the!important rules are applied to the same element, the declaration with a greater specificity will be applied.

Để ngăn chặn vấn đề đó, bạn nên hiểu hai khái niệm - khái niệm về trật tự và kế thừa.

Ví dụ về việc ghi đè kiểu CSS với! Quy tắc quan trọng:

html>
<html>
  <head>
    <style>
      .box[style*="color: red"] {
        color: white !important;
      }
      .box {
        background-color: blue;
        padding: 15px 25px;
        margin: 10px;
      }
    style>
  head>
  <body>
    <div class="box" style="color: red;">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    div>
  body>
html>

Tuy nhiên, bạn nên tránh sử dụng! Quan trọng, bởi vì nó làm cho việc gỡ lỗi trở nên khó khăn hơn bằng cách phá vỡ tầng tự nhiên trong các kiểu dáng của bạn.

Thay vì sử dụng! Quan trọng, bạn có thể thử những điều sau:

Sử dụng tốt hơn các tầng CSS.
Sử dụng các quy tắc cụ thể hơn. Bằng cách chỉ ra một hoặc nhiều phần tử trước phần tử bạn đã chọn, quy tắc trở nên cụ thể hơn và được ưu tiên cao hơn.
Là một trường hợp đặc biệt vô nghĩa cho (2), các bộ chọn đơn giản sao chép để tăng tính đặc hiệu khi bạn không có gì để chỉ định.

Nếu bạn muốn tìm thêm thông tin về! Tuyên bố quan trọng, chỉ cần bấm vào đây.

programming css Find element style Element style Remove element style element.style js

Hướng dẫn element style overriding css - kiểu phần tử ghi đè css

Mục lục

Ví dụ về việc sử dụng một phần tử kế thừa kiểu của phần tử cha:

Ví dụ về việc ghi đè kiểu của thẻ:

Ví dụ về việc ghi đè kiểu CSS với bộ chọn ID:

Ví dụ về việc ghi đè kiểu CSS với bộ chọn lớp:

Ví dụ về việc tạo một kiểu ghi đè khác:

Ví dụ về việc ghi đè kiểu CSS với! Quy tắc quan trọng:

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội