HTML, CSS - listy wewnatrz list

pytanie zadane 9 października 2016 w HTML i CSS przez cuba04 Nowicjusz (120 p.)

Witam,

uczę się HTMLa i CSSa z kursów Mirosława na youtube. Problem pojawił się w odc. 4 gdy dochodzimy do list ol/ul. Lista wewnątrz listy nie zmienia formatu/stylu co powinno nastąpić w podanym niżej kodzie:

ol > li > ul > li 
{
	font-size: 16px;
	margin-top: 5px;
	padding: 2px;
	margin-left: 10px;
	list-style-type: disc;
}

ol > li > ul > li:before
{
	color: #485b3b;
}

zapis wyżej w ogóle nie działa odkąd wprowadziłem znaki ">". Jeśli usunę pierwszą listę to działa tylko pierwsza część, czyli zmiana koloru nie nastépuje:


ul > li 
{
    font-size: 16px;
    margin-top: 5px;
    padding: 2px;
    margin-left: 10px;
    list-style-type: disc;
}

ul > li:before
{
    color: #485b3b;
}

Bede wdzieczny za pomoc. Aha, zaznaczę, że w HTML powyższe listy są skonfigurowane poprawnie (tak myślę przynajmniej, bo na stronie działają jak należy).

pozdrawiam

kuba

komentarz 9 października 2016 przez ciemna_strona_klamki Gaduła (4,360 p.)

Wypadałoby jednak zapodać HTML bo a nuż...

komentarz 9 października 2016 przez Czort Nałogowiec (32,500 p.)

Poza tym css też jest niepełny, albo niepoprawnie użyte pseudoelementy.

komentarz 9 października 2016 przez cuba04 Nowicjusz (120 p.)

Wklejam CSS i HTML tak jak jest oryginalnie, zaraz spróbuję z klasami. Wiem, że należy kombinować, ale póki co stawiam pierwsze kroki i staram się uczyć poprawnego kodowania. Dlatego bardziej naśladuję to co Mirosław pokazuje w video (ok min 50) i zastanawiam się czemu u mnie nie działa:

https://www.youtube.com/watch?v=-5Tn5CYPT5k

dla mnie to wygląda jakby cały zbiór ul > li > ol > li nie był z jakiegoś powodu rozpoznawalny (przez chrome?)

body
{
	background-image: url("img/tlo.jpg");
	color: #ffffff;
	margin: 0px;
	font-family:'Open Sans';
	font-size: 20px;
}
#logo
{
	width: 100%;
	height: 50px;
	background-color: #485b3b;
	text-align: center;
	font-size: 36px;
	text-transform: uppercase;
	padding: 5px 0px 5px 0px;
	letter-spacing: 3px;
	border-bottom: 2px solid #33402a;
	text-shadow:
	2px 2px 0 #33402a, 
	-2px 2px 0 #33402a,
	-2px -2px 0 #33402a,
	2px -2px 0 #33402a;
}
#container
{
	width: 878px;
	align: center;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	padding: 10px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	color: #303030;
}
#spis
{
	width: 850px;
	align: center;
	padding-left: 30px;
	text-transform: uppercase;
	font-weight: 700;
}
ol
{
	margin-top: 5px;
	text-transform: none;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: none;
}
ol > li > ul > li 
{
	font-size: 16px;
	margin-top: 5px;
	padding: 2px;
	margin-left: 10px;
	list-style-type: disc;
}

ol > li > ul > li:before
{
	color: #485b3b;
}

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title> Sterling crisis 1967</title>
	<meta name="description" content="The reason of sterling crash in 1967" />
	<meta name="keywords" content="Sterling, pound, crash, monetary crisis, 1967, united kingdom" />

	<link rel="stylesheet" href="sterling.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	
</head>

<body>
	
	<div id="logo"> Sterling crisis 1967
	</div>
	<div id="container"> 
		<div id="spis"> Table of content
			<ol>
				<li> Introduction </li>
				<li> Chronology of sterling crises </li>
				<li> Tests of sterling's credibility </li>
				<li> Reserves </li>
				<li> Expected rate of realignment, reserve changes and reaction functions </li>
					<ul class="podpunkty"> 
						<li> Reserve changes and the expected rate of realignment </li>
						<li> Reaction functions </li>
					</ul>
				<li> Conclusion </li>
			</ol>
		</div>
		<div class="slajd" > s1</div>
		<div class="slajd" > s1</div>
		<div class="slajd" > s1</div>
		<div class="slajd" > s1</div>
		<div class="slajd" > s1</div>
		<div class="slajd" > s1</div>
		<div class="slajd" > s1</div>
	</div>
	<div id="footer">
	</div>
</body>

</html>