Làm thế nào để thiết lập phần tử: trạng thái di chuột trong các công cụ dev Chrome và phong cách chỉnh sửa của con

Question

Giả sử chúng ta có phong cách này:

.parent .child { ... } 

.parent:hover .child { ... } 

Cả hai bộ chọn phong cách thiết lập cho phần tử con.

Điều tôi muốn là chỉnh sửa kiểu thứ hai.

1. tôi bấm vào .parent và thiết lập :hover nhà nước trong các công cụ nhà phát triển Chrome
2. Nhấn vào một yếu tố .child để có được phong cách của đứa trẻ nhưng ...

Khi tôi bấm vào .child di chuột vào cha mẹ đã biến mất (vì nó hiện được đặt trên .child).

^{này hoạt động trong Firebug dù nhưng tôi cần nó trong Chrome ...}

Chrome 21.0.1180.89 m

Answer 1

Cập nhật: Chrome hiện có nóng mới sau:

1. Kích chuột phải vào phần tử con và chọn Kiểm tra Element
   • Chrome sẽ mở Elements View với mục đã chọn
      

2. Trong giao diện Elements, kích chuột phải vào các yếu tố phụ huynh và chọn "Force Yếu tố Nhà nước ▶: hover"
   

3. Chọn phần tử con trong Elements xem một lần nữa.

---

cũ, kỹ thuật hợp lệ-nhưng-đáng ghét sau:

Thử nghiệm với this JSFiddle:

1. Hover phần tử con riêng của mình (mà cũng dao động phụ huynh).
2. Nhấp chuột phải vào con.
3. Sử dụng bàn phím (không chuột) di chuyển vùng chọn menu ngữ cảnh xuống "Inspect Element" và nhấn Nhập
   • Hurrah, các quy tắc CSS cho phụ huynh bay lượn và con lựa chọn có sẵn
4. Chỉnh sửa quy tắc. (Bạn có thể di chuyển chuột để thực hiện việc này; mục sẽ bị hủy, nhưng quy tắc CSS với :hover sẽ không bị mất.)
5. Rê chuột qua phần tử để xem quy tắc thay đổi có hiệu lực .

Lưu ý rằng nếu bạn làm sai ở bước 3 (nếu bạn sử dụng chuột), trước tiên bạn phải chọn một yếu tố khác trước khi thử lại.

Answer 2

Khi bạn có những công cụ dev mở và bạn nhìn vào phong cách ở phía bên phải của thanh tiêu đề, nơi có nội dung là Styles, có nút dấu cộng để bạn có thể thêm quy tắc biểu định kiểu thanh tra tùy chỉnh. Đây có thể là những gì bạn đang tìm kiếm.

Answer 3

(Chrome 22)

Trong Elements bảng điều khiển, bấm chuột phải yếu tố .parent và chọn Force Element State > :hover trong menu ngữ cảnh. Thì đấy.

Cách khác, bạn có thể nhấp vào nút "con trỏ trên hình chữ nhật chấm" trong tiêu đề ngăn Styles ở bên phải và chọn/bỏ chọn các lớp giả để buộc trên phần tử hiện được chọn.

Trạng thái phần tử hiện có thể bị ép buộc trên bất kỳ phần tử nào trong cây DOM, không chỉ các phần tử hiện được chọn.