beautify html
This commit is contained in:
Ilya Kantor
parent
ecf1478e7e
commit
5342f628da
354 changed files with 13965 additions and 9486 deletions
|
|
@ -1,76 +1,79 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<input type="text" id="message">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<input type="text" id="message">
|
||||
|
||||
<h3 id="widget-title">Сообщения:</h3>
|
||||
<ul id="messages">
|
||||
<li id="message-1">Сообщение 1</li>
|
||||
<li id="message-2">Сообщение 2</li>
|
||||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
<h3 id="widget-title">Сообщения:</h3>
|
||||
<ul id="messages">
|
||||
<li id="message-1">Сообщение 1</li>
|
||||
<li id="message-2">Сообщение 2</li>
|
||||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||||
|
||||
|
||||
<script>
|
||||
// тестовая функция для селекторов
|
||||
// проверяет, чтобы элементов по селектору selector было ровно count
|
||||
function test(selector, count) {
|
||||
var elems = document.querySelectorAll(selector);
|
||||
var ok = (elems.length == count);
|
||||
<script>
|
||||
// тестовая функция для селекторов
|
||||
// проверяет, чтобы элементов по селектору selector было ровно count
|
||||
function test(selector, count) {
|
||||
var elems = document.querySelectorAll(selector);
|
||||
var ok = (elems.length == count);
|
||||
|
||||
if (!ok) alert(selector+": " + elems.length + " != " + count);
|
||||
}
|
||||
if (!ok) alert(selector + ": " + elems.length + " != " + count);
|
||||
}
|
||||
|
||||
// ------------- селекторы --------------
|
||||
// ------------- селекторы --------------
|
||||
|
||||
// Выбрать input типа checkbox
|
||||
test('input[type="checkbox"]', 1);
|
||||
// Выбрать input типа checkbox
|
||||
test('input[type="checkbox"]', 1);
|
||||
|
||||
// Выбрать input типа checkbox, НЕ отмеченный
|
||||
test('input[type="checkbox"]:not(:checked)', 1);
|
||||
// Выбрать input типа checkbox, НЕ отмеченный
|
||||
test('input[type="checkbox"]:not(:checked)', 1);
|
||||
|
||||
// Найти все элементы с id=message или message-*
|
||||
test('[id|="message"]', 6);
|
||||
// Найти все элементы с id=message или message-*
|
||||
test('[id|="message"]', 6);
|
||||
|
||||
// Найти все элементы с id=message-*
|
||||
test('[id^="message-"]', 5);
|
||||
// Найти все элементы с id=message-*
|
||||
test('[id^="message-"]', 5);
|
||||
|
||||
// Найти все ссылки с расширением href="...zip"
|
||||
test('a[href$=".zip"]', 1);
|
||||
// Найти все ссылки с расширением href="...zip"
|
||||
test('a[href$=".zip"]', 1);
|
||||
|
||||
// Найти все элементы с data-action, содержащим delete в списке (через пробел)
|
||||
test('[data-action~="delete"]', 2);
|
||||
// Найти все элементы с data-action, содержащим delete в списке (через пробел)
|
||||
test('[data-action~="delete"]', 2);
|
||||
|
||||
// Найти все элементы, у которых ЕСТЬ атрибут data-action,
|
||||
// но он НЕ содержащит delete в списке (через пробел)
|
||||
test('[data-action]:not([data-action~="delete"])', 1);
|
||||
// Найти все элементы, у которых ЕСТЬ атрибут data-action,
|
||||
// но он НЕ содержащит delete в списке (через пробел)
|
||||
test('[data-action]:not([data-action~="delete"])', 1);
|
||||
|
||||
// Выбрать все чётные элементы списка #messages
|
||||
test('#messages li:nth-child(2n)', 3);
|
||||
// Выбрать все чётные элементы списка #messages
|
||||
test('#messages li:nth-child(2n)', 3);
|
||||
|
||||
// Выбрать один элемент сразу за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('h3#widget-title + *', 1);
|
||||
// Выбрать один элемент сразу за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('h3#widget-title + *', 1);
|
||||
|
||||
// Выбрать все ссылки, следующие за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('h3#widget-title ~ a', 2);
|
||||
// Выбрать все ссылки, следующие за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('h3#widget-title ~ a', 2);
|
||||
|
||||
// Выбрать ссылку внутри последнего элемента списка #messages
|
||||
test('#messages li:last-child a', 1);
|
||||
</script>
|
||||
// Выбрать ссылку внутри последнего элемента списка #messages
|
||||
test('#messages li:last-child a', 1);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,84 +1,87 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head><meta charset="utf-8"></head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<input type="text" id="message">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
<input type="text" id="message">
|
||||
|
||||
<h3 id="widget-title">Сообщения:</h3>
|
||||
<ul id="messages">
|
||||
<li id="message-1">Сообщение 1</li>
|
||||
<li id="message-2">Сообщение 2</li>
|
||||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
<h3 id="widget-title">Сообщения:</h3>
|
||||
<ul id="messages">
|
||||
<li id="message-1">Сообщение 1</li>
|
||||
<li id="message-2">Сообщение 2</li>
|
||||
<li id="message-3" data-action="delete">Сообщение 3</li>
|
||||
<li id="message-4" data-action="edit do-not-delete">Сообщение 4</li>
|
||||
<li id="message-5" data-action="edit delete">Сообщение 5</li>
|
||||
<li><a href="#">...</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||||
<a href="http://site.com/list.zip">Ссылка на архив</a>
|
||||
<a href="http://site.com/list.pdf">..И на PDF</a>
|
||||
|
||||
|
||||
<script>
|
||||
<script>
|
||||
/**
|
||||
* Функция test(selector, count) находит элементы по селектору
|
||||
* и сравнивает их число с count.
|
||||
*
|
||||
* Иными словами, вызовы ниже проверяют,
|
||||
* что число элементов по селектору - правильное
|
||||
**/
|
||||
test('input', 3); // далее вместо '...' вставьте правильные селекторы
|
||||
|
||||
/**
|
||||
* Функция test(selector, count) находит элементы по селектору
|
||||
* и сравнивает их число с count.
|
||||
*
|
||||
* Иными словами, вызовы ниже проверяют,
|
||||
* что число элементов по селектору - правильное
|
||||
**/
|
||||
test('input', 3); // далее вместо '...' вставьте правильные селекторы
|
||||
// Выбрать input типа checkbox
|
||||
test('...', 1);
|
||||
|
||||
// Выбрать input типа checkbox
|
||||
test('...', 1);
|
||||
// Выбрать input типа checkbox, НЕ отмеченный
|
||||
test('...', 1);
|
||||
|
||||
// Выбрать input типа checkbox, НЕ отмеченный
|
||||
test('...', 1);
|
||||
// Найти все элементы с id=message или message-*
|
||||
test('...', 6);
|
||||
|
||||
// Найти все элементы с id=message или message-*
|
||||
test('...', 6);
|
||||
// Найти все элементы с id=message-*
|
||||
test('...', 5);
|
||||
|
||||
// Найти все элементы с id=message-*
|
||||
test('...', 5);
|
||||
// Найти все ссылки с расширением href="...zip"
|
||||
test('...', 1);
|
||||
|
||||
// Найти все ссылки с расширением href="...zip"
|
||||
test('...', 1);
|
||||
// Найти все элементы с data-action, содержащим delete в списке (через пробел)
|
||||
test('...', 2);
|
||||
|
||||
// Найти все элементы с data-action, содержащим delete в списке (через пробел)
|
||||
test('...', 2);
|
||||
// Найти все элементы, у которых ЕСТЬ атрибут data-action,
|
||||
// но он НЕ содержит delete в списке (через пробел)
|
||||
test('...', 1);
|
||||
|
||||
// Найти все элементы, у которых ЕСТЬ атрибут data-action,
|
||||
// но он НЕ содержит delete в списке (через пробел)
|
||||
test('...', 1);
|
||||
// Выбрать все чётные элементы списка #messages
|
||||
test('...', 3);
|
||||
|
||||
// Выбрать все чётные элементы списка #messages
|
||||
test('...', 3);
|
||||
// Выбрать один элемент сразу за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('...', 1);
|
||||
|
||||
// Выбрать один элемент сразу за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('...', 1);
|
||||
// Выбрать все ссылки, следующие за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('...', 2);
|
||||
|
||||
// Выбрать все ссылки, следующие за заголовком h3#widget-title
|
||||
// на том же уровне вложенности
|
||||
test('...', 2);
|
||||
|
||||
// Выбрать ссылку внутри последнего элемента списка #messages
|
||||
test('...', 1);
|
||||
// Выбрать ссылку внутри последнего элемента списка #messages
|
||||
test('...', 1);
|
||||
|
||||
|
||||
function test(selector, count) {
|
||||
if (selector === '...') return;
|
||||
function test(selector, count) {
|
||||
if (selector === '...') return;
|
||||
|
||||
var elems = document.querySelectorAll(selector);
|
||||
var ok = (elems.length == count);
|
||||
var elems = document.querySelectorAll(selector);
|
||||
var ok = (elems.length == count);
|
||||
|
||||
if (!ok) alert(selector+": " + elems.length + " != " + count);
|
||||
}
|
||||
|
||||
</script>
|
||||
if (!ok) alert(selector + ": " + elems.length + " != " + count);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(n+2) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(n+2) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,28 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(odd):not(:first-child) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(odd):not(:first-child) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(odd):not(:first-child) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li:nth-child(odd):not(:first-child) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,28 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
font: 14px/1.5 Georgia, serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
Текст вверху без отступа от списка.
|
||||
<ul>
|
||||
<li>Маша</li>
|
||||
<li>Паша</li>
|
||||
<li>Даша</li>
|
||||
<li>Женя</li>
|
||||
<li>Саша</li>
|
||||
<li>Гоша</li>
|
||||
</ul>
|
||||
Текст внизу без отступа от списка.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,38 +1,40 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
|
||||
dt:nth-of-type(2n) {
|
||||
/* чётные dt (соседи с другими тегами игнорируются) */
|
||||
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
|
||||
dd:nth-last-of-type(2) {
|
||||
/* второй dd снизу */
|
||||
|
||||
color: red;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<dl>
|
||||
<dt>Первый dt</dt>
|
||||
<dd>Описание dd</dd>
|
||||
<dt>Второй dt <code>dt:nth-of-type(2n)</code></dt>
|
||||
<dd>Описание dd</dd>
|
||||
<dt>Третий dt</dt>
|
||||
<dd>Описание dd <code>dd:nth-last-of-type(2)</code></dd>
|
||||
<dt>Четвёртый dt <code>dt:nth-of-type(2n)</code></dt>
|
||||
<dd>Описание dd</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Первый dt</dt>
|
||||
<dd>Описание dd</dd>
|
||||
<dt>Второй dt <code>dt:nth-of-type(2n)</code></dt>
|
||||
<dd>Описание dd</dd>
|
||||
<dt>Третий dt</dt>
|
||||
<dd>Описание dd <code>dd:nth-last-of-type(2)</code></dd>
|
||||
<dt>Четвёртый dt <code>dt:nth-of-type(2n)</code></dt>
|
||||
<dd>Описание dd</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,32 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
|
||||
li:nth-child(2n) { /* чётные */
|
||||
li:nth-child(2n) {
|
||||
/* чётные */
|
||||
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
li:nth-child(3) { /* 3-ий потомок */
|
||||
|
||||
li:nth-child(3) {
|
||||
/* 3-ий потомок */
|
||||
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
code {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li>Древнерусский язык</li>
|
||||
<li>Древненовгородский диалект <code>li:nth-child(2n)</code></li>
|
||||
<li>Западнорусский письменный язык <code>li:nth-child(3)</code></li>
|
||||
<li>Украинский язык <code>li:nth-child(2n)</code></li>
|
||||
<li>Белорусский язык</li>
|
||||
<li>Другие языки <code>li:nth-child(2n)</code></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>Древнерусский язык</li>
|
||||
<li>Древненовгородский диалект <code>li:nth-child(2n)</code></li>
|
||||
<li>Западнорусский письменный язык <code>li:nth-child(3)</code></li>
|
||||
<li>Украинский язык <code>li:nth-child(2n)</code></li>
|
||||
<li>Белорусский язык</li>
|
||||
<li>Другие языки <code>li:nth-child(2n)</code></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,59 +1,71 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
#languages li {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
#languages > li {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#e-slavic { font-style: italic; }
|
||||
#e-slavic ~ li {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#latvian { font-style: italic; }
|
||||
|
||||
#latvian * { font-style: normal }
|
||||
#latvian + li {
|
||||
color: green;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
#languages li {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
#languages > li {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#e-slavic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#e-slavic ~ li {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#latvian {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#latvian * {
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
#latvian + li {
|
||||
color: green;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h3>Балтославянские языки</h3>
|
||||
<h3>Балтославянские языки</h3>
|
||||
|
||||
<ol id="languages">
|
||||
<li>Славянские языки
|
||||
<ol>
|
||||
<li>Славянские микроязыки</li>
|
||||
<li>Праславянский язык</li>
|
||||
<li id="e-slavic">Восточнославянские языки <code>#e-slavic</code></li>
|
||||
<li>Западнославянские языки <code>#e-slavic ~ li</code></li>
|
||||
<li>Южнославянские языки <code>#e-slavic ~ li</code></li>
|
||||
<li> ... <code>#e-slavic ~ li</code></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Балтийские языки
|
||||
<ol>
|
||||
<li>Литовский язык</li>
|
||||
<li id="latvian">Латышский язык <code>#latvian</code>
|
||||
<ol><li>Латгальский язык <code>#latvian *</code></li></ol>
|
||||
</li>
|
||||
<li>Прусский язык <code>#latvian + li </code></li>
|
||||
<li>... (следующий элемент уже не <code>#latvian + li</code>)</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
<ol id="languages">
|
||||
<li>Славянские языки
|
||||
<ol>
|
||||
<li>Славянские микроязыки</li>
|
||||
<li>Праславянский язык</li>
|
||||
<li id="e-slavic">Восточнославянские языки <code>#e-slavic</code></li>
|
||||
<li>Западнославянские языки <code>#e-slavic ~ li</code></li>
|
||||
<li>Южнославянские языки <code>#e-slavic ~ li</code></li>
|
||||
<li> ... <code>#e-slavic ~ li</code></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Балтийские языки
|
||||
<ol>
|
||||
<li>Литовский язык</li>
|
||||
<li id="latvian">Латышский язык <code>#latvian</code>
|
||||
<ol>
|
||||
<li>Латгальский язык <code>#latvian *</code></li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>Прусский язык <code>#latvian + li </code></li>
|
||||
<li>... (следующий элемент уже не <code>#latvian + li</code>)</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue