css选择器

选择器的分类：

标记选择器

ID选择器

类选择器

复合选择器

    交集选择器

    并集选择器

后代选择器

 

可以在任何选择器后面，加上属性选择。如：a[target=_blank]

 

选择器--标记选择器

<style type="text/css">

p{text-align:center;color:red;}

</style>

<p>标记选择器</p>

 

选择器--ID选择器

<style type="text/css">

#idSelect{text-align:center;color:red;}

#idSelect{text-align:center;color:blue;}

</style>

<p id="idSelect">ID选择器</p>

同样优先级的样式，后面声明的会覆盖前面的。

 

选择器--类选择器

<style type="text/css">

.classSelect{text-align:center;color:red;}

</style>

<p class="classSelect">类选择器</p>

 

选择器--复合选择器（并集选择器）

<style type="text/css">

.classSelect1,.classSelect2{text-align:center;color:red;}

</style>

<p class="classSelect1">类选择器1</p>

<p class="classSelect2">类选择器2</p>

并集选择器是多个选择器通过逗号连接而成的，并集选择器用于同时声明风格相同的样式。

 

前面四个都比较简单，详解说明下后面的选择器

选择器--复合选择器（交集选择器）

<style type="text/css">

.classSelect1{color:blue;text-align:right;font-size:50px}

.classSelect2{color:yellow;text-align:right;font-size:30px}

.classSelect1.classSelect2{text-align:center;color:red;}

</style>

<p class="classSelect1">类选择器1</p>

<p class="classSelect2">类选择器2</p>

<p class="classSelect1 classSelect2">选择器3</p>

 

交集选择器是由两个选择器直接连接构成，中间没有空格，其结果是选中二者各自元素范围的交集。

这两个选择器之间不能有空格，必须连续书写。

 

类选择器1和类选择器2将获取不到并集选择器的样式，但是选择器3既可以获得并集选择器的样式也可以获得2个类选择器的样式，并集比类选择器的样式优先级高。

选择器3可以分别得到类选择器1和类选择器2的font-size样式，同样优先级的样式，后面声明的会覆盖前面的。

 

选择器--后代选择器

<style type="text/css">

div{height:200px;background:green; color:red}

div h1{width:200px; font-size:50px}

</style>

<div>父元素

<h1>子元素</h1>

</div>

 注意：后代选择器的写法：外层的标记写在前面，内层的标记写在后面，之间用空格分隔。此h1标记就是div的后代。

父元素无法得到拥有后代选择器的样式。

子元素将拥有后代选择器的样式，并且继承父标记的样式。如h1将拥有div h1选择器的样式，和继承color:red的样式。

 

<div id=“father”>父元素

<p>子元素</p>

</div>

#father p{ width:50px; height:50px; background:bule;}

 

element element 选择器用于选取元素内部的元素。

注释：只要是内部元素就行，子元素、子子元素都有效。

 

element>element 选择器用于选取带有特定父元素的元素。

注释：如果元素不是父元素的直接子元素，则不会被选择。

 

element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。

注释：相当于第一个兄弟元素