Làm cách nào để sử dụng Bộ chọn CSS trong bảng điều khiển?

Nếu bạn sử dụng Nhãn sản phẩm và gặp khó khăn trong việc tìm bộ chọn CSS, vui lòng thực hiện các bước đơn giản sau

1)  Di chuột qua hình ảnh và nhấp chuột phải

2)  Chọn Kiểm tra

3)  Xem mã hình ảnh được đánh dấu

4)  Nhấp chuột phải vào mã được đánh dấu

5)  Chọn Sao chép > Bộ chọn sao chép

Bạn không tìm thấy câu trả lời cho câu hỏi của mình?

Một trong những điều tuyệt vời với HelpDocs là nó rất dễ tùy chỉnh và làm cho nó phù hợp với thương hiệu của bạn là một miếng bánh. Cách dễ nhất để làm điều này là sử dụng CSS tùy chỉnh. Nhưng để CSS hoạt động có thể khó khăn, đặc biệt nếu bạn không phải là nhà phát triển.  

Chúng tôi không thể cung cấp cho bạn mã tùy chỉnh, nhưng chúng tôi hy vọng hướng dẫn này sẽ giúp bạn tìm thấy những gì bạn đang tìm kiếm. 🙃

Dưới đây là hướng dẫn về cách nhắm mục tiêu các yếu tố trên cơ sở kiến ​​thức của bạn và tùy chỉnh chúng để phù hợp với thương hiệu của bạn

Tìm Bảng điều khiển dành cho nhà phát triển trong trình duyệt của bạn

Điều đầu tiên bạn cần làm là tìm bảng điều khiển dành cho nhà phát triển trong trình duyệt của mình.  

Đừng lo—không có gì phải sợ ở đây cả. Bảng điều khiển dành cho nhà phát triển là một cách dễ dàng để xem các thành phần của trang và chỉnh sửa chúng trực tiếp mà không thực sự thay đổi mã.  

Với bảng điều khiển, chúng tôi sẽ chỉ muốn xem các bộ chọn CSS mà chúng tôi đã thêm, vì vậy bạn có thể nhắm mục tiêu chúng một cách hiệu quả và thay đổi giao diện của cơ sở kiến ​​thức của bạn

Trình duyệt Chrome

1. Nhấp vào nút Menu Chrome ở góc trên cùng bên phải

   Biểu tượng này sẽ giống như dấu chấm lửng dọc (nếu bạn cực kỳ thông minh và luôn cập nhật Chrome) hoặc mũi tên có màu đỏ tăng dần (nếu bạn giống tôi và chưa đóng Chrome trong năm nay)

2. Di chuột qua Công cụ khác
3. Nhấp vào Công cụ dành cho nhà phát triển

Bạn cũng có thể sử dụng bàn phím của mình bằng các phím tắt này

• Mac. Sử dụng Ctrl+_______2_______+I
• các cửa sổ. F12, Ctrl+Shift+I

Đã biết yếu tố bạn muốn nhắm mục tiêu? . Thao tác này sẽ hiển thị bộ chọn CSS cho phần tử đó

Cuộc đi săn

1. Nhấp vào Safari > Tùy chọn ở thanh menu trên cùng
2. Trong tab Nâng cao, đánh dấu vào Hiển thị menu Phát triển trong thanh menu
3. Trong thanh menu trên cùng, bạn sẽ thấy một menu mới có tên là Phát triển
   1. Nhấp vào Phát triển > Hiển thị Trình kiểm tra Web

Bạn cũng có thể sử dụng bàn phím của mình bằng phím tắt này

• Mac. Sử dụng Ctrl+_______8_______+I

Đã biết yếu tố bạn muốn nhắm mục tiêu? . Thao tác này sẽ hiển thị bộ chọn CSS cho phần tử đó

Microsoft Cạnh

1. Nhấn F12 trên bàn phím của bạn
2. Nhấp vào Trình khám phá DOM

Bạn cũng có thể sử dụng bàn phím của mình bằng các phím tắt này

• các cửa sổ. Ctrl+Shift+I

Đã biết yếu tố bạn muốn nhắm mục tiêu?

Trước tiên, hãy bật Kiểm tra bằng cách nhập về. cờ trong thanh URL, sau đó chọn Hiển thị "Xem nguồn" và "Kiểm tra phần tử" trong menu ngữ cảnh. Sau đó, nhấp chuột phải và nhấn Inspect Element để xem bộ chọn CSS cho phần tử đó

trình duyệt web IE

1. Trong thanh menu trên cùng, nhấp vào Công cụ > Công cụ dành cho nhà phát triển

Bạn cũng có thể sử dụng bàn phím của mình bằng các phím tắt này

• các cửa sổ. Ctrl3

Chúng tôi thực sự khuyên bạn nên chuyển sang Microsoft Edge nếu bạn đang sử dụng Internet Explorer. Nó không còn nhận được bản cập nhật nữa

Đã biết yếu tố bạn muốn nhắm mục tiêu? . Sau đó, nhấp vào yếu tố bạn muốn nhắm mục tiêu

firefox

1. Trong menu trên cùng, nhấp vào Công cụ > Nhà phát triển web > Trình kiểm tra

Bạn cũng có thể sử dụng bàn phím của mình bằng các phím tắt này

• Mac. Sử dụng Ctrl+______1_______5+I
• các cửa sổ. Ctrl+Shift+I

Đã biết yếu tố bạn muốn nhắm mục tiêu? . Thao tác này sẽ hiển thị bộ chọn CSS cho phần tử đó

Ô-pê-ra

1. Trên máy Mac
   1. Trong thanh menu trên cùng, nhấp vào Trang > Công cụ dành cho nhà phát triển > Opera Dragonfly
2. Trên Windows
   1. Ở thanh menu trên cùng, hãy nhấp vào Công cụ > Nâng cao > Opera Dragonfly

Bạn cũng có thể sử dụng bàn phím của mình bằng các phím tắt này

• Mac. Sử dụng Ctrl+______1_______5+I
• các cửa sổ. Ctrl+Shift+I

Đã biết yếu tố bạn muốn nhắm mục tiêu? . Thao tác này sẽ hiển thị bộ chọn CSS cho phần tử đó

Tìm bộ chọn CSS chính xác

Tuyệt vời. Vì vậy, bây giờ bạn sẽ có thể hiển thị bảng điều khiển dành cho nhà phát triển của mình bằng cách sử dụng menu hoặc bằng cách kiểm tra một phần tử trên trang. công việc tốt cho đến nay. Bạn đang trên con đường có thể tùy chỉnh HelpDocs của mình 👍

Bây giờ, hãy đi qua một ví dụ. Tôi sẽ sử dụng Chrome DevTools để thay đổi tất cả các màu liên kết trên các bài viết từ hồng sang tím

1. Đầu tiên, tôi sẽ mở một bài báo có liên kết trong. Sau đó, tôi sẽ nhấp chuột phải vào đầu phần tử và nhấp vào Kiểm tra
   
2. Bảng điều khiển của tôi sẽ bật lên với thông tin thành phần đã chọn. Bên trái là HTML và bên phải là CSS. Tôi sẽ cần xem CSS
   Có vẻ như tôi đã tìm thấy Bộ chọn CSS. Tôi có thể biết vì bảng điều khiển hiển thị cho tôi một số CSS trông khá quen thuộc (Cmd6). Hộp bên cạnh biểu thị màu hồng giống hệt với màu liên kết của tôi. Nó cũng hiển thị Cmd7 có thể dịch là div > link
   
3. Bây giờ tôi đã tìm thấy phần tử mà tôi đang tìm kiếm. Tôi sẽ sao chép thông tin in đậm để tôi có thể sử dụng nó trong CSS của riêng mình trong HelpDocs. Tôi sẽ không sao chép liên kết ở trên cùng bên phải vì nó không phải là một phần của CSS

   #articleBody a {
       color: #f45599;
   }

4. Bây giờ là lúc để đi đến HelpDocs. Tôi sẽ đi tới Cài đặt > Mã > CSS tùy chỉnh và dán CSS tôi vừa tìm thấy
5. Phew, tôi gần đến nơi rồi. Đã đến lúc thay đổi màu liên kết của tôi (bạn có thể sử dụng công cụ này để tìm màu). Tôi sẽ chọn Cmd8, một màu tím nhạt đẹp. Đơn giản là tôi sẽ thay màu cũ bằng màu mới
6. Tôi sẽ nhấn Lưu thay đổi và bây giờ màu liên kết của tôi toàn màu tím thay vì màu hồng. 🎉

Nó khá là nhiều. Để biết các hướng dẫn nâng cao hơn về cách sử dụng CSS, hãy truy cập Chúc may mắn và vui vẻ khi tùy chỉnh HelpDocs của bạn. 👩‍🎨

Làm cách nào để thêm CSS trong bảng điều khiển?

Làm cách nào để kiểm tra XPath và CSS trong bảng điều khiển?

Làm cách nào để sử dụng Bộ chọn CSS trong Selenium?