CSS选择器篇

1. 选择器概述

要想将

CSS样式

应用于特定的

HTML元素

，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为

选择器（选择符）

。

2. 标签选择器

标签选择器

是指用

HTML标签名

作为

选择器

，按

标签名

分类，为页面中某一类标签指定统一的

CSS样式

。其基本语法格式如下：

/*标签选择器 可以把某一类标签全部选择出来 div span */标签名 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

注：

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

3. 类选择器

类选择器

使用

.

（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

/*标签调用的时候用 class=“类名” 即可*/.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

注：

类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

小技巧：

1. 长名称或词组可以使用

   -

   来为选择器命名，不建议使用

   _

   下划线来命名

   CSS选择器

   。

4. id选择器

1. W3C标准

   规定，在同一个页面内，不允许有相同名字的

   id

   对象出现，但是允许相同名字的

   class

   。

2. 类选择器（class）

   好比人的名字， 是可以多次重复使用的

3. id选择器

   好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

#id {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

5. 通配符选择器

通配符选择器

用

*

号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

6. CSS复合选择器

复合选择器

是由两个或多个

基础选择器

，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

6.1 交集选择器

交集选择器

由两个选择器构成，其中第一个为

标签选择器

，第二个为

class选择器

，两个选择器之间不能有空格。

div.app {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

7.2 并集选择器

并集选择器

（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

div,p {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

7.3 后代选择器

后代选择器

又称为

包含选择器

，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

ul li {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

注：

子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签

7.4 子元素选择器

子元素选择器

只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格

ul>li {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

8. 伪类选择器

伪类选择器

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择

第1个

，

第n个元素

。

8.1 链接伪类选择器

注意：

写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序

div:link {}.app:visited {}#id:hover {}div:active {}

9. 伪元素选择器

1. 通常用来生成并选中某个元素内部的

   第一个子元素

   或

   最后一个子元素

   ，此元素没有名字，为

   匿名元素

   ；

2. before

   生成并选中

   第一个子元素

   ，格式：

span::before{content:\"内容\"/*为内容设置属性样式...*/}

1. after

   生成并选中

   最后一个子元素

   ，格式：

span::after{content:\"内容\"/*为内容设置属性样式...*/}