• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Kurs Mirosława Zelenta - (chyba) dziedziczenie

VPS Starter Arubacloud
+1 głos
308 wizyt
pytanie zadane 29 września 2020 w HTML i CSS przez Nabuchadonozor Gaduła (3,120 p.)
zamknięte 29 września 2020 przez Nabuchadonozor

Witam wszystkich forumowiczow,

otóż w odcinku trzecim kursu CSS'a pana Mirosława, przedstawione jest (wydaje mi się, że tak to się nazywa) dziedziczenie (rodzic > potomek), np. ol > li:hover > a{} itp. Tylko, że problem polega na tym, że w jednym punkcie jest zapis bez znacznika nierówności - ol a{}. Moje pytanie brzmi, dlaczego w tym jednym wypadku nie ma znaku nierówności, kiedy w każdym innym przypadku się go pisze? (znajduje się to wnet pod koniec kodu CSS)

index.html:

<!DOCTYPE html>
<html lang="pl">

<head>
    <title>Strona główna</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="stylesheet" href="css/fontello.css" type="text/css" />
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,700;1,300&display=swap" rel="stylesheet">
</head>

<body>
    <div class="wrapper">
        <div class="header">
            <div class="logo">
                <img src="pad.png" style="float: left;" />
                <span style="color: #c34f4f">retro</span>granie.com
                <div style="clear: both"></div>
            </div>
        </div>
        <div class="nav">
            <ol>
                <li><a href="#">Strona główna</a></li>
                <li><a href="#">Klasyki NES</a>
                    <ul>
                        <li><a href="#">Contra</a></li>
                        <li><a href="#">Mario Bros</a></li>
                        <li><a href="#">Duck Tales</a></li>
                        <li><a href="#">Legends of Zelda</a></li>
                    </ul>
                </li>
                <li><a href="#">Gry filmowe</a>
                    <ul>
                        <li><a href="#">Home Alone</a></li>
                        <li><a href="#">Dick Tracy</a></li>
                        <li><a href="#">The Simpsons</a></li>
                        <li><a href="#">Top Gun</a></li>
                    </ul>
                </li>
                <li><a href="#">Bijatyki</a>
                    <ul>
                        <li><a href="#">Mortal Kombat</a></li>
                        <li><a href="#">Nekketsu K.D</a></li>
                        <li><a href="#">Double Dragon</a></li>
                        <li><a href="#">Turtles T.</a></li>
                    </ul>
                </li>
                <li><a href="#">Gry sportowe</a>
                    <ul>
                        <li><a href="#">Goal 3</a></li>
                        <li><a href="#">Excitebike</a></li>
                        <li><a href="#">Ike Ike Hockey</a></li>
                        <li><a href="#">Tennis</a></li>
                    </ul>
                </li>
                <li><a href="#">O autorach</a></li>
            </ol>
        </div>
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies turpis ac erat viverra, id efficitur eros tristique. Morbi id metus fermentum, condimentum sem eget, venenatis libero. Donec interdum velit et risus rhoncus tempus. Sed dignissim sapien eu risus aliquam vulputate. Ut elementum odio vitae euismod rhoncus. Phasellus vel tincidunt nibh. Nulla scelerisque mattis quam vitae dignissim. Duis commodo faucibus justo, nec sodales ex cursus in. Nunc gravida lectus eget nisl venenatis venenatis. Nunc mattis ex a velit pretium tempor. Pellentesque ante purus, posuere eget nunc eu, tempor sodales mauris.
            </p>
            <p>
                Quisque interdum eu velit ac pharetra. In elementum purus magna, sit amet pellentesque felis sodales id. Aliquam eu auctor neque. Proin semper tempor metus, sit amet interdum sapien porttitor sit amet. Donec semper, nisi at dignissim fermentum, sapien velit porttitor risus, et semper augue lectus nec dui. In tempus ut nisl nec convallis. Nullam vel elit non enim cursus rhoncus. Quisque convallis lacus eu felis mollis feugiat. Donec consequat lectus augue, sed semper tortor semper ut. Vivamus ullamcorper eros non felis eleifend fermentum. Vestibulum non turpis augue. Quisque at auctor nisl.
            </p>
            <p>
                Fusce viverra, purus vel ullamcorper finibus, augue arcu pulvinar erat, a semper felis metus ac eros. Mauris consequat dictum maximus. Pellentesque sit amet interdum quam. Nam feugiat nisi at neque gravida congue. Pellentesque enim nibh, pretium et felis id, efficitur pellentesque nunc. Vestibulum scelerisque ex cursus rhoncus luctus. Vivamus vitae purus et massa mattis commodo sed eget ex. Cras vitae nulla in nunc condimentum faucibus eget et diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque in elementum dui, nec dapibus nibh. In nunc tellus, imperdiet quis tortor et, ultricies viverra neque. Aenean dignissim iaculis odio, vitae rutrum urna scelerisque sit amet.
            </p>
            <p>
                Fusce viverra, purus vel ullamcorper finibus, augue arcu pulvinar erat, a semper felis metus ac eros. Mauris consequat dictum maximus. Pellentesque sit amet interdum quam. Nam feugiat nisi at neque gravida congue. Pellentesque enim nibh, pretium et felis id, efficitur pellentesque nunc. Vestibulum scelerisque ex cursus rhoncus luctus. Vivamus vitae purus et massa mattis commodo sed eget ex. Cras vitae nulla in nunc condimentum faucibus eget et diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque in elementum dui, nec dapibus nibh. In nunc tellus, imperdiet quis tortor et, ultricies viverra neque. Aenean dignissim iaculis odio, vitae rutrum urna scelerisque sit amet.
            </p>
            <p>
                Fusce viverra, purus vel ullamcorper finibus, augue arcu pulvinar erat, a semper felis metus ac eros. Mauris consequat dictum maximus. Pellentesque sit amet interdum quam. Nam feugiat nisi at neque gravida congue. Pellentesque enim nibh, pretium et felis id, efficitur pellentesque nunc. Vestibulum scelerisque ex cursus rhoncus luctus. Vivamus vitae purus et massa mattis commodo sed eget ex. Cras vitae nulla in nunc condimentum faucibus eget et diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque in elementum dui, nec dapibus nibh. In nunc tellus, imperdiet quis tortor et, ultricies viverra neque. Aenean dignissim iaculis odio, vitae rutrum urna scelerisque sit amet.
            </p>
        </div>
        <div class="socials">
            <div class="socialdivs">
                <div class="fb">
                    <i class="icon-facebook"></i>
                </div>
                <div class="yt">
                    <i class="icon-youtube"></i>
                </div>
                <div class="tw">
                    <i class="icon-twitter"></i>
                </div>
                <div class="gplus">
                    <i class="icon-gplus"></i>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <div class="footer">
            retrogranie.com &copy; 2020 Thank you for your visit mario! But our Princess is in another castle ;-)
        </div>
    </div>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
    $(document).ready(function() {
        var NavY = $('.nav').offset().top;

        var stickyNav = function() {
            var ScrollY = $(window).scrollTop();

            if (ScrollY > NavY) {
                $('.nav').addClass('sticky');
            } else {
                $('.nav').removeClass('sticky');
            }
        };

        stickyNav();

        $(window).scroll(function() {
            stickyNav();
        });
    });
    </script>
</body>

</html>

style.css:

body{
	background-color: #303030;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	margin: 0 !important;
}

.wrapper{
	width: 100%;
}

.header{
	width: 100%;
	padding: 40px 0;
}

.logo{
	width: 450px;
	font-size: 48px;
	margin-left: auto;
	margin-right: auto;
}

.nav{
	width: 100%;
	padding: 10px 0;
	background-color: #c34f4f;
	text-align: center;
	border-top: 1px solid #751b1b;
	border-bottom: 1px solid #751b1b;
}

.content{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	padding-top: 10px;
}

.socials{
	width: 100%;
	text-align: center;
	background-color: #292929;
}

.socialdivs{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;

}

.fb{
	width: 250px;
	height: 155px;
	float: left;
}

.fb:hover{
	background-color: #4668b3;
}

.yt{
	width: 250px;
	height: 155px;
	float: left;
}

.yt:hover{
	background-color: #b94348;
}

.tw{
	width: 250px;
	height: 155px;
	float: left;
}

.tw:hover{
	background-color: #3095d3;
}

.gplus{
	width: 250px;
	height: 155px;
	float: left;
}

.gplus:hover{
	background-color: #d95333;
}

.footer{
	text-align: center;
	background-color: #222222;
	padding: 30px;
}

.sticky{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

ol{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 18px;
	height: 35px;
	line-height: 200%;
	display: inline-block;
}
TUUUUUUUUUUUUUUUUUUUUUUUUUUUUTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJ
ol a{
	color: #ffffff;
	text-decoration: none;
	display: block;
}
KONIEC TUUUUUUUUUUUUUUUUUUUUUUUUTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJ
ol > li{
	float: left;
	width: 150px;
	height: 40px;
	border-right: 1px dashed #751b1b;
}

ol > li:first-child{
	border-left: 1px dashed #751b1b;
}

ol > li:hover{
	background-color: #cf6969;
}

ol > li:hover > a{
	color: #451717;
}

ol > li > ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	display: none;
}

ol > li:hover > ul{
	display: block;
}

ol > li > ul > li{
	background-color: #cf6969;
	position: relative;
	z-index: 100;
	border-top: 1px dashed #751b1b;
}

ol > li > ul > li:hover{
	background-color: #c34f4f;
}

ol > li > ul > li:hover > a{
	color: #451717;
}

 

komentarz zamknięcia: Wyjaśnione poniżej ;)
1
komentarz 29 września 2020 przez VBService Ekspert (251,170 p.)
edycja 29 września 2020 przez VBService
komentarz 29 września 2020 przez Nabuchadonozor Gaduła (3,120 p.)
Ta ostatnia - Typy selektorów CSS nie chce mi się odpalić, a w tych innych nie mogę znaleźć informacji dlaczego przed anchor'em nie piszemy znaku nierówności :/ Ale dzięki za próbę pomocy :)
1
komentarz 29 września 2020 przez VBService Ekspert (251,170 p.)

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

 

Kombinator potomny (>) jest umieszczony między dwoma selektorami CSS. Dopasowuje tylko te elementy dopasowane przez drugi selektor, które są bezpośrednimi dziećmi elementów dopasowanych przez pierwszy.

 

Elements matched by the second selector must be the immediate children of the elements matched by the first selector. This is stricter than the descendant combinator, which matches all elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the DOM.

 

Elementy dopasowane przez drugi selektor muszą być bezpośrednimi dziećmi elementów dopasowanych przez pierwszy selektor. Jest to bardziej rygorystyczne niż kombinator podrzędny, który dopasowuje wszystkie elementy dopasowane przez drugi selektor, dla których istnieje element nadrzędny dopasowany przez pierwszy selektor, niezależnie od liczby „przeskoków” w górę DOM.

komentarz 29 września 2020 przez Nabuchadonozor Gaduła (3,120 p.)
Ten język techniczny jeszcze nie został do końca przeze mnie opanowany, bo przetłumaczyć na polski umiem, tylko nie zrozumiałem tego do póki kolega niżej na przykładzie mi tego nie pokazał :V Jeszcze raz dzięki za chęć niesienia pomocy!
komentarz 29 września 2020 przez VBService Ekspert (251,170 p.)

Ten może nieco trywialny przykład, będzie bardziej zrozumiały

<style>
pre {
  width: 50vw;
  border: 1px solid black;
}
p {
  line-height: 1em;
  margin: 0;
}

span.no-div-parent {
  background-color: white;
}


div.parent > span {
  background-color: lightblue;
  padding-left: 0.5em;
}
div.parent > span > span {
  background-color: orange;
  padding-left: 2em;
}


div.parent span.child {
  background-color: yellow;
  padding-left: 0.5em;
}
div.parent span.child span.child {
  background-color: lightgreen;
  padding-left: 2em;
}
</style>
<pre>
<div class="parent">
<p>Z użyciem: div.parent &gt; span (kolor: niebieski)</p>
<p>Z użyciem: div.parent &gt; span &gt; span (kolor: pomarańczowy)</p>
<span>Jestem spanem nr.1 mam rodzica div-a</span>
<span>Jestem spanem nr.2 mam rodzica div-a
<span>Jestem spanem nr.3 mam rodzica spana nr.2</span>
<span>Jestem spanem nr.4 mam rodzica spana nr.2</span></span>
</div>
<span class="no-div-parent">Jestem spanem nr.5 bez rodzica div</span>
</pre>
<pre>
<div class="parent">
<p>Z użyciem: div.parent span.child (kolor: żółty)</p>
<p>Z użyciem: div.parent span.child span.child (kolor: zielony)</p>
<span class="child">Jestem spanem nr.1 mam rodzica div-a</span>
<span class="child">Jestem spanem nr.2 mam rodzica div-a
<span class="child">Jestem spanem nr.3 mam rodzica spana nr.2</span>
<span class="child">Jestem spanem nr.4 mam rodzica spana nr.2</span></span>
</div>
<span class="no-div-parent">Jestem spanem nr.5 bez rodzica div</span>
</pre>

1 odpowiedź

+2 głosów
odpowiedź 29 września 2020 przez KamQiX Dyskutant (9,090 p.)
wybrane 29 września 2020 przez ScriptyChris
 
Najlepsza

Znaku większości używamy, gdy chcemy wskazać na bezpośredniego potomka rodzica. Bez znaku większości stylizujemy wszystko co jest wewnątrz rodzica.

Przykładowy HTML.

<main>
 <div></div>
 <section>
  <div></div>
 </section>
<div></div>
</main>
main > div
{
  // Te style będą dotyczyć tylko pierwszego i ostatniego diva.
}

main div
{
  // Te style będą dotyczyć wszystkich divów wewnątrz main (tego wewnątrz section też)
}

 

1
komentarz 29 września 2020 przez Nabuchadonozor Gaduła (3,120 p.)
Wielkie dzięki! Miłego ;)

Podobne pytania

–4 głosów
5 odpowiedzi 1,158 wizyt
pytanie zadane 8 września 2020 w C i C++ przez cpwioczmexubkihofq Początkujący (370 p.)
0 głosów
2 odpowiedzi 787 wizyt
pytanie zadane 1 lutego 2017 w C i C++ przez Kinio Nowicjusz (160 p.)
0 głosów
3 odpowiedzi 1,798 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...