美文网首页
任务7作业

任务7作业

作者: 饥人谷_醉眼天涯 | 来源:发表于2017-08-31 16:41 被阅读0次
1、class 和 id 的使用场景?

class 匹配class包含特定类的元素,
比如说页面有些元素有共同的特征。如果有个别不一样的
那么再加一个class属性。
如果是独一无二的那么我们就起名为id

2、CSS选择器常见的有几种?

1、基础选择器
2、组合选择器
3、属性选择器
4、伪类选择器
5、伪元素选择器

3、选择器的优先级是怎样的?对于复杂场景如何计算优先级?

id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 通配符选择器
对于复杂场景
行内样式 用 a表示
id选择器用 b 表示
类选择器,伪类选择器,属性选择器 用 b表示
标签选择器用 d 表示
有哪一个选择器我们就在对应的上面加1。
比如 #test p.class1 和 #test .class1.class2
这两个比较 ,首先b的值是都为1 ,那么我们就继续往下比较 明显后者的c为2 而前者的c仅为1
所以,后者的优先级高于前者。

4、a:link, a:hover, a:active, a:visited 的顺序是怎样的? 为什么?

a:link a:visited a:hover a:active
a:visited 如果写在后面的话,会把a:hover a:active 给覆盖掉

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

#header { }
选择页面中id为header的元素
.header { }
选择页面中class为header的元素
.header .logo { }
选择器class为header里面的class为logo的元素
.header.mobile { }
选择class 既为header又为mobile的元素
.header p, .header h3 { }
给 class为header下的所有p标签和所有h3标签元素 加上同样的样式
#header .nav>li { }
选择id为header下class为nav的直接子元素里li标签
#header a:hover { }
选择id为header下的链接,给其在悬停状态添加样式
#header .logo~p { }
选择id为header下,匹配class为logo之后的同级p标签。
#header input[type="text"] { }
选择id为header下input标签类型为text的元素

6、 列出你知道的伪类选择器
  • E:first-child
  • E:link
  • E:hover
  • E:visited
  • E:active
  • E:checked
  • E::selected
  • E:fist-of-type
  • E:nth-of-type(2)
  • E:enabled
  • E:disabled
  • E:focus
7、div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别

写在这里

8、运行如下代码,解析下输出样式的原因。
<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

首先.item1:first-child { color: red; }通过观察发现.item1的父元素为同一个class为ct的div元素,这个父元素下的第一个元素是p标签,同时class为item1,所以就会把aa变成红色;
之后.item1:first-of-type{ background: blue; } 首先 <p class="item1">aa</p>的父元素为class为ct的div元素,这个父元素下是p表签的只有一个,同时class也为item1
所以aa的背景色变成了蓝色。接着再看 <h3 class="item1">bb</h3>的父元素为class为ct的div元素,这个父元素下是h3标签的有两个,我们取第一h3标签,而这个h3的标签的clas正好是item1,所以bb的背景色为蓝色。最后一个<h3 class="item1">ccc</h3>的父元素同上,这个父元素下h3标签,有两个,取第一个,而这个h3的标签正好是item1,所以bb的背景色为蓝色。结果就是aa,bb的背景色为蓝色。

相关文章

  • 任务7作业

    1、class 和 id 的使用场景? class 匹配class包含特定类的元素,比如说页面有些元素有共同的特征...

  • 任务7作业

    有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如...

  • 任务四——课程作业7

    七、常见的浏览器有哪些,什么内核 7.1 截止到今年9月份,全球PC浏览器市场状况如下: 第1名:Google的C...

  • 任务7

    class和id的使用场景? class选择器:又叫做类选择器,即给多个元素添加相同样式时,使用class选择器i...

  • 任务7

    1.class 和 id 的使用场景? id选择器在文档中的是唯一的,用于定义独一无二的样式。class类选择器可...

  • 任务7

    1.class 和 id 的使用场景? class在一个html标签中可以有很多个相同的class,但是id的话一...

  • 任务7

    1.class和id的使用场景? 在css中id用"#"表示,class用"."表示,在一个html中id只能为一...

  • 任务7

    派送成功,点击这里立即开始! 友情提示:本兼职信息《已通过正规部门审核,公司正规合法,请应聘者放心应聘》 本公司兼...

  • 任务7

    class 和 id 的使用场景? id:指定标签的唯一标识,id属性的值,在当前的page页面要是唯一的。 cl...

  • 任务7

    课程任务 问答 有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪...

网友评论

      本文标题:任务7作业

      本文链接:https://www.haomeiwen.com/subject/ptnqjxtx.html