Web Yakalama ve Dönüştürme Araçları

GrabzIt'ta CSS Seçicilerini Kullanma

CSS seçicileri hedef öğede kullanılır, öğeyi gizler ve bir veya daha fazla HTML öğesini tanımlamak için öğe özelliklerini bekler. İki ana CSS seçici tipi id veya sınıfa göre seçmektir. Bir HTML öğesinin, aşağıda gösterildiği gibi id niteliğini içermesi halinde bir kimliği vardır.

<span id="myidentifier">Example Text</span>

Seçmek için bir CSS seçici yarat #myidentifier

Bir HTML öğesinin bir sınıfı varsa, bu örnekte gösterildiği gibi sınıf özniteliği olacaktır.

<div>
<span class="myclass">Example Text One</span>
<span class="myclass">Example Text Two</span>
<span class="myclass">Example Text Three</span>
</div>

Seçmek için bir CSS seçici yarat .myclass

Sınıfıyla belirli bir öğeyi seçmek istiyorsanız myclass Bunu yapmak için standart bir CSS seçiciyi kullanabilirsiniz. n'inci-çocuk (2) böyle seçiciyi: .myclass:nth-child(2) İkinci myclass alanını seçmek için Ancak bu sadece bu durumda işe yarayacaktır, çünkü ana div öğesinin altında başka bir eleman yoktur. Örneğin, eğer bir p elemanı olsaydı, nt-child indeksini değiştirirdi.

Benzersiz kimliği veya sınıfı olmayan bir HTML öğesi seçin

Bazen seçmeniz gereken bir HTML öğesinin, bir sayfada benzersiz olan bir kimliği veya sınıfı yoktur. Bu HTML öğelerini seçerken, daha karmaşık bir CSS seçici gereklidir.

<div class="Header">
   <a href="https://www.example.com/">
     <div>...</div>
   </a>
   <div class="SearchBar">...</div>
   <div class="TagLine">...</div>
</div>

Örneğin, yukarıdaki örnekte, bağlantı içindeki DIV öğesini seçmek istiyoruz. Bunu yapmak için, benzersiz DIV'den aşağı doğru çalışan bir CSS seçici belirtmemiz gerekir. Header sınıf.

div.Header a div

CSS seçicileri web geliştirmenin standart bir özelliğidir. Bu makale, CSS seçicileri kullanma.

Birden Çok Eşleşen Öğeyi Kullanma

Bir CSS seçiciden birden fazla HTML öğesi döndürülürse ve hedef öğeyi kullanıyorsanız veya öğe özelliklerini beklerseniz, yalnızca ilk eşleşen öğe kullanılır. Ancak, eğer hide element özelliğini kullanıyorsanız, eşleşen tüm HTML elementleri gizlenecektir.

Farklı kimlikleri veya sınıfları olan birden çok öğeyi gizlemek istiyorsanız, bunu her CSS seçiciyi virgülle ayırarak yapabilirsiniz. Mesela yukarıdaki örnek sınıfı ve kimliği gizlemek için aşağıdakileri kullanabilirsiniz. #myidentifier,.myclass