css 选择器
css 选择器
一、css选择器概念
通过CSS的选择符可以指定要应用样式的某个特定HTML元素.在CSS中,执行这一任务的表现规则称为CSS选择器.
二、CSS选择器分类
CSS选择器共有10类，分别为全局选择器，标记选择器，类选择器，ID选择器，分组选择器，包含选择器，相邻选择器，子选择器，属性选择器，伪类选择器。
- 全局选择器
定义：使用全局选择器，它所定义的样式将会应用到整个页面中所有类型的单一对象上。
方法：使用一个星号（*）作为选择符，然后再定义样式。
例：
*
{
margin:0px; /*清除所有外边距*/
padding:0px; /*清除所有内边距*/
}
2.标记选择器
定义：又名类型选择器，指使用标记名称作为选择器。
方法：使用标记名称作为选择器
例：
body { font-size:12px;} /*将body标记内的所有文字大小设为了12像素*/
p { color:blue; } /*将段落内的文字颜色为蓝色*/
注：对于div,span等通用的结构标记，不建议使用类型选择器。因为类型选择器的范围广泛，使用类型选择器全相互干扰，影响效果。
3.类选择器
定义:在HTML页面中通过class属性能够实现把同样的元素进行归类，而且每个class的名称可以在页面中多次重复出现。
方法：在自定义类的名称前面加句点（.）。
例:
.Header{
color:#006; /*字体颜色*/
font-size:24px; /*字体大小*/
}
4.ID选择器
定义: 在页面中元素的ID属性指定了某个唯一元素的标识，可使用ID作为选择器来对某个选定元素定义独特的样式 。
方法：在ID名称前加一个“#”。
例：
#Header{
color:#006; /*字体颜色*/
font-size:24px; /*字体大小*/
}
类选择器与ID选择器区别：
- 类选择器可以给任意数量的标记定义样式，但ID选择器在页面的标记中只能使用一次。[ID是唯一的]
- ID选择器对指定标记应用样式比类选择器具有更高的优先级.
5.分组选择器
严格讲,分组选择器不是一种选择器,它是一种选择器的使用方法. 当多个对象元素定义了相同的样式后,可以使用分组选择器的方式,将其分成一组,以简化代码.
例: 使用类选择器.test h1，ID选择器#test h1定义属性。
.test h1, #test h1{
color:#006; /*字体颜色*/
font-size:24px; /*字体大小*/
}
6.包含选择器
设置父元素下的子元素样式。可实现跨级包含，也可以包含孙对象等。
例：
div em{ color:#006; }
<div>we are just testing<em>包含选择器</em></div>
7.相邻选择器
相邻选择器是指定元素相邻的下一个元素，用“+”来表示。
div+p {
color:#006;
font-size:24px;
}
<div>we are just tesing!</div>
<p>相邻选择器</p>
8.子选择器
子选择器也称为子对象选择器，应用于父对象下的子元素，用“>”表示。
.test>p {
color:#006;
}
<div class="test">
<p>子选择器</p>
</div>
9.属性选择器
每个HTML标记都有各自的属性，而且每个属性都具有不同的值。
属性选择器有四种形式：
- [att]:匹配所有拥有att属性的元素，与属性值无关。
例：p[title] {color:red;}
匹配有title属性的p元素，不管它的值是多少。
- [att=val]:匹配所有拥有att属性且属性值为val的元素。
例：div[class=error] {color:red;}
匹配class属性等于error的div元素。
- [att=~val]:匹配所有拥有att属性的元素，且val是其属性值由空格分隔开的一个完整单词。
例：td[headers~=coll] {color:red;}
匹配headers属性中含有coll的td元素，使用定义样式。
- [att|=val]:匹配所有拥有att属性的元素，且att的属性值由连字符组成，val处于连字符的开始。主要用于lang属性指定特定语言的情况。
例：p[lang|=en] {color:red;}
匹配lang属性值中连字符前半部分以en开始的p元素。
10.伪类选择器
一种特殊的类选择器,是能被支持CSS的浏览器自动识别的选择器.最大的作用是可以对链接的不同状态定义不同的样式效果.
a:link {color:#FF0000;}
a:visited {color: #00FF00;}
a:hover {color:#0000FF;}
a:active {color: #FF00FF;}
伪类选择器定义的样式最常应用在超链接标记<a>上，表示动态链接4种不同的状态，未访问期间的链接link，已访问链接visited，激活链接active和光标停留在链接上hover。
三、总结
其实一直都有想法去把CSS选择器的知识记录下来，奈何每次都因各种理由放弃，这次终于完成了，接下来还会去整理jQuery选择器的知识。
世上无难事，只要你已经开始迈出第一步，坚持就是胜利。
技术乐在分享，加油继续！！！
