Làm cách nào để sử dụng tiện ích mở rộng bộ chọn CSS?

Web Scraper sử dụng bộ chọn css để tìm các thành phần HTML trong các trang web và trích xuất dữ liệu từ chúng. Khi chọn một phần tử, Web Scraper sẽ cố gắng đoán chính xác nhất bộ chọn CSS có thể là gì đối với các phần tử được chọn. Nhưng bạn cũng có thể tự viết và kiểm tra bằng cách nhấp vào "Xem trước phần tử". Bạn có thể sử dụng bộ chọn CSS có sẵn trong phiên bản CSS 1-4 (được trình duyệt hỗ trợ) và cả bộ chọn giả có sẵn trong jQuery. Dưới đây là một số liên kết tài liệu có thể giúp bạn

Bộ chọn Web Scraper bổ sung

Có thể thêm các bộ chọn CSS giả mới vào Web Scraper. Hiện tại chỉ có một bộ chọn CSS được thêm vào

bộ chọn gốc

Bộ chọn CSS _parent_ cho phép bộ chọn con của bộ chọn Phần tử chọn phần tử được trả về bởi bộ chọn Phần tử. Ví dụ: bộ chọn CSS này có thể được sử dụng trong trường hợp bạn cần trích xuất một thuộc tính từ phần tử mà bộ chọn Phần tử trả về

Chọn các thành phần trong iframe hoặc bóng gốc

Bộ chọn CSS được viết tùy chỉnh có thể được sử dụng để chọn các thành phần trong iframe hoặc shadow-root

Để chọn dữ liệu trong iframe, hãy tạo bộ chọn sẽ chọn thành phần iframe rồi sau đó thêm :iframe. Ví dụ. iframe:iframe .selector-within-iframe

Tương tự, một bộ chọn CSS tùy chỉnh có thể được sử dụng để chọn các phần tử trong gốc bóng tối. Đầu tiên chọn phần tử cha gốc của bóng tối và sau đó thêm :shadow-root vào bộ chọn. Ví dụ. .shadow-root-parent-element:shadow-root .selector-within-shadow-root

Bài viết này giải thích cách bạn có thể làm nổi bật đầy đủ các phần cụ thể trong ứng dụng web của mình bằng cách phát hiện và chọn đúng phần tử bằng cách sử dụng bộ chọn CSS

Ghi chú. Bạn cũng có thể xem hướng dẫn bằng video của chúng tôi về cách chọn phần tử HTML mong muốn thông qua tùy chọn Bộ chọn CSS tùy chỉnh

Phát hiện các phần tử và kết nối chúng với các thành phần UserGuiding

Bạn có thể tìm thấy các phần tử HTML và bộ chọn CSS của chúng bằng cách nhấp chuột phải đơn giản vào trang nền tảng của bạn và kiểm tra phần tử mong muốn trong bảng điều khiển của trình duyệt của bạn

Sau đó, bạn có thể nhập bộ chọn CSS bằng cách bật tùy chọn Bộ chọn CSS trong cài đặt tiện ích mở rộng Chrome của thành phần hướng dẫn (chú giải công cụ hoặc đầu vào) hoặc điểm phát sóng của bạn

Thí dụ

• Nhấp chuột phải và kiểm tra phần tử của bạn

• Chọn tên lớp hoặc ID của phần tử của bạn

• Sao chép bộ chọn CSS mong muốn (trong ví dụ này, chúng tôi chọn một ID) và dán nó bằng cách thêm # trước nó

• “book-book” là ID chúng tôi sẽ sử dụng làm bộ chọn CSS

Ghi chú quan trọng

• Chúng tôi khuyên bạn nên sử dụng ID vì chúng cụ thể hơn các lớp được tìm thấy trong nhiều phần tử HTML

• Nếu bạn muốn sử dụng tên lớp của một phần tử, bạn cần đặt dấu chấm (. ) trước tên của bộ chọn CSS;

  SelectorGadget là một công cụ nguồn mở giúp tạo và khám phá bộ chọn CSS trên các trang web phức tạp một cách dễ dàng. Chỉ cần cài đặt Tiện ích mở rộng của Chrome hoặc kéo bookmarklet vào thanh dấu trang của bạn, sau đó truy cập bất kỳ trang nào và khởi chạy trang đó. Một hộp sẽ mở ra ở dưới cùng bên phải của trang web. Nhấp vào một thành phần trang mà bạn muốn bộ chọn của mình khớp với (nó sẽ chuyển sang màu xanh lục). SelectorGadget sau đó sẽ tạo một bộ chọn CSS tối thiểu cho phần tử đó và sẽ đánh dấu (màu vàng) mọi thứ phù hợp với bộ chọn. Bây giờ hãy nhấp vào phần tử được tô sáng để xóa phần tử đó khỏi bộ chọn (màu đỏ) hoặc nhấp vào phần tử không được tô sáng để thêm phần tử đó vào bộ chọn. Thông qua quá trình lựa chọn và từ chối này, SelectorGadget giúp bạn đưa ra bộ chọn CSS hoàn hảo cho nhu cầu của bạn

  Làm thế nào tôi có thể sử dụng này?

  • để quét trang web bằng các công cụ như Nokogiri và Beautiful Soup
  • để tạo bộ chọn jQuery cho các trang web động
  • như một công cụ để kiểm tra các cấu trúc DOM do JavaScript tạo
  • như một công cụ giúp bạn chỉ tạo kiểu cho các thành phần cụ thể trên trang bằng bảng định kiểu của mình
  • để thử nghiệm selen hoặc phantomjs

  Trong CSS, các bộ chọn được sử dụng để nhắm mục tiêu các phần tử HTML trên các trang web của chúng tôi mà chúng tôi muốn tạo kiểu. Có rất nhiều bộ chọn CSS có sẵn, cho phép độ chính xác chi tiết khi chọn các thành phần để tạo kiểu. Trong bài viết này và các bài viết phụ của nó, chúng ta sẽ tìm hiểu rất chi tiết về các loại khác nhau, xem chúng hoạt động như thế nào

  điều kiện tiên quyết. Biết sử dụng máy tính cơ bản, cài đặt phần mềm cơ bản, kiến ​​thức cơ bản về làm việc với tệp, kiến ​​thức cơ bản về HTML (học Giới thiệu về HTML) và ý tưởng về cách thức hoạt động của CSS (học các bước đầu tiên của CSS. )Khách quan. Để tìm hiểu chi tiết cách hoạt động của bộ chọn CSS

  Bộ chọn CSS là phần đầu tiên của Quy tắc CSS. Đó là một mẫu các phần tử và các thuật ngữ khác cho trình duyệt biết phần tử HTML nào sẽ được chọn để có các giá trị thuộc tính CSS bên trong quy tắc được áp dụng cho chúng. Phần tử hoặc các phần tử được chọn bởi bộ chọn được gọi là chủ đề của bộ chọn

  Trong các bài viết khác, bạn có thể đã gặp một số bộ chọn khác nhau và biết được rằng có những bộ chọn nhắm mục tiêu tài liệu theo những cách khác nhau — ví dụ: bằng cách chọn một phần tử chẳng hạn như

  h1, .special {
    color: blue;
  }
  

  3 hoặc một lớp chẳng hạn như

  h1, .special {
    color: blue;
  }
  

  4

  Trong CSS, bộ chọn được xác định trong đặc tả Bộ chọn CSS; . Phần lớn các bộ chọn mà bạn sẽ gặp được xác định trong đặc tả Bộ chọn cấp 3 và đặc tả Bộ chọn cấp 4, cả hai đều là các đặc tả trưởng thành, do đó bạn sẽ tìm thấy hỗ trợ trình duyệt tuyệt vời cho các bộ chọn này

  Nếu bạn có nhiều thứ sử dụng cùng một CSS thì các bộ chọn riêng lẻ có thể được kết hợp thành một danh sách bộ chọn để quy tắc được áp dụng cho tất cả các bộ chọn riêng lẻ. Ví dụ: nếu tôi có cùng một CSS cho một

  h1, .special {
    color: blue;
  }
  

  3 và cũng là một lớp của

  h1, .special {
    color: blue;
  }
  

  4, tôi có thể viết điều này thành hai quy tắc riêng biệt

  h1 {
    color: blue;
  }
  
  .special {
    color: blue;
  }
  

  Tôi cũng có thể kết hợp chúng thành một danh sách bộ chọn bằng cách thêm dấu phẩy giữa chúng

  h1, .special {
    color: blue;
  }
  

  Khoảng trắng có giá trị trước hoặc sau dấu phẩy. Bạn cũng có thể thấy các bộ chọn dễ đọc hơn nếu mỗi bộ chọn nằm trên một dòng mới

  h1,
  .special {
    color: blue;
  }
  

  Trong ví dụ trực tiếp bên dưới, hãy thử kết hợp hai bộ chọn có khai báo giống hệt nhau. Màn hình trực quan phải giống nhau sau khi kết hợp chúng

  Khi bạn nhóm các bộ chọn theo cách này, nếu bất kỳ bộ chọn nào không hợp lệ về mặt cú pháp, toàn bộ quy tắc sẽ bị bỏ qua

  Trong ví dụ sau, quy tắc bộ chọn lớp không hợp lệ sẽ bị bỏ qua, trong khi đó ____________3 vẫn sẽ được tạo kiểu

  ________số 8_______

  Tuy nhiên, khi được kết hợp, cả

  h1, .special {
    color: blue;
  }
  

  3 và lớp sẽ không được tạo kiểu vì toàn bộ quy tắc được coi là không hợp lệ

  h1, ..special {
    color: blue;
  }
  

  Có một số nhóm bộ chọn khác nhau và việc biết loại bộ chọn nào bạn có thể cần sẽ giúp bạn tìm được công cụ phù hợp cho công việc. Trong các bài viết con của bài viết này, chúng ta sẽ xem xét chi tiết hơn các nhóm bộ chọn khác nhau

  Nhóm này bao gồm các bộ chọn nhắm mục tiêu một phần tử HTML, chẳng hạn như một

  h1, .special {
    color: blue;
  }
  

  9

  h1 {
  }
  

  Nó cũng bao gồm các bộ chọn nhắm mục tiêu một lớp

  .box {
  }
  

  hoặc, một ID

  #unique {
  }
  

  Nhóm bộ chọn này cung cấp cho bạn các cách khác nhau để chọn các phần tử dựa trên sự hiện diện của một thuộc tính nhất định trên một phần tử

  a[title] {
  }
  

  Hoặc thậm chí thực hiện lựa chọn dựa trên sự hiện diện của một thuộc tính với một giá trị cụ thể

  a[href="https://example.com"]
  {
  }
  

  Nhóm bộ chọn này bao gồm các lớp giả, tạo kiểu cho các trạng thái nhất định của một phần tử. Ví dụ, lớp giả

  h1,
  .special {
    color: blue;
  }
  

  0 chỉ chọn một phần tử khi nó được con trỏ chuột di chuột qua

  h1, .special {
    color: blue;
  }
  

  0

  Nó cũng bao gồm các phần tử giả, chọn một phần nhất định của phần tử thay vì chính phần tử đó. Ví dụ:

  h1,
  .special {
    color: blue;
  }
  

  1 luôn chọn dòng văn bản đầu tiên bên trong một phần tử (một

  h1,
  .special {
    color: blue;
  }
  

  2 trong trường hợp bên dưới), hành động như thể một ____6_______3 được bao quanh dòng được định dạng đầu tiên và sau đó được chọn

  h1, .special {
    color: blue;
  }
  

  1

  Nhóm bộ chọn cuối cùng kết hợp các bộ chọn khác để nhắm mục tiêu các thành phần trong tài liệu của chúng tôi. Ví dụ, sau đây, chọn các đoạn văn là con trực tiếp của các phần tử

  h1,
  .special {
    color: blue;
  }
  

  4 bằng cách sử dụng bộ kết hợp con (

  h1,
  .special {
    color: blue;
  }
  

  5)

  h1, .special {
    color: blue;
  }
  

  2

  Trong bài viết này, chúng tôi đã giới thiệu bộ chọn CSS, cho phép bạn nhắm mục tiêu các phần tử HTML cụ thể. Tiếp theo, chúng ta sẽ xem xét kỹ hơn các bộ chọn loại, lớp và ID

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

  Bộ chọn id CSS . Id của một phần tử là duy nhất trong một trang, vì vậy bộ chọn id được sử dụng để chọn một phần tử duy nhất. Để chọn một phần tử có id cụ thể, hãy viết ký tự dấu thăng (#), theo sau là id của phần tử .

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

  Nhập “css=input[type='submit']” (giá trị định vị) trong Selenium IDE. Bấm vào nút Tìm. Nút “Đăng nhập” sẽ được tô sáng, xác minh giá trị của bộ định vị. Thuộc tính. Được sử dụng để tạo Bộ chọn CSS

  Làm cách nào để sử dụng XPath bằng bộ chọn CSS?

  Tìm Bộ chọn CSS hoặc XPath .

  Nhấp chuột phải vào một phần tử

  Chọn Kiểm tra

  Xác định vị trí phần tử trong bảng Thành phần của Công cụ dành cho nhà phát triển

  Nhấp chuột phải vào dòng của phần tử

  Chọn Sao chép -> Sao chép Bộ chọn hoặc Sao chép -> Sao chép XPath

  Dán kết quả vào trường ID của một hành động

  Làm cách nào để sao chép bộ chọn CSS cho Selenium?

  Nhấp chuột phải vào phần tử bằng chuột và chọn Sao chép mục trình đơn Bộ chọn Css vào bộ đệm , để bạn có thể chuyển bộ chọn đã sao chép sang bất kỳ trình soạn thảo văn bản nào. Rất hữu ích để nhanh chóng lấy bộ chọn cho bất kỳ phần tử nào để thử nghiệm các khung như Selenium.