html选择器
标签选择器：直接使用html标签当作css选择器的，就是标签选择器。所有该标签都被选择器选中。
例如：
p{color: red;}
类选择器：使用标签的class属性值当作选择器，就是类选择器。所有属于该类名的标签都被选中。
（1）为标签定义class属性，使得标签有了类名。
（2）类选择器的写法： .类名{}
例如：
hello
world
这是span标签
这是h1
说明：其中，h1标签和span标签都属于s1这个类，所以他们的样式相同。
ID选择器 使用标签的id属性值当作选择器，就是id选择器。只有当前id值的元素被选中。
（1）为标签定义id属性，一般标签的id属性是唯一的
（2）id选择器的写法： #id属性值{}
例如：
hello
world
标签选择器、类选择器、id选择器的优先级
id选择器的优先级>类选择器>标签选择器
例如：
hello
world
群组选择器：将多个具有相同样式的选择器构成一个组。组中的每个选择器可以是学过的任意一种选择器，如标签选择器、id选择器、类选择器，可以是它们中两个或更多个选择器的组合。各个选择器之间使用“,”分隔。
hello
world
hello
world
、属性选择器，利用标签的某些属性作为选择器。
属性选择器分类
l 标签名[属性名]： 属于该标签，并且定义了中括号中指定的属性的页面元素，才被选中。只要该标签定义了这个属性就可以，和属性具体的值无关。
hello
world
说明：p[id] 选择那些定义了id属性的p标签
l E[attr][attr]： 可以根据多个属性进行选择，只能选中那些同时包含所列属性的元素。 只需将属性选择器链接在一起即可。
hello
world
说明：
p[id][class] 同时定义了id和class属性的p标签
l 标签名[属性名=”属性值”]：E[attr]只是选择了有对应的属性， 并没有明确指其对应的属性值”value”， 而E[attr=”value”]：是指定了属性值“value”， 从而缩小了选择 围， 更能精确选择自己需要的元素。
“=”：此处要求属性名必须完全与属性值相等。
hello
world
p[class=”red”]{
color: red;
}
因此：id选择器和类选择器是一种特殊的属性选择器。
l E[attr~=”value”]：与E[attr=”value”]不同的是， 他们两者区别就是一个有“~”号， 一个没有“~”号， E[attr=”value”]是属性值需要完全匹配才会被选中， 而E[attr~=”value”]则是属性值中只要有一个值匹配就可选中。
“~=”：此处要求属性名与指定的部分属性值相等即可。
补充：一个标签可以同时属于多个类，如下面的p标签同时属于两个类，red类和c1类
world
如果每个类都有自己的样式，那么使用类选择器选中该标签的时候，所有的样式都生效
.red{
color: red;
}
.c1{
font-size: 30px;
}
例1：两个类都生效
hello
world
例2：全等的比较。
hello
world
说明：没有元素被选中。
例3：不完全匹配的。
hello
world
说明：第2个p标签可以被选中。
伪类选择器和伪元素选择器可以为文档中非具体存在的结构指定样式，或者为某些元素（包括文档本（1）伪类选择器
身）的状态指定样式，它会根据某种条件而非文档结构应用样式。
伪类选择器
HTML标记伪类名{属性名 ：属性值；属性名 ：属性值；……}
常用的伪类如下表所示：
伪类名 描述
:link 鼠标没放上之前，并且超链接从来没有被访问过的状态。
:visited 访问过的超链接的状态
:focus 用于元素成为焦点的时候，常用于表单元素
:hover 用于鼠标在元素上，而尚未触发或点击它的时候，例如，鼠标指针可能停留在一个超链接上， :hover 就会指示这个超链接
:active 按住鼠标左键不松开的样式， 这个状态特殊短暂
第1次鼠标点击超链接时，超链接所处的状态的变化顺序
1、:link 4、:visited 2、:hover 3、:active
第2次及以后鼠标点击超链接时，超链接所处的状态的变化顺序
3、:visited 1、:hover 2、:active
伪类使用的几点说明：
- 标记上伪类的顺序应为LVHA（ :link :visited :hover :active）在CSS定义中， a:hover 必须被置于 a:link 和 a:visited 之后， 才是有效的。在 CSS 定义中， a:active 必须被置于 a:hover 之后， 才是有效的。
- 伪类的名称不区分大小写.
- :hover :active等伪元素不限于标记，也可以应用在其他元素上
- IE6只允许 :hover伪类应用到 标记上 ，只有IE8接受 :active状态。
例如：
goole
例如：
伪元素选择器
常用的伪元素如下表所示：
伪元素名 描述
:first-letter 向文本的第一个字母添加特殊样式，与块级元素关联
例如：
hello world
例如：
:first-line 向文本的首行添加特殊样式
hello world
hello world
例如：
:before 在元素之前添加内容，默认地，这个伪元素是行内元素
hello world
hello world
例如：
:after 在元素之后添加内容
hello world
hello world
例如：
input:focus{
background-color: yellow;
}
交集选择器
交集选择器由两个选择器组成，其结果是选中二者各自元素范围的交集。
两个选择器之间不能有空格，必须连续书写。
例如：
div中的段落
不在div中的段落
等价于：
p[class=”d”]{color: red;}
归纳：
选择器：
标签选择器 类选择器 id选择器 群组选择器 派生选择器（后代选择器 子元素选择器 相邻兄弟选择器） 属性选择器（标签[属性] 标签[属性][属性][属性] 标签[属性=属性值] 标签[属性~=属性值]） 伪类选择器（:link :visited :hover :active :focus） 伪元素选择器（:first-letter :first-line :before :after） 交集选择器（标签名.类名 标签名#id）
属性：
我就是我
曾经终败给现在
左手的ㄟ右手
港控/mmm°
红太狼
还没有评论，来说两句吧...