xiaoqiyan 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu
27 文章
0 评论
13968 浏览
1 当前访客
ღゝ◡╹)ノ❤️

前端学习之CSSDay14 CSS选择器与精灵图

Day14 CSS选择器与精灵图

非常用复合选择器

不建议使用

element1+element2

紧跟在element1后面的第一个element2被选择

!!!很少用

element1~element2

跟在element1后面的所有element2被选择(必须是同一个父级 )

nth-child选择器

** 不认选择器,只认父级,只去找父级的第几个儿子**

开发中就不是第一选择

CSS3选择器

父级的第几个儿子,而不是某一类的第几个

  • :first-child 第一个儿子
  • :last-child 最后一个儿子
  • :nth-child(n) 第n个儿子 也可以写公式如2n是偶数个 odd奇数 even偶数
  • :nth-last-child(n) 倒着数第几个
  • 伪类和类是一样的权重(0,0,1,0)
  • nth-of-type: 同级兄弟中,第n个该标签,找属于同一类型的标签
  • first-of-type: 同级兄弟中,第1个该标签
  • last-of-type: 同级兄弟中,最后一个该标签
  • **only-of-type: **

not 排除选择器

:not(s)里面写选择器

属性选择器

div[class^='font']{ class^=font表示font开始的位置

** **color:pink;

}

div[class='footer']{ class=footer表示footer结束位置

}

div[class='tao'] class=tao表示tao这三个字符*

最好是都加上引号

div[class='tao'] 这个值完全等于什么的时候

文本伪元素选择器

E::first-letter首字伪元素选择器

文本中的第一个单词或字

E::first-line

不会覆盖E::first-letter

文本第一行

E::selection

可改变选中文本的样式

伪类和伪元素的区别

伪类:在已有的标签结构下去修改样式

伪元素:不是一个实际的元素,但是能展现出来,默认的是inline模式

精灵图

好处:一次性就能拿到所有图片,不用多次请求

nth-child补充

伪元素before和after

content是必写的

可以用来替代一些小标签

IE9下的版本不能识别::,所以为了兼容性就只能写:

content里面用“”;


标题:Python
作者:肖祺彦
地址:url

评论
取消