< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> 复合选择器 后代选择器< / title>
< style>
ol li {
color: pink;
}
ol li a {
color: red;
}
< / style>
< / head>
< body>
< ol>
< li> 我是ol 的孩子< / li>
< li> 我是ol 的孩子< / li>
< li> 我是ol 的孩子< / li>
< li> < a href= "#" > 我是孙子< / a> < / li>
< / ol>
< ul>
< li> 我是ul 的孩子< / li>
< li> 我是ul 的孩子< / li>
< li> 我是ul 的孩子< / li>
< / ul>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> 复合选择器 子元素选择器< / title>
< style>
. nav > a {
color: red;
}
< / style>
< / head>
< body>
< div class = "nav" >
< a href= "#" > 我是儿子< / a>
< p>
< a href= "#" > 我是孙子< / a>
< / p>
< / div>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> 复合选择器 并集选择器< / title>
< style>
div,
p,
. pig li {
color: pink;
}
< / style>
< / head>
< body>
< div> 熊大< / div>
< p> 熊二< / p>
< span> 光头强< / span>
< ul class = "pig" >
< li> 小猪佩奇< / li>
< li> 猪爸爸< / li>
< li> 猪妈妈< / li>
< / ul>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> 链接伪类选择器< / title>
< style>
a: link {
color: #333333 ;
text- decoration: none;
}
a: visited {
color: orange;
}
a: hover {
color: skyblue;
}
a: active {
color: green;
}
< / style>
< / head>
< body>
< a href= "#" > 小猪佩奇< / a>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> :focus 伪类选择器< / title>
< style>
input: focus {
background- color: pink;
}
< / style>
< / head>
< body>
< input type= "text" >
< input type= "text" >
< input type= "text" >
< input type= "text" >
< / body>
< / html>