2020-11-09

##CSS选择器

1. 子代选择器
   ——子代，什么是子代，就是一个父亲的孩子例如<div> <p> </p> <p> </p></div>
   这个p就是div的子代，div就是p的子代，子代可以一个也可以多个。

2. 后代选择器
   ——利用前边子代选择器来看后代选择器，那就是<div><ul><li></ul></ul></div>
   这个CSS代码里的li就是div的后代，ul是div的子级元素。

3. 交集选择器
   ——满足条件1，又满足条件2。
   当两种或两种以上的选择器同时存在一个标签上时，这种情况就叫做交集选择器。
   选择器1选择器2{ 声明；}
   标签选择器与标签选择器 ×
   ID选择器与ID选择器 ×
   类选择器与类选择器 √
   标签选择器与类选择器 √
   标签选择器一定要写在类选择器的前面。
   交集选择器是可以连续交集的。
   兼容性问题：IE7以下的IE浏览器不支持连续交集。

4. 并集选择器
   ——并集选择器的 格式：选择器1，选择器2{声明； }
   当有多个选择器，使用相同的样式，这个时候我们就可以使用并集选择器。

5. 伪类选择器
   —— 伪类：同一个标签，根据不同的状态，拥有不同的样式。
   选择器：伪类名{声明；}
   静态伪类：只能用于超链接
   ：link 超链接点击之前。
   ：visited 超链接访问之后。
   动态伪类：针对所有的标签都适用。
   ：hover 鼠标放在标签上。
   ：active 鼠标点击标签时。鼠标不松手，松手样式就没了。
   ：focus 标签获得焦点（输入框）。

a标签书写顺序 link visited hover active lvha 顺序。
爱恨准则：love hate

a{}和a:link{}之间的区别：
1.a{}定义的样式作用于所有的超链接（包括锚点）
2.a：link{}定义的样式作用于非锚点的超链接。

6. 序选择器
   —— 序选择器：按照顺序来进行选择。
   对于父标签来说，它如果是第一个子元素，就会被选中。
   选择器：first-child 第一个 last-child 最后一个

   IE8开始兼容。 IE7.6不可以使用。
   选中ul中第一个li列表

   .class .class:last-child{ color: red; }
   对于父标签来说，它如果是第一个子元素，就会被选中。
   选择器div p选择器 first-child 选择器

7. 下一个兄弟选择器
   ——表示下一个兄弟
   格式：选择器1+选择器2{声明； }
   选择器1选中的标签后面紧挨着的必须是选择器2选中的标签才可以被选中。

兼容问题：IE7开始兼容。
8. 表单
——作用：搜集不同类型的用户输入信息。
表单：就是网页上可以给用户提供输入和选择的一些控件。

表单元素：
元素：在html中，从开始标签到结束标签中所有的代码。

内容

表单元素：不同类型的ipnut元素（文本框，输入框）复选框 ，单选按钮，文本域等。

格式：

表单元素。

action：表单把数据提交到哪里。一个路径。

input 会根据type的值不同会在网页中显示为不同的控件。

type：
text 输入框 value 会生成默认的值。
password 密码框

radio 单选按钮  
如果不设置name属性，浏览器就不知道哪些单选按钮是一组，就无法完成单选效果。
给同一组单选按钮设置一致的name属性值，才会有单选效果。

name:当form提交的时候，有name属性的表单元素，value值会被传输到form提交的地址。

10. 继承
    .—— 有一些属性给祖先元素设置后，其后代元素会自动继承该样式，这就叫做继承。

文本样式会被后代元素继承。 color,text-开头，line-开头，font-开头。
盒子，定位，背景，浮动。这些不会被继承。

12. important
    —— important 作用：将当前属性的权重提高到无穷大。
    继承过来的important属性的权重是0.
    错误写法：
    color: blue ;!important
    color: blue important;

    慎用。
    如果使用不当，页面样式会崩溃。

13. test
    ——E n
    E的父元素的第n个子元素如果是e，则会被选中。

选择器：nth-child(){       }
n:0-,1,2....
*/
/* li:nth-child(2n+1){
  color: red;
} */
.demo span:first-of-type {
  color: #f00;
}

15. 层叠
    ——多个选择器都选中了同一个标签，而且都设置了相同的属性样式的时候。
    —权重问题。

权重的计算：数基础选择器的数量。
id选择器>类选择器>标签选择器
继承来的样式，权重为0.
先数ID选择器的数量，再数类选择器的数量，标签选择器的数量。

权重一样的时候，写在后面的会覆盖前面的。
行内式>内嵌式+外链式（就近原则）

如果没有选择器选中元素，它会去继承父类的样式。

多个类名都设置了冲突的样式时，跟class属性值的顺序无关，跟样式表的先后顺序有关。

并集选择器：分开计算权重。