后代选择器(常用)
又称包含选择器，可以选择父元素里面的子元素
写法 外层写在前,内层写在后
<style>
/* ol>li */
ol li {
color: red;
}
/* ol>li>a */
ol li a {
color: green;
}
/* ul>li */
ul li {
color: yellow;
}
/* 使用类名区分选择 */
/* nav>li */
.nav li {
color: pink;
}
/* nav>li>a */
.nav li a {
color: purple;
}
</style>
<body>
<ol>
<li>这里是ol的li</li>
<li>这里是ol的li</li>
<li>这里是ol的li</li>
<li><a href="#">这里是ol的li的a</a> </li>
</ol>
<ul>
<li>这里是ul的li</li>
<li>这里是ul的li</li>
<li>这里是ul的li</li>
</ul>
<ul class="nav">
<li>这里是ul的li</li>
<li>这里是ul的li</li>
<li>这里是ul的li</li>
<li><a href="#">这里是ul的li</a></li>
<li><a href="#">这里是ul的li</a></li>
<li><a href="#">这里是ul的li</a></li>
<li><a href="#">这里是ul的li</a></li>
</ul>
</body>子选择器(常用)
只能选择作为某元素的最近一级子元素，选亲儿子
<style>
.nav>a {
color: red;
/* 此时只会改变儿子的颜色 */
}
</style>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p><a href="#">我是孙子</a></p>
</div>
</body>并集选择器(重要)
可以选择多种标签，同时定义相同的样式
<style>
/* 将舒克贝塔和jojo一家同时修改为红色 */
div,
p,
.jojo li {
color: red;
}
</style>
<body>
<div>舒克</div>
<p>贝塔</p>
<span>小屁孩</span>
<ul class="jojo">
<li>大乔</li>
<li>二乔</li>
<li>卖鱼强</li>
</ul>
</body>伪类选择器
向某些选择器添加特殊效果
1. 链接伪类
<style>
a {
text-decoration: none;
font-size: 300px;
}
/* 未访问黑色 */
a:link {
color: black;
}
/* 点击过黄色 */
a:visited {
color: yellow;
/* 一直是黄色清除浏览器记录 */
}
/* 鼠标悬停红色 */
a:hover {
color: red;
}
/* 点击未松鼠标紫色 */
a:active {
color: purple;
}
</style>
<body>
<a href="#">我了个去</a>
<a target="_blank" href="www.xxx.com">未知链接</a>
<!-- 第二个链接网址正确点击访问后才会变yellow -->
</body>链接伪类按照LVHA的顺序声明否则可能会没有效果
2. :focus伪类选择器
一般用于选取获得得焦点得表单元素
焦点就是光标,一般在<input>类表单元素使用