C8、CSS选择器

C8、CSS选择器

一、标签选择器

1、格式

标签名称{
    属性：值；
}

2. 能够通过标签名选中标签

二、id选择器

1. 给标签添加id属性

2. /#来表示id选择器

3. 注意： id是留给js使用的，前端中不能随意设置

三、类选择器

1. class是可以重复滴

2. . 来表示class选择器

3. 类名专门给特定标签设置样式的

4. HTML标签中可以同时绑定多个类名

5. 可以把公共的标签抽取

四、后代选择器

1. 作用：找到所有特定的后代标签，设置属性

2. 格式：

 标签1 标签2{  //找到标签1，标签1中选中所有标签2
     属性：值；
 }
 

3. 后代可以无限向下延伸

五、子元素选择器

1. 作用：找到指定标签中所有特定的直接子元素，然后设定属性

2. 格式：

  标签名称1>标签名称2{
      属性:值;
  }

3. 注意：子元素只会查找儿子，不会查找其他嵌套的元素

六、交集选择器

1. 作用：给所有选择器选中的标签，相交的那部分添加属性

2. 格式：

选择器1选择器2{
    属性:值
}

3.注意：

1. 选择器与选择器之间没有任何连接东西

2. 选择器1与选择器2相交的地方

七、并集选择器

1. 作用：选中的

2. 格式：

选择器1,选择器2{
    属性:值
}

八、兄弟选择器

1、相邻兄弟选择器CSS2：作用：给只是指定选择器后面的那个紧跟被选中的那个设置属性（并列下方第一个）格式：

选择器1+选择器2{
    属性:值
}

2、通用兄弟选择器CSS3：作用：给所有选择器后面那个设置属性（并列下方所有）格式:

选择器1~选择器2{
    属性:值
}

九、序列选择器

1. 序列选择器：选中第几个的问题：

2. 同级别（同一级）不区分类型

        p:first-child  选择父元素的第一个某元素
        p:last-child
        p:nth-child(3)同级别第n个
        p:nth-last-child(3)同级别倒数第几个
        P:only-child :选中只有一个子元素的元素

3. 同级别 同类型：

        p:first-of-type 选择同类型的第一个某元素
        p:last-of-type 
        p:nth-of-type(3) 同级别同类型第n个
        p:nth-last-of-type(3)同级别同类型倒数第二个
        p:only-of-type选中只有一个同类型元素的

4. nth-child/nth-of-type（）的公式应用

   • odd奇数

   • even偶数

   • 可以写入an+b的公式

十、属性选择器

1. 作用：找到拥有属性的标签

2. [attribute]根据属性标签找到对应属性设置

3. [attribute=value]找到有指定属性，并且设置属性取值等于value

4. 作用：不需要写大量class属性，多用于input标签等属性多的标签

十一、其他属性选择器：

1. 属性是以什么开头的[attribute^=value] CSS3 可以找到所有开头的[attribute|=value] CSS2 只能找到-相隔的

2. 属性是以什么结尾的[attribute$=value] CSS3

3. 属性值是否包含某个值[attribute*=value] CSS3 只要包含value就能找到[attribute~=value] CSS2 只能找到独立单词

十二、通配符选择器

1. 作用：给所有标签设置属性

2. 注意：它设置所有标签，标签多的时候性能会比较差，一般不会使用通配符