11月11日

学习笔记 # 2016年11月11日

今日主要内容

• 讲述了CSS（层叠样式表/级联样式表）是什么
• 讲述了多种选择器，包括通配选择器，标签/标记/元素选择器，id选择器，class、类选择器，属性选择器，伪类选择器，伪元素选择器，后代和子集选择器以及并级选择器
• 讲述了内嵌、id、class类、元素、通配符以及!important之间的权重关系

今日新增选择器

• *{ }–通配符、通配选择器

• p（元素）{ }–标签/标记/元素选择器

  p{color:red; font-family:”微软雅黑”,”Microsoft Yahei”,”黑体”;background-color:yellow;}
  表示p标签里的字体为红色，字体为微软雅黑（逗号表示并列，分号为这段结束），背景颜色为黄色。

• testid(id名){ }–id选择器

• .testclass(claa、类名){ }–class、类选择器
• input[type=”text”]{ }–属性选择器（方括号里表示属性和值）

• 伪类选择器包括：

  a:link{ }–链接未被访问
  a:visited{ }–链接访问后
  a:hover{ }–鼠标移入时
  a:active{ }–鼠标点击时

• 伪元素选择器：(伪元素选择器一个冒号与两个冒号没区别）

  a:before{ }–在a标签前面添加文本
  a:after{ }–在a标签后面添加文本
  .box:first-letter{ }–改变第一个字
  .box:first-line{ }–改变第一行
  ul li:nth-child(第几个）{ }–表示改变ul下的第几个li改变
  ul li:nth-last-child(第几个）{ }–表示改变ul下的倒数第几个li改变
  ul li:nth-child(odd){ }–改变第奇数个
  ul li:nth-child(even){ }–改变第偶数个
  ul li:nth-child(3n+2){ }–函数，n从零开始，只能是n

• p span{ }–后代选择器

• p>spen{ }–子集选择器

• h1,h2,h3,h4,h5,h6{ }–并集选择器

• ！important>内嵌>id>class>元素>通配符