Bitişik css seçiciler. CSS'de özel seçiciler. Bitişik, alt, bağlamsal ve etiket öznitelik seçicileri. Öznitelik değeri belirli bir metinle biter
Açıklama
Bir web sayfasının öğeleri, belge kodunda birbirlerini hemen takip ettiklerinde komşu olarak adlandırılır.
Sözdizimi
E + F (Stil kurallarının açıklaması)
Bitişik öğelerin stilini kontrol etmek için, iki E ve F seçici arasındaki artı (+) karakterini kullanın. Artı etrafındaki boşluklar isteğe bağlıdır. Bu stil F öğesi için geçerlidir, ancak yalnızca E öğesine bitişikse ve hemen sonrasındaysa. Bazı örneklere bakalım.
Lorem ipsum dolor otur amet.
Etiket etiketin alt öğesi
Çünkü bu kabın içinde. Sırasıyla
Ebeveyn olarak davranır .
Lorem ipsum dolor oturmak amet.
Etiketler ve üst üste gelmeyin ve bitişik öğeleri temsil etmeyin. Konteynerin içinde yer almaları Tutumlarını etkilemez. Lorem ipsum dolor sit amet, danışman adipiscing elit.
Etiketler burada bitişiktir ve , ve ve ... Nerede ve bitişik elemanlar, aralarında bir konteyner olması nedeniyle ilişkili değildir .
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, danışman adipiscing elit.
Lorem ipsum dolor sit amet, danışman adipiscing elit.
Bu örneğin sonucu Şekil 1'de gösterilmektedir. 1.
Şekil: 1. Bitişik seçiciler için kırmızı metin rengi
Tarayıcılar
Seçiciler arasında bir yorum (B + / * artı * / I) varsa, Internet Explorer 7 stil vermez.
Vlad Merzhevich
Bir web sayfasının öğeleri, belge kodunda birbirlerini hemen takip ettiklerinde komşu olarak adlandırılır. Bazı eleman ilişkileri örneklerine bakalım.
Lorem ipsum dolor otur amet.
Bu örnekte etiketi etiketin alt öğesi
Çünkü bu kabın içinde. Sırasıyla
Ebeveyn olarak davranır .
Lorem ipsum dolor oturmak amet.
Burada etiketler ve üst üste gelmeyin ve bitişik öğeleri temsil etmeyin. Konteynerin içinde yer almaları Tutumlarını hiçbir şekilde etkilemez. Lorem ipsum dolor sit amet, danışman adipiscing elit.
Etiketler burada bitişiktir ve , ve ve ... Nerede ve bitişik elemanlar, aralarında bir konteyner olduğu için ilişkili değildir .
Artı işareti (+), iki seçici arasına yerleştirilen bitişik öğelerin stilini kontrol etmek için kullanılır. Genel sözdizimi aşağıdaki gibidir.
Seçici 1 + Seçici 2 (Stil kurallarının açıklaması)
Artı etrafındaki boşluklar gerekli değildir, stil Seçici 2'ye uygulanır, ancak yalnızca Seçici 1'e bitişikse ve hemen ardından gelirse uygulanır.
Örnek 11.1, etiketlerin birbirleriyle nasıl etkileşim kurduğunun yapısını gösterir.
Örnek 11.1. Bitişik seçicileri kullanma
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, danışman adipiscing elit.
Lorem ipsum dolor sit amet, danışman adipiscing elit.
Örnek sonuç Şekil 2'de gösterilmiştir. 11.1.
Şekil: 11.1. Bitişik seçicileri kullanarak metni renkli olarak vurgulama
Bu örnek, kabın içeriği için metnin rengini değiştirir. konteynerin hemen arkasına yerleştirildiğinde ... İlk paragrafta bu durum uygulanır, böylece tarayıcıda "consectetuer" kelimesi kırmızı renkte görüntülenir. İkinci paragrafta bir etiketi olmasına rağmen ama yan tarafta etiket yok hayır, bu nedenle bu kaba stil uygulanmaz.
Daha pratik bir örneğe bakalım. Bir makalenin metnine genellikle çeşitli dipnotlar ve notlar eklemek gerekir. Genellikle bu amaçla yeni bir stil sınıfı oluşturulur ve bir paragrafa uygulanır, böylece metnin görünümünü kolayca değiştirebilirsiniz. Ama diğer tarafa gidip komşu seçicileri kullanacağız. Yorumları vurgulamak için yeni bir sınıf oluşturun, sic olarak adlandırın ve etikete uygulayın
... Böyle bir başlıktan sonraki ilk paragraf, bir arka plan rengi ve girintiyle vurgulanmıştır (örnek 11.2). Paragrafların geri kalanı değişmeden kalacaktır.
Örnek 11.2. Paragraf stilini değiştir
HTML5 CSS 2.1 IE Cr Op Sa Fx
Çölde aslan yakalama yöntemleri
Sıralı arama yöntemi
Aslanın genel boyutları L x G x Y olsun, burada L aslanın burnunun ucundan kuyruğunun fırçasına kadar olan uzunluğu, W aslanın genişliği ve H yüksekliği. Sonra çölü, boyutları aslanın genişliği ve uzunluğu ile örtüşen bir dizi temel dikdörtgene böleriz. Aslanın kesin olarak belirli bir alanda olmayabileceği, ancak aynı anda ikisinde olabileceği göz önüne alındığında, balıkçılık için kafesin 2L x 2W gibi artırılmış bir alandan yapılması gerekir. Bu sayede, aslanın sadece yarısı kafese yakalandığında veya daha kötüsü sadece kuyruğunda kaldığında hatalardan kaçınacağız.
Önemli Not
Hesaplamaları basitleştirmek için, bir ölçüm hatası olarak kuyruk atılabilir ve göz ardı edilebilir.
Bu örneğin sonucu Şekil 1'de gösterilmektedir. 11.2.
Şekil: 11.2. Bitişik seçicileri kullanarak bir paragrafın görünümünü değiştirme
Bu örnekte, metin paragraflar (etiket
), ancak H2.sic + P yazmak, stili yalnızca etiketinden sonraki ilk paragraf için ayarlar
sic adlı bir sınıfa sahip olan.
Bitişik seçiciler, dolgu miktarını bağımsız olarak ayarlamak için otomatik olarak girintilenen etiketler için kullanışlıdır. Örneğin, bir satırda etiketler varsa
ve , daha sonra aralarındaki mesafenin sadece bitişik seçiciler yardımıyla ayarlanması kolaydır. Ardışık etiketler için durum benzerdir. ve
ve
Ve ayrıca diğer benzer durumlarda. Örnek 11.3, belirtilen etiketler arasındaki girinti miktarını bu şekilde değiştirir.
Örnek 11.3. Başlıklar ve metin arasındaki girintiler
HTML5 CSS 2.1 IE Cr Op Sa Fx
Başlık 1
Başlık 2
Paragraf!
Bitişik seçiciler kullanıldığında, stil yalnızca ikinci öğeye uygulandığından, margin-top özelliği için negatif bir değer eklenerek girintilerin boyutu azaltılır. Bu durumda metin bir önceki öğeye daha yakın bir şekilde yükselir.
Kontrol edilecek sorular
1. Bu koddaki hangi etiketler bitişiktir?
Sülfürik asit formülü:H 2YANİ 4
VE
- ve
- ve
- ve
- ve
2. Aşağıdaki HTML kodu var:
Fermat'ın Son Teoremi
X n + Y n
\u003d Z n
burada n bir tamsayıdır\u003e 2
SUP + SUP (renk: kırmızı;) stili kullanılarak hangi metin kırmızıyla vurgulanır?
- İkinci "n"
- İkinci ve üçüncü "n".
İyi akşamlar sevgili meslektaşlarım, bugün sizinle iki ek çalışacağız. seçicihangilerine denir alt ve kardeş css seçicileri... Büyük ölçüde, onlarsız da yapabilirsiniz, ancak gelişiminiz için bunları öğrenmeniz ve bazen hafızanızda kalmaları için uygulamanız gerekir. Bu nedenle hangisini tartışacağız seçiciler bitişik ve hangi çocuklar var ve bir örnekle analiz edeceğiz.
Çocuk css seçicileri - ana öğenin içinde bulunan öğeler. Bunun bir örneği aşağıdaki gibi olabilir. Bir paragraf, başka bir blok ve bir resim içeren bir bloğumuz var. Bu üç unsur çocuktur. Alt blok ayrıca başka öğeler içeriyorsa, o zaman bunlar artık ilk bloğun çocukları değil, doğrudan yerleştirildikleri bloğun çocuklarıdır. Umarım anlarsın.
Bitişik CSS seçicileri - belge kodunda birbiri ardına bulunan öğeler. Bunun bir örneği. Bir etiketin ardından bir paragrafımız var açıklık... Her şey oldukça açık, ancak tüm bunları gerçek örneklerle anlamamız gerekiyor.
Paragraftaki metin
Metni yay
Artık bir paragrafta alt metin yok
Etikete aynı sonucu eklemek için stilleri kullanma açıklık
Div \u003e aralık (
yazı tipi boyutu:% 200;
}
p + aralık (
kırmızı renk;
}
Her iki durumda da kod yürütmenin sonucu etikete uygulanacaktır açıklıketiketin alt öğesi olduğu için div ve etiketten sonra p... Bu nedenle yazı tipi iki kat büyük ve kırmızı oldu. Şimdi tamamen hallettik cSS'de alt ve kardeş seçicilerve pratikte bilginizi güçlendirmeniz yeterli, yakında görüşürüz!
Komşu Seçici, belge kodunda belirtilen başka bir öğenin hemen arkasındaki bir öğeyi seçer. Örnek olarak bir parça html kodu alalım.
Paragraf ve içinde yağlı eleman ve bakın eğimli öğesi.
Üç etiket vardır:
, ve ... Etiketler ve bir kapta yuvalanmış
Onlar onun çocukları. Ancak birbirleriyle ilişkili olarak, bitişiktirler.
Bitişik seçicinin sözdizimi, önceki öğenin seçicisidir, ardından seçilen öğenin seçicisi gelir. Bitişik seçiciyi çalıştıralım:
Paragraf ve içinde yağlı eleman ve bakın eğimli öğesi.
Buraya yağlı ve altı çizili öğeler, daha fazlası eğimli.
Örnekte, ilk paragrafta kardeş seçicinin tetiklendiğini görebilirsiniz. Burada etiketler ve birbiri ardına gidin. İkinci paragrafta ise etiket aralarında kullanılıyor , şimdi iki bitişik etiket çifti daha var: + ve + .
Bu durumda bir hata etiketi olacaktır etikete bitişik
Burada etiketi etiketin alt öğesi
Ve o da ebeveyn .
Aşağıdaki örnek çalışmayacaktır:
Paragraf ve içinde yağlı eleman ve bakın eğimli öğesi.
Buraya yağlı ve altı çizili öğeler, daha fazlası eğimli.
Daha gerçek dünya örneği
Bitişik seçicinin daha gerçekçi bir örnekle nasıl çalıştığına bakalım. Birden çok etiketli bölüm içeren büyük makalelerde
, üst marjın artırılması arzu edilir (özellik marjı-üst). 30px'lik bir girinti, metni daha okunaklı hale getirecektir. Ama etiket olması durumunda hemen sonra gelir ve bu, makalenin başında olabilir, etiketinin üstündeki girinti gereksiz olacak. Bu sorunu bitişik bir öğe seçici kullanarak çözebilirsiniz.
ve bu, makalenin başında olabilir, etiketinin üstündeki girinti gereksiz olacak. Bu sorunu bitişik bir öğe seçici kullanarak çözebilirsiniz.
İşte komşu seçicinin nasıl çalıştığına dair bir örnek için html kodu.
Merhaba!
H2 başlığı
H2 başlığı
Paragrafın metni inanılmaz maceralar hakkındadır.
H2 başlığı
Paragrafın metni inanılmaz maceralar hakkındadır.
H2 başlığı
Paragrafın metni inanılmaz maceralar hakkındadır.
Ayrıca, bitişik seçici aracını kullanarak, başlık ile bölümün ilk paragrafı arasındaki girintiyi ayarlamak uygundur, bizim örneğimizde bunlar etiketlerdir