CSS的选择器

选择器

标签选择器、id选择器、类选择器、后代选择器、子元素选择器、交集选择器、并集选择器、兄弟选择器、伪类选择器、序选择器、动态伪类选择器、a标签的动态伪类选择器、否定伪类选择器、伪元素选择器、属性选择器、通配符选择器、组合选择器

一、标签选择器

作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

格式：

标签名称{ 
    属性:值; 
}

【注意】：

• 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
• 标签选择器无论标签藏得多深都能选中
• 只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

二、id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性

格式:

#id名称{ 
    属性:值; 
} 

【注意】：

• 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
• 在同一个界面中id的名称是不可以重复的
• 在编写id选择器时一定要在id名称前面加上#
• id的名称是有一定的规范的
  1. id的名称只能由字母/数字/下划线，a-z 0-9 _
  2. id名称不能以数字开头
  3. id名称不能是HTML标签的名称，不能是a h1 img input ...
  4. 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的

三、类选择器

作用: 根据指定的类名称找到对应的标签, 然后设置属性

格式:

.类名{ 
    属性:值; 
}

【注意】

• 每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
• 在同一个界面中class的名称是可以重复的
• 在编写class选择器时一定要在class名称前面加上.
• 类名的命名规范和id名称的命名规范一样
• 类名就是专门用来给CSS设置样式的
• 在HTML中每个标签可以同时绑定多个类名 ，格式:<标签名称 class="类名1 类名2 ...">

id和class的区别?

• id相当于人的身份证不可以重复
• class相当于人的名称可以重复
• 一个HTML标签只能绑定一个id名称
• 一个HTML标签可以绑定多个class名称

id选择器和class选择器区别?

• id选择器是以#开头
• class选择器是以.开头

四、后代选择器

作用: 找到指定标签的所有特定的后代标签, 设置属性 格式:

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

先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性

【注意】：

• 后代选择器必须用空格隔开
• 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
• 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
• 后代选择器可以通过空格一直延续下去

五、子元素选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性 格式:

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

【注意】：

• 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
• 子元素选择器之间需要用>符号连接, 并且不能有空格
• 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
• 子元素选择器可以通过>符号一直延续下去

后代选择器和子元素选择器之间的区别?

• 后代选择器使用空格作为连接符号
• 子元素选择器使用>作为连接符号
• 后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标 签中的特 定标签都会被选中
• 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

后代选择器和子元素选择器之间的共同点

• 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
• 后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去 ，选择器1>选择器2>选择器3>选择器4{}

在企业开发中如何选择

• 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
• 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

六、交集选择器

作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性 ​ 格式: ​ 选择器1选择器2{ ​ 属性: 值; ​ } ​ 注意点: ​ 1.选择器和选择器之间没有任何的连接符号 ​ 2.选择器可以使用标签名称/id名称/class名称 ​ 3.交集选择器仅仅作为了解, 企业开发中用的并不多

七、并集选择器

作用: 给所有选择器选中的标签设置属性 格式:

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

【注意】：

• 并集选择器必须使用,来连接
• 选择器可以使用标签名称/id名称/class名称

八、兄弟选择器

1.相邻兄弟选择器 CSS2

作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性 格式:

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

【注意】：

• 相邻兄弟选择器必须通过+连接
• 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

2.通用兄弟选择器 CSS3

作用: 给指定选择器后面的所有选择器选中的所有标签设置属性 格式:

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

【注意】：

• 通用兄弟选择器必须用~连接
• 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

九、伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中

十、序选择器（结构伪类选择器）

CSS3中新增的选择器最具代表性的就是序选择器

1.同级别中的第几个

:first-child        选中同级别中的第一个标签 
:last-child         选中同级别中的最后一个标签 
:nth-child(n)       选中同级别中的第n个标签 
:nth-child(odd)     选中同级别中的所有奇数 
:nth-child(even)    选中同级别中的所有偶数 
:nth-child(xn+y)    x和y是用户自定义的, 而n是一个计数器, 从0开始递增，例如(3n+1)分别对应1,4,7..... 
: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        选中父元素的特定类型的唯一子元素

十一、动态伪类选择器

E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 
E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 
E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上 E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持 a:hover

十二、a标签的伪类选择器

通过我们的观察发现a标签存在一定的状态

1. 默认状态, 从未被访问过
2. 被访问过的状态
3. 鼠标长按状态
4. 鼠标悬停在a标签上状态 格式

:link      修改从未被访问过状态下的样式 
:visited   修改被访问过的状态下的样式 
:hover     修改鼠标悬停在a标签上状态下的样式 
:active    修改鼠标长按状态下的样式 

【注意】：

1. a标签的伪类选择器可以单独出现也可以一起出现
2. a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
3. 默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active ，编写的顺序必须要遵守爱恨原则 love hate
4. 如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写

/* 简写格式 */
a{
    color: green;
}
/* link:和 :visited样式一样，可以写成以上的简写格式，代码量减少，开发效率提高*/
/*a:link{*/
    /*color: green;*/
/*}*/
/*a:visited{*/
    /*color: green;*/
/*}*/

十三、否定伪类选择器

作用：可以从已选中的元素中剔除出某些元素

格式：:not(选择器)

例如：

p:not(.hello){ 
    background-color: red; 
 }

十四、伪元素选择器

作用：使用伪元素来表示元素中的一些特殊的位置

::after    表示元素的最后边的部分 ，一般需要结合content这个样式一起使用，通过content可以向after的位置添加一些内容 
::before   表示元素最前边的部分，一般需要结合content这个样式一起使用，通过content可以向before的位置添加一些内容 
::first-letter    为第一个字符来设置一个样式 
::first-line      为第一行设置一个样式

十五、属性选择器

作用: 根据指定的属性名称找到对应的标签, 然后设置属性 格式: [attribute]，[attribute=value] 作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性，最常见的应用场景, 就是用于区分input属性

input[type=password]{}
input[name^=user]{}
<input type="text" name="user" id="">
<input type="password" name="" id="">

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

• [attribute|=value] CSS2
• [attribute^=value] CSS3

两者之间的区别:

• CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
• CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

十六、通配符选择器

作用: 给当前界面上所有的标签设置属性，清除html自带的样式 格式:

*{ 
    属性:值; 
  }

【注意】：由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上 的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

十七、组合选择器

作用：多个选择器组合使用。例如 "div.one" 表示class为one的div元素