HTML Nút Đình nhận: hoạt động CSS Pseudo Lớp

Question

CSS:

button:active { 
/* active css */ 
} 

button:disabled { 
    opacity: 0.5; 
} 

HTML:

<button disabled="disabled">Ok</button> 

Khi tôi nhấp vào nút trình duyệt bổ sung thêm nút: trạng thái hoạt động làm cho nó trông giống như nó được nhấp (mặc dù nó bị tắt). Tôi thề tôi nghĩ: hoạt động chỉ được thêm nếu nút đã được bật. Tôi đã bỏ lỡ điều gì?

Answer 1

Từ những gì tôi có thể biết, :active không loại trừ các yếu tố :disabled. Bạn có thể đọc số spec nếu muốn.

Để giải quyết vấn đề của bạn, bạn có thể loại trừ các yếu tố :disabled bởi nhắm mục tiêu chỉ :enabled yếu tố với :active chọn của bạn:

button:enabled:active { 
/* active css */ 
} 

button:disabled { 
    opacity: 0.5; 
} 

Demo: http://jsfiddle.net/Blender/LRvra/1/

Answer 2

According to the CSS3 specification (:disabled không có trong CSS2.1) không có đề cập đến rằng :active và :disabled loại trừ lẫn nhau. Có thể phần này của đặc tả cần làm rõ để UAs được tự do áp dụng các lớp giả kết hợp.

Tôi đề nghị bạn sửa đổi selectors của bạn sẽ được rõ ràng hơn:

button:enabled:active { 
    /* active css */ 
} 
button:disabled { 
    opacity: 0.5; 
} 

Answer 3

Bạn cũng có thể sử dụng: không() - mô tả của css:

button:active:not(:disabled) { 
/* active css */ 
} 

button:disabled { 
    opacity: 0.5; 
} 

Chúc y'all tốt nhất, Patric