Đầu vào các lớp giả Css: không (bị vô hiệu hóa) không: [type = có thể gửi vào]: tập trung

138

Tôi muốn áp dụng một số css cho các thành phần đầu vào và tôi chỉ muốn làm điều đó cho các đầu vào không bị vô hiệu hóa và không gửi loại, bên dưới css không hoạt động, có thể nếu ai đó có thể giải thích cho tôi cách thêm này.

input:not(disabled)not:[type="submit"]:focus{
box-shadow:0 0 2px 0 #0066FF;
-webkit-box-shadow:0 0 4px 0 #66A3FF;
}

css css-selectors pseudo-class

— BurebistaRuler
nguồn

284

Thay vì:

input:not(disabled)not:[type="submit"]:focus {}

Sử dụng:

input:not([disabled]):not([type="submit"]):focus {}

disabledlà một thuộc tính vì vậy nó cần dấu ngoặc và dường như bạn đã trộn lẫn các dấu hai chấm và dấu ngoặc đơn trên :not()bộ chọn.

Bản trình diễn: http://jsfiddle.net/HSKPx/

Một điều cần lưu ý: Tôi có thể sai, nhưng tôi không nghĩ disabledđầu vào thường có thể nhận được trọng tâm, vì vậy phần đó có thể là dư thừa.

Cách khác, sử dụng :enabled

input:enabled:not([type="submit"]):focus { /* styles here */ }

Một lần nữa, tôi không thể nghĩ đến trường hợp đầu vào bị vô hiệu hóa có thể nhận được tiêu điểm, vì vậy có vẻ như không cần thiết.

— Wesley Murch
nguồn

41

: không ([bị vô hiệu hóa)) là một cách viết rất dài dòng: enable developer.mozilla.org/en-US/docs/Web/CSS/:enables

— Adria

@Adria không hoạt động với tôi với <a>. Đã có một cái bị vô hiệu hóa <a'd='disables'> và phải sử dụng cụ thể: bộ chọn bị vô hiệu hóa. FF65.

— Robert Niestroj

vì một số lý do ": enable" không hoạt động trong tức là 11 đối với tôi

— SLCH000

Có sự khác biệt nào giữa việc sử dụng :not([disabled])VS. :not(:disabled)?

— bubencode

15

Cú pháp của bạn khá khó hiểu.

Thay đổi điều này:

input:not(disabled)not:[type="submit"]:focus{

đến:

input:not(:disabled):not([type="submit"]):focus{

Có vẻ như nhiều người không nhận ra :enabledvà :disabledlà bộ chọn CSS hợp lệ ...

— Quê hương
nguồn

5

Tại sao không rút ngắn nó hơn nữa input:enabled:not([type="submit"]):focus{?

— Sean the Bean

7

Bạn có một vài lỗi chính tả trong lựa chọn của bạn. Nó nên là:input:not([disabled]):not([type="submit"]):focus

Xem jsFiddle này cho một bằng chứng về khái niệm. Trên một sidenote, nếu tôi loại bỏ thuộc tính "màu nền", thì bóng hộp không còn hoạt động. Không chắc chắn lý do tại sao.

— PatrikAkerstrand
nguồn