GrabzIt'ta CSS Seçicilerini Kullanma

CSS seçiciler hedef öğede kullanılır, öğeyi gizler ve öğe özelliklerinin bir veya daha fazla HTML öğesini tanımlamasını bekler. İki ana CSS seçici türü, kimliğe veya sınıfa göre seçim yapmaktır. Bir HTML öğesinin, aşağıda gösterildiği gibi id niteliğini içermesi durumunda bir id'si vardır.

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

Seçmek için şöyle bir CSS seçici oluşturursunuz #myidentifier

Bir HTML öğesinin bir sınıfı varsa, bu örnekte gösterildiği gibi sınıf niteliğine sahip 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 şöyle bir CSS seçici oluşturursunuz .myclass

Sınıfıyla belirli bir öğeyi seçmek istiyorsanız myclass bu durumda bunu yapmak için standart bir CSS seçici kullanabilirsiniz. n'inci çocuk(2) böyle seçiciyi: .myclass:nth-child(2) ikinci myclass aralığını seçmek için. Ancak bu yalnızca bu durumda işe yarayacaktır çünkü ana div öğesinin altında başka öğe yoktur. Örneğin ap öğesi olsaydı, n'inci çocuk dizinini değiştirirdi.

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

Bazen seçmeniz gereken bir HTML öğesinin, sayfa içinde benzersiz bir kimliği veya sınıfı olmayabilir. Bu HTML öğelerini seçerken daha karmaşık bir CSS seçici gerekir.

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

Mesela yukarıdaki örnekte link içerisindeki DIV elemanını seçmek istiyoruz. Bunu yapmak için, benzersiz DIV'den aşağıya 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 iyi bir genel bakış sunmaktadır. CSS seçicileri nasıl kullanılır.

Birden Çok Eşleşen Öğeyi İşleme

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

Farklı kimliklere veya sınıflara sahip birden fazla öğeyi gizlemek istiyorsanız, bunu her CSS seçiciyi virgülle ayırarak yapabilirsiniz. Örneğin yukarıdaki örnek sınıfı ve kimliği gizlemek için aşağıdakileri kullanırsınız: #myidentifier,.myclass

Daha Fazla Web Yakalama Makalesi Topluluk Sorular