任务8-CSS选择器

  • CSS选择器常见的有几种?

    1. 标签选择器
    2. id选择器
    3. class选择器
    4. 伪类选择器
    5. 组合选择器
    6. 通配符选择器
  • 选择器的优先级是怎样的?
    优先级从上到下排列。

    • !import
    • 内联样式
    • id选择器
    • 类选择器
    • 伪类选择器
    • 属性选择器
    • 标签选择器
  • class 和 id 的使用场景?
    id:布局的时候使用,用于区分大的区块
    class:书写结构样式时可以使用,相同结构的模块可以用一个class名,增加样式复用率。

  • 使用CSS选择器时为什么要划定适当的命名空间?
    提高代码可读性,也方便团队的协作和维护,避免与别人重复。让浏览器更方便的解析,避免各浏览器渲染不一致。

  • 以下选择器分别是什么意思?

#header{
/*选择id名为header的元素*/
}
.header{
/*选择class名为header的元素*/
}
.header .logo{
/*选择class名为header的元素的子元素class为logo的元素*/
}
.header.mobile{
/*选择class名为header和mobile的元素*/
}
.header p, .header h3{
/*选择class名为header下的p标签元素和class名为header下的h3标签元素*/
}
#header .nav>li{
/*选择id名为header下的class名为nav的子元素下的子元素li*/
}
#header a:hover{
/*给id名为header下的a标签元素添加鼠标悬停时的效果样式*/
}

  • 列出你知道的伪类选择器
    • E:first-child 匹配元素E的第一个子元素
    • E:link 匹配所有未被点击的链接
    • E:visited 匹配所有已被点击的链接
    • E:active 匹配鼠标已经其上按下、还没有释放的E元素
    • E:hover 匹配鼠标悬停其上的E元素
    • E:focus 匹配获得当前焦点的E元素
    • E:lang© 匹配lang属性等于c的E元素
    • E:enabled 匹配表单中可用的元素
    • E:disabled 匹配表单中禁用的元素
    • E:checked 匹配表单中被选中的radio或checkbox元素
    • E::selection 匹配用户当前选中的元素
    • E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
    • E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
    • E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
    • E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
    • E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
    • E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
    • E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
    • E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
    • E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
    • E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
    • E:empty 匹配一个不包含任何子元素的元素,文本节点也被看作子元素
    • E:not(selector) 匹配不符合当前选择器的任何元素
  • :first-child和:first-of-type的作用和区别
    first-child:匹配父元素下的第一个子元素。
    first-of-type:匹配父元素下相同类型的子元素中的第一个。
  • 运行如下代码,解析下输出样式的原因。
    first-child选中了class为item1的第一个元素字体颜色为红色。
    first-of-type选中了class为item1的并且是同一种类元素的第一个元素背景色为蓝色。
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
    作用是居中,作用在块级元素上。
  • 如果遇到一个属性想知道兼容性,在哪查看?
    http://caniuse.com/
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、CSS选择器常见的有几种? 1. 基础选择器 *:通用元素选择器,匹配页面任何元素 id选择器:选择指定id...
    小木子2016阅读 432评论 0 0
  • 1 . 常见的CSS选择器 基础选择器:通用元素选择器,匹配页面所有元素。#idid选择器,匹配特定id的元素。....
    osborne阅读 335评论 0 0
  • 2016/05/15 问答CSS选择器常见的有几种? 1.id选择器选择设置id的元素,如 #header{}2....
    嘿菠萝阅读 313评论 0 0
  • 1、CSS选择器常见的有几种? 基础选择器 eg: 效果: 组合选择器 eg: 效果: 属性选择器 eg: 效果:...
    _hello__world_阅读 382评论 0 1
  • 此刻的心情有点低落,成长有时也是低落的… 晚上没有吃饭,把唐先森昨天给我买的蛋糕,扫完了。回家路上精疲力尽,这会儿...
    小乔是唐宝娘亲阅读 164评论 0 1