CSS层叠样式表（常用选择器）2019年1月15号作业

CSS－－层叠样式表   （对网页进行美化和装修的利器）

一、css常用选择器

1. 标签选择器 ：标签名 {样式声明}（注：每一个声明用“；”结束）

2. 层级选择器：父级标签 下级标签 {}

3. id选择器：#id值 {}

4. 类选择器：.类值 {}

5. 群组选择器：群组选择器1，群组选择器2，...群组选择器n {} （每个选择器之间用“，”分隔）

6. 相邻选择器：前选择器 + * {} （某选择器相邻的元素）如：#bg-blue + * {}

7. 兄弟选择器：前选择器 ~ * {} （和某选择器同级的所以兄弟元素）如：#bg-blue ~ * {}

8. 伪类：子元素选择器：first-child,last-child,nth-child(),nth-last-child()

   如：ul :first-child {} ,ul :last-child {}, ul :nth-child(2) {},  ul :nth-last-child(3) {}

9. 伪类：类型选择器：first-of-type,last-of-type,nth-of-type()，only-of-type {}

   如：ul li:first-of-type {}（ul里第一个li类型的元素）,ul li:last-of-type {}（ul里最后一个li类型的元素）

        ul li:nth-of-type(6) {} （ul里第6个li类型的元素） p:only-of-type {}（选择只有一个子元素且子元素为p）

   注：

   伪类中的子元素选择器与类型选择器的功能几乎是一样的,那我们应该用哪个呢? 

    这二类伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置 

    而类型选择器关注点在 "type" 关键字上,重点是元素的类型

10. 伪类：表单控件：form :enabled {}（所有活动表单控件），

    form :checked {} （表单中默认值选择器）如：form :checked + * {} （将单选按钮中的文本选中）

       form :invalid {} 如：

       /* 当在控件中输入无效值文本自动变成红色 */

        form :invalid {

        color: red;

        }    

        /* 设置控件获取到焦点时的样式 */

        form :focus {

        background-color: lightgreen;

        }

      /* 设置鼠标悬停时的样式 */

      button:hover {

      width: 56px;

       height: 28px;

       background-color: black;

       color: white;

      }