前端基础-CSS常用选择器

五、常用选择器

1.通配选择器（了解）

给所有标签添加样式，*{css样式}

在这里插入图片描述

多学一招：通常只是用来去掉所有代码的边距，因为每个浏览器的边距不同，有的8个像素，有的7个像素，所以干脆会全部去掉，重新设置，保证浏览器的每个边距都一致

2.后代选择器（掌握）

选择元素里面的元素，外层元素和内层元素中间用空格隔开：外层 内层{css样式}

在这里插入图片描述

3.子元素选择器（掌握）

选择元素的直接子元素，父和子之间用 > 隔开：父元素>子元素{css样式}

在这里插入图片描述

案例题：

<div class="nav">    <!-- 主导航栏 -->
  <ul>
    <li><a href="#">公司首页</a></li>
	<li><a href="#">公司简介</a></li>
	<li><a href="#">公司产品</a></li>
	<li>
         <a href="#">联系我们</a>
		 <ul>
		    <li><a href="#">公司邮箱</a></li>
		    <li><a href="#">公司电话</a></li>
		 </ul>
	</li>
  </ul>
</div>
<div class="sitenav">    <!-- 侧导航栏 -->
  <div class="site-l">左侧侧导航栏</div>
  <div class="site-r"><a href="#">登录</a></div>
</div>	

在不修改以上代码的前提下，完成以下任务：

1. 链接 登录 的颜色为红色,同时主导航栏里面的所有的链接改为黄绿色 (简单)
2. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等)
3. 主导航栏里面的一级菜单链接文字颜色为绿色。（难)

4.相邻元素选择器（了解）

选择相邻的元素，两个元素中间用 + 隔开：元素1 + 元素2{css样式}

在这里插入图片描述

5.伪类

元素:link 正常连接时候的状态

元素:visited 点击以后的状态

元素:hover 当鼠标移动上去的状态-------重点、常用

元素:active 当鼠标按下去时候的状态

注意：不是所有元素都支持这4种写法，超链接支持4种，工作中用的hover比较多，别的可以做个了解