前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端基础-CSS常用选择器

前端基础-CSS常用选择器

作者头像
cwl_java
发布2020-04-07 15:23:54
5740
发布2020-04-07 15:23:54
举报
文章被收录于专栏:cwl_Java

五、常用选择器

1.通配选择器(了解)

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

示意图

在这里插入图片描述
在这里插入图片描述

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

2.后代选择器(掌握)

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

示意图

在这里插入图片描述
在这里插入图片描述

3.子元素选择器(掌握)

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

示意图

在这里插入图片描述
在这里插入图片描述

案例题:

代码语言:javascript
复制
<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比较多,别的可以做个了解

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 五、常用选择器
    • 1.通配选择器(了解)
      • 2.后代选择器(掌握)
        • 3.子元素选择器(掌握)
          • 4.相邻元素选择器(了解)
            • 5.伪类
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档