CSS选择器总结

选择器的定义

定义： 实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

选择器的分类

简单选择器

标签选择器

类选择器

ID选择器

通配符选择器

复杂选择器

标签指定式选择器

后代选择器

并集选择器

标签选择器

定义：标签选择器其实就是html代码中的标签。

Html中标签: “html、body、hn、p、img”等等。

语法: html标签 {属性:值; …}

作用：将页面中对应的html标签选中，并设置样式。

类选择器

定义：类选择器，是对HTML标签中class属性进行选择。CSS类选择器的选择符是 “.“，类选择器在css样式编码中是最常用到的。

语法： .自定义类名 {属性: 值; …..}

特点：

1. 类选择器可以被多个标签同时调用

2. 一个标签可以同时调用多个类样式（一个标签可以有多个类名）

类选择器命名规范：

1. 单词和数字组合可以命名

2. 不能以纯数字或纯数字开头定义类名

3. 不推荐使用汉字定义类名

4. 不能以特殊字符或特殊字符开头定义类名（”_”除外）

ID选择器

定义：ID选择器和类选择器用法一样，区别是同一个HTML页面中不能有相同的ID名称(使用多个相同的ID选择器，浏览器不会报错但是不符合W3C标准了，所以ID选择器命名必须要唯一性)。ID选择器以 “#” 来定义。

语法： #自定义ID名称 {属性: 值; ….}

ID选择器与类选择器的区别：

1. 在页面中标签的id值必须唯一，相当于人的身份证。类选择器相当于人的姓名，可以有很多人使用同一个姓名，比如张三。

2. 在页面中一个标签只能调用一个id样式

通配符选择器

定义：通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

语法：*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

文本属性的介绍

font-size:设置字体大小

font-weight:设置文字是否加粗显示 推荐使用具体数字700

font-style:设置文字是否斜体显示，normal | italic (斜体显示)

font-family:设置文字字体

text-align:文字居中格式，center |left|right

标签指定式选择器(既…又…)

定义:标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格

语法:html标签.选择器名 {属性:值;….}

后代选择器

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

语法:选择器 选择器 {属性: 值;}

特点：

1. 后代选择器中，标签之间的关系属于嵌套关系。

2. 选择器与选择器之间必须有空格

并集选择器

定义：并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

语法： 选择器,选择器 {属性:值;…}