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 © 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;
}