css选择器

css选择器

1. 标签选择器

标签名称{

​ 属性：值

}

• 标签选择器选中的是当前界面所有标签，而不能单独选中某一个
• 标签选择器无论标签藏得多深都能选中

2. id选择器

#id名{

​ 属性：值；

}

一般情况下仅仅为了设置样式不会使用id，因为id要留给js使用

3. 类选择器

.类名{

​ 属性：值；

}

• 类名就是专门用来给css设置样式的
• 一个标签可以同时绑定多个类名，只能绑定一个id名

4. 后代选择器

选择器1 选择器2{

​ 属性：值；

}

• 先找到所有名称叫做"选择器1"的标签, 然后再在这个标签下⾯去查

  找所有名称叫做"选择器2"的标签, 然后在设置属性

• 后代选择器不仅仅是儿子，也包括孙子/重孙子

• 可以通过空格一直延续下去

5. 子元素选择器

选择器1>选择器2{

​ 属性：值；

}

• 只会查找儿子，不会查找其他被嵌套的标签
• 子元素选择器可以通过>符号一直延续下去

6. 交集选择器

选择器1选择器2{

​ 属性：值

}

• 选择器与选择器之间没有任何的连接符号

/* 先找到div标签，再找div里面类名是div1的标签*/
div.div1{
   color: red;
}

7. 并集选择器

选择器1，选择器2{

​ 属性：值；

}

8. 兄弟选择器

8.1. 相邻兄弟选择器 CSS2

选择器1+选择器2{

​ 属性：值；

}

• 只能选中紧跟其后的那个标签，不能选中被隔开的标签

8.2 通用兄弟选择器 CSS3

选择器1~选择器2{

​ 属性：值；

}

• 选中的是选择器1后面的所有标签

9. 伪类选择器

9.1 结构伪类选择器(序选择器)

1. 同级别中的第几个

   :first-child 选中同级别中的第⼀个标签

   :last-child 选中同级别中的最后⼀个标签

   :nth-child(n) 选中同级别中的第n个标签

   :nth-child(odd) 选中同级别中的所有奇数

   :nth-child(even) 选中同级别中的所有偶数

   :nth-child(xn+y) x和y是⽤户⾃定义的, ⽽n是⼀个计数器,从0开始递增

   :nth-last-child(n) 选中同级别中的倒数第n个标签

   :only-child 选中⽗元素仅有的⼀个⼦元素E。仅有⼀个子元素时生效

2. 同级别同类型中的第几个

   :first-of-type 选中同级别中同类型的第⼀个标签

   :last-of-type 选中同级别中同类型的最后⼀个标签

   :nth-of-type(n) 选中同级别中同类型的第n个标签

   :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

   :only-of-type 选中⽗元素的特定类型的唯⼀⼦元素

9.2 动态伪类选择器

:link 修改从未被访问过状态下的样式

:visited 修改被访问过的状态下的样式

:hover 修改⿏标悬停在a标签上状态下的样式

:active 修改⿏标⻓按状态下的样式

• a标签的伪类选择器如果⼀起出现, 那么有严格的顺序要求

• 默认状态:link -> 被访问状态:visited -> ⿏标悬停状态:hover -> 鼠标长按状态:active

• 如果默认状态的样式和被访问过状态的样式⼀样, 那么可以缩写

  /* 简写格式 */
  a{
  	color: green;
  }
  

9.3 否定伪类

从选中的元素中剔除某些元素

选择器 ：not（选择器）{

​ 属性：值；

}

10. 伪元素选择器

使⽤伪元素来表示元素中的⼀些特殊的位置

::after

表示元素的最后边的部分

⼀般需要结合content这个样式⼀起使⽤，

通过content可以向after的位置添加⼀些内容

::before

表示元素最前边的部分

⼀般需要结合content这个样式⼀起使⽤，

通过content可以向before的位置添加⼀些内容

::first-letter

为第⼀个字符来设置⼀个样式

::first-line

为第⼀⾏设置⼀个样式

11. 属性选择器

选择器[属性=属性值]{

​ 属性：值；

}

-属性的取值是以什么开头的

[attribute|=value] CSS2 只能找到value开头,并且value是被-和其它内容隔开的

[attribute^=value] CSS3 只要是以value开头的都可以找到, ⽆论有没有被-隔开

-属性的取值是以什么结尾的

[attribute$=value] CSS3

-属性的取值是否包含某个特定的值

[attribute~=value] CSS2 只能找到独⽴的单词, 也就是包含value,并且value是被空

格隔开的

[attribute*=value] CSS3 只要包含value就可以找到

12. 通配符选择器

*{

​ 属性：值；

}

13. 组合选择器

/* 类名为one的div选择器 */
div.one{

}