【CSS3】常用的选择器

1.交集选择器(紧挨着)

交集选择器是由两个选择器直接连接构成的，其中第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，这两个选择器之间不能有空格，必须连续书写

p.txt{
    color:blue;
}

<p>恰是一江<span class="txt">春水1span>向东流p>    
<span class="txt">春水2span>    
<p class="txt">春水3p>    

2.并集选择器(’,'相连)

并集选择器是“，”相连，所选中的都会有同样的样式

h1,h2,h3,h4,h5,h6,.txt{
    color: red;
}

<h1>标题一h1>
<h2>标题二h2>
<h3>标题三h3>
<h4>标题四h4>
<h5>标题五h5>
<h6>标题六h6>
<div>
    <span class="txt">内容区域span>
div>

3.兄弟选择器(’+'相连)

兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

p + span{
    color: steelblue;
}

<p>p 标签p>    
<span>span 标签span>    
<p>p 标签p>    
<span>span 标签span>    
<br>
<span>span 标签span>    
<p>p 标签p>    

4.子元素选择器(’>'相连)

子元素选择器只能选择作为某元素子元素的元素。

h1 > b {
    color:red;
}

<h1>This <b>isb> <b>veryb> importanth1>
<h1>This <u>is <b>veryb>u> importanth1>

5.后代选择器(空格)

后代选择器又称包含选择器，后代选择器可以选择作为某元素后代的元素。

div span h1 {
    color: red;
}

<div>
    <span>我是span标签
        <h1>我是标题1h1>
    span>
    <h1>我是标题一h1>
div>

6.通配符选择器(’*’ 号)

通配符选择器就是一个星号，可以选中页面中的所有元素，但是其优先级是最低的
*{ }

7.标签选择器(标签名)

标签选择器就是写标签名，就可以选择到对应的元素，优先级仅高于通配符选择器。
例如：div{ }    p{ }

8.类选择器(’.’ 小圆点)

类选择器就是英文的小圆点+标签中的class属性值，优先级仅次与id选择器。
例如：box{ }    name{ }

9.id选择器(’#’ 井号)

id选择器就是#+标签中的id的属性值，其优先级是最高的。
例如：#sex{ }    #bar{ }