Kiểu phần tử trong CSS là gì?

Tôi đang cố gắng để một trang tự động điều chỉnh khi nội dung bổ sung được thêm vào trang. Tôi đã xác định bằng cách sử dụng Chrome (CTRL-SHFT J hoặc Kiểm tra phần tử) rằng nếu tôi thay đổi một phần tử được liệt kê trong phần tử. phong cách, chiều cao namley. 180px' đến 'chiều cao. auto’ Tôi nhận được hiệu ứng mà tôi mong muốn. Tôi nhận thấy rằng vùng chứa chỉ có kiểu này ('chiều cao. auto’) nhưng nó bị gạch bỏ. Làm cách nào để xác định lý do tại sao điều này bị gạch bỏ và phần tử nào sẽ đặt kiểu để kiểu CSS hiệu quả là 'chiều cao. tự động' chứ không phải 'chiều cao. 180px’?

Cảm ơn

1 tháng 4, 2014 lúc 11. 13 giờ sáng

Paulie_D

Thành viên

Có lẽ bạn có thể chia sẻ một liên kết?

Div sẽ có chiều cao tự động trừ khi được quy định khác...có vẻ như bạn cần xóa khai báo height:180px thay vì cố gắng thêm một khai báo mới

Tháng Tư 2, 2014 lúc 8. 15 giờ sáng

rkb

người tham gia

Đó dường như là vấn đề. Trong cửa sổ devtools của Chrome có một yếu tố phong cách. kiểu được đặt thành chiều cao. 180px nhưng không có mục nhập tương đương trong các kiểu. tập tin css. Thay vào đó, nếu tôi thay đổi điều này thành 'tự động' thì tôi sẽ nhận được hiệu ứng mà tôi muốn. Vấn đề là tôi không biết đặt 'chiều cao' ở đâu. phong cách tự động. Mục tiếp theo hiển thị các kiểu cho #demo. kết quả nhưng chiều cao. kiểu tự động bị gạch bỏ. Tôi không thể thấy bất kỳ đâu trong tệp CSS mà tôi đã đặt giá trị mã hóa cứng là 180px. Có vẻ như giá trị này được tính bằng cách nào đó

Tháng Tư 2, 2014 lúc 8. 22 giờ sáng

biên tập

người tham gia

Nếu Công cụ dành cho nhà phát triển Chrome cho bạn biết một kiểu được đặt trên element.style, điều đó có nghĩa là kiểu đó được đặt nội dòng trên HTML (thường là bằng JavaScript). Để ghi đè lên điều đó, bạn cần tạo một quy tắc cụ thể hơn trong tệp CSS của mình

Tôi nghĩ rằng điều duy nhất cụ thể hơn kiểu nội tuyến là một quy tắc (bộ chọn không quan trọng nhưng vì sự tỉnh táo của riêng bạn, hãy biến nó thành thứ gì đó chỉ đạt được nội dung bạn muốn) với !important ở cuối

Ví dụ

article .body p {
    height: auto !important;
}

Tuy nhiên, tôi cho rằng quy tắc đó được đặt trong một số JS hoặc jQuery vì hầu hết các plugin sẽ sửa đổi CSS của bạn bằng các kiểu nội tuyến. Nếu trường hợp này xảy ra, bạn nên hoàn tác kiểu trong cấu hình của plugin để không cần sử dụng ghi đè !important

Chúng tôi không thể giúp bạn nhiều nếu bạn không hiển thị cho chúng tôi trang có vấn đề

Đọc thêm về tính đặc hiệu của CSS

Tháng Tư 2, 2014 lúc 8. 28 giờ sáng

Paulie_D

Thành viên

Sẽ nói lại lần nữa…

Có lẽ bạn có thể chia sẻ một liên kết?

3 Tháng Tư, 2014 lúc 4. 46 giờ chiều

rkb

người tham gia

Ứng dụng web hiện không có trên trang web công cộng, ứng dụng này nằm trong nội bộ và không thể truy cập được. Khi vấn đề này được giải quyết, nó có thể ở trên một trang web công cộng mà tôi có thể đăng liên kết tới

Tháng Tư 4, 2014 tại 1. 43 giờ sáng

Paulie_D

Thành viên

Vấn đề là tôi không biết đặt 'chiều cao' ở đâu. phong cách tự động

Vì vậy, bạn không có quyền truy cập vào biểu định kiểu CSS?

Sử dụng "kiểm tra phần tử" sẽ cho bạn biết số dòng của quy tắc bạn cần thay đổi...lấy nó, mở biểu định kiểu trong trình chỉnh sửa yêu thích của bạn, thực hiện thay đổi, lưu tệp và thế là xong

4 Tháng Tư, 2014 lúc 5. 41 giờ sáng

rkb

người tham gia

Tôi có quyền truy cập vào biểu định kiểu CSS. Điều đó đưa tôi đến điểm của cuộc thảo luận này. Gần như tôi có thể nhận được, tôi xác định các thuộc tính kiểu như

#thử nghiệm. kết quả {
lề dưới. 40px;
chiều cao. tự động;
}

Sau đó, tôi chạy ứng dụng của mình và có vẻ như kiểu này không được áp dụng, vì vậy tôi kích hoạt các công cụ dành cho nhà phát triển Chrome và 'Kiểm tra phần tử' trên thành phần mà tôi muốn tạo kiểu. Ở phía bên tay phải, tôi thấy bộ chọn thành phần giống như tôi đã chỉ định nó trong biểu định kiểu nhưng chiều cao thuộc tính. tự động bị gạch bỏ. Ngay phía trên mục này là một bộ chọn cho 'phần tử. phong cách' với một mục duy nhất 'chiều cao. 180px'. Nếu tôi thay đổi mục nhập này từ ‘180px’ thành ‘auto’, tôi sẽ nhận được kết quả mà mình muốn. Nhưng không có bộ chọn nào trong biểu định kiểu cho 'phần tử. phong cách' vì vậy tôi không chắc mình nên đặt 'chiều cao' ở đâu. auto' để nó được áp dụng cho 'phần tử. phong cách'. Nếu tôi thay đổi biểu định kiểu của mình như

#thử nghiệm. kết quả {
lề dưới. 40px;
chiều cao. tự động. quan trọng;
}

tôi thấy chiều cao. Dòng 180px trong phần tử. bộ chọn kiểu trong 'Kiểm tra phần tử' bị gạch bỏ và một lần nữa tôi nhận được kết quả mà tôi muốn. Tôi muốn tránh đặt '. quan trọng' trong biểu định kiểu của tôi nếu có thể

Tháng Tư 4, 2014 lúc 6. 10 giờ sáng

Alen

người tham gia

Tôi thấy bộ chọn thành phần giống như tôi đã chỉ định trong biểu định kiểu nhưng chiều cao thuộc tính. tự động bị gạch bỏ. Ngay phía trên mục này là một bộ chọn cho 'phần tử. phong cách' với một mục duy nhất 'chiều cao. 180px'. Nếu tôi thay đổi mục nhập này từ '180px' thành 'auto', tôi sẽ nhận được kết quả mà mình muốn

element.style trong DevTools đề cập đến các kiểu nội tuyến được áp dụng cho phần tử đó. Kiểu nội tuyến sẽ được ưu tiên hơn bất kỳ kiểu nào bạn áp dụng qua biểu định kiểu. Đó là lý do tại sao tuyên bố của bạn bị gạch bỏ

Nhìn vào mã HTML của bạn và xem phần tử bạn đang cố sửa đổi có bất kỳ kiểu nội tuyến nào không… đại loại như

Yếu tố phong cách là gì?

Các yếu tố của phong cách trong HTML là gì?

Kiểu phần tử trong Chrome là gì?

Phong cách phần tử nằm ở đâu?