css选择器

一、基础选择器

1、标签选择器

标签选择器：标签名是什么就直接写什么，其他任何符号都不要书写。

标签选择器可以选中页面上所有的同种标签。嵌套的再深的标签也能被选中。

用途：一般用于清除默认样式或者重置默认样式。

2、id选择器

id选择器是通过标签的id属性进行设置。

写法：#id属性值。（#和属性值之间不能有空格）。

id选择器只能选中具有该id名的标签或者元素。

id名的命名规则：

必须以字母开头（严格区分大小写），后面可以有数字、下划线、短横。

id名只能出现一次，即使是不同标签也不能使用相同的id名。

id选择器只能选中一个标签或者一个html元素，因为id名是唯一的。

css层叠性体现1：同一个元素可以被不同选择器选中设置不同的样式属性，这些样式属性都可以加载。

3、类选择器

类选择器是通过元素的class属性选中具有同种类名的所有元素。

写法：.class属性值（.后面紧跟属性值，不要有空格）。

class属性值的命名规则和id是一样的。

类选择器的特殊应用：原子类（公共类），我们通常会设置很多原子类，元素有什么样式直接书写该原子类的类名。原子类的属性只书写一个，便于查找。

一个元素可以有多个类名，类名之间用空格隔开。

实际工作中使用类选择器较多，可以直接给想要的一些元素统一设置相同的属性。

id上行为，class上样式。

4、通配符

*，可以选中页面上所有的元素，包括body。

通配符的用途：快速清除默认样式。

实际工作中不会使用通配符来清除默认样式。

例：

*{

margin: 0;

padding: 0;

}

二、高级选择器

高级选择器就是在基础选择器上进行延伸。

1、后代选择器

通过有嵌套关系的标签进行选择，通过标签或者类选择器确定一个大的范围，在大范围再次进行选择，可以多次选择。

写法：通过空格隔开每一层。

后代选择器不仅可以选中儿子，还可以选中孙子、曾孙子等。只要是后代都可以被选中。不管怎么选择，都必须有对应的html结构。

例：

还可以把祖先补全书写，可以精确每一层选择。例：

div p span{

font-size: 36px;

}

2、交集选择器

交集选择器写法：直接连续书写选择器，之间不要有任何空格。交集选择器可以连续交集。

例：既是p标签，又有.para类和.fs类。

我是一些段落标签

p.para.fs{

color:yellow;

}

.box.para{}      //连续类名选择器也是合法的

#box.para{}      //不合法，因为id是唯一的，可以直接被选中。

一定要区分交集选择器和后代选择器。

3、并集选择器

可以同时选中多个元素，用逗号隔开每一个选择器。

例：

p,h3,li{

color:red;

}

也可以选中类名的选择器：.box,.ps,.fs{};

只要看到选择器中有逗号的都是并集选择器。

css3新增的选择器

1、属性选择器

属性选择器：通过属性值、属性名进行选中

①通过属性值进行选中

例：

<img src="images/0.jpg"  alt="">

img[src="images/0.jpg"]{

border: 1px solid #000;

}

②开头匹配：^=

例：

a[href ^="page."]{

color:red;

}

③结尾匹配$=

例：

a[href $="1.html"]{

color:red;

}

④任意匹配*=

例：

a[href *="page"]{

color: red;

}

⑤分组匹配~=

属性值是独立的成分（比如属性值之间以空格隔开，那么被隔开的每一个都是独立的）

自定义属性：data-开头，例：

选中的是box是一个独立成分的元素。

例：

div[data-xixi ~="box"]{

color:red;

}

⑥短横匹配 |=

例

div[data-xixi |="box"]{

color:red;

}

以box开头的元素会被选中，如果还有其他元素必须以“-”连接。

⑦有属性

例：

img[alt]{

border: 1px solid #000;

}

加深理解：

①属性选择器一般是以标签开头，但是不写标签也合法。

例：

[alt]{

border-color:red;

}

②可以连续交集

例：

img[src $= "2.jpg"][alt]{

border-color:red;

}

2、儿子序选择器

①p:first-child：p是某个元素的第一个儿子

②p:last-child：p是某个元素的最后一个儿子。

③p:nth-child(n):p是某个元素的第n个儿子,序号是从1开始

④p:nth-child(an + b)选中连续多个，从b开始，每a个选中一次。

例：从第4行开始，每隔3行选中。4,7,10,13,16……

tr:nth-child(3n+4){

background: orange;

}

⑤奇数：nth-child(2n+1)

⑥偶数：nth-child(2n)

⑦p:nth-last-child(n)倒数第几个儿子。

3、儿子类型序选择器

①h3:first-of-type{}选中的h3是某个元素的第一个h3儿子

②h3:last-of-type最后一个h3儿子

③h3:nth-of-type(n)序号是从1开始

④h3:nth-of-type(2n+3)任意多个

⑤h3:nth-last-of-type(n)倒数第n个h3标签的儿子。

（注：红色是答案）

4、关系节点选择器

后代选择器

①儿子选择器：>

儿子选择器只能选中某个元素的子代，不能选中它的孙子或者曾孙子等其他后代元素。

div.box>p{

color:red;

}

②后面第一个亲兄弟 +

h3+p{

color:red;

}

③后面所有的亲兄弟 ~

h3~p{

color:red;

}