css常用选择器

Posted 2022-06-04 一杯清泉

一、标签选择器

<h3>哈哈哈</h3>

h3 
    color: red;

二、id选择器-不能重复

<h3 id="huohuo">嚯嚯</h3>

#huohuo 
    color: black;

三、类选择器-可以重复

1、单个class

<h3 class="haha">哈哈哈</h3>

.haha 
    color: red;

2、多个class

（1）情况一

<h3 class="aa bb">哈哈哈</h3>

.aa.bb 
   color: red;

只有class同时匹配到.aa.bb才显示红色，中间不能有空格

（2）情况二

<div class="aa">
    <h3 class="bb">喔喔</h3>
</div>

.aa .bb 
    color: red;

aa下面的bb会匹配到，中间要有空格。

四、后代选择器

<div class="aa">
    <div class="xx">
        <h3>喔喔1</h3>
    </div>
    <h3>喔喔1</h3>
    <p>喔喔2</p>
</div>

.aa h3 
    color: red;

</style>

        表示class为.aa的后代p变成红色，即喔喔1变成红色，中间使用空格，如果有多个应使用多个额空格隔开：.aa .xx h3

        后代选择器不需要选择每一个节点，只需要选择关键的几个节点就可以达到效果。

五、交集选择器

<h3 class="aa">哈哈哈1</h3>
<h3 class="aa vv">哈哈哈2</h3>

h3.aa 
    color: red; 

这样上面的两个全是红色的了，即是h3又是aa的会被选择，交集选择器没有空格。

六、并集选择器

<h3 class="aa">哈哈哈</h3>
<p>啦啦啦</p>
<h1>呜呜呜</h1>

h3,p 
   color: red;

h3和p标签都是红色。

七、通配符

* 
   color: red;


<h3 class="aa">哈哈哈</h3>
<p>啦啦啦</p>
<h1>呜呜呜</h1>

匹配到所有的数据，都红了，效率比较低，不能使用。

八、儿子选择器

IE7兼容，IE6不兼容。

<div>
    <p>111</p>
    <div>
        <p>222</p>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>
</div>


div > p 
    color: red;

1，2不变，不是div的儿子，111，222变红，是他的儿子，注意和后代选择器不同。

九、序选择器

IE8开始兼容

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

1、选择第一个

ul li:first-child  
    color: red;

第一个li元素变红其他不变。

2、选择最后一个

ul li:last-child  
    color: red;

最后一个变成红色。

3、选择任意一个

ul li:nth-child(3)  
    color: red;

第三个变成红色。

ul li:nth-child(2n+1)  
    color: red;

奇数变红。

兼容的解决方案：自己写类名，使用类选择器

十、下一个兄弟选择器

IE7开始兼容，IE6不兼容

<h3>1</h3>
<p>2</p>
<p>3</p>
<p>4</p>

h3 + p 
    color: red;

选择的时候h3后面紧跟着的兄弟