CSS选择器

CSS选择器

1、通配符选择器

2、标签选择器

3、类选择器

4、id选择器

5、复合选择器

 

1、通配符选择器

就一个*号，代表所有的意思。

* {

}

2、标签选择器

只能选择已有的标签，不是标签不能用，例如：

h4 {
text-align: center;
}
span {
font-size: 100px;
}

3、类选择器

/*类选择器，这里是声明，需要可以直接调用，即把class="jk"放到需要的标签内*/

.jk {
font-size: 200px;
}

.g {
color: blue;
}

<!--有多个类就空格放进去即可-->

<span class="g jk">G</span>

4、id选择器

/*这是id选择器，规范id只能使用一次，虽然使多次用了也不会报错，但规定id是唯一的。在css中很少用，一般id用于js*/

#last {
font-size: 100px;
}

<!--id和class可以共存-->

<h4 id="last" class="O1">你好啊</h4>

5、复合选择器

<1>后代选择器（用得比较广）

div p {
    color: yellow;
}

<div>
    <p>王者荣耀</p>
    <p>王者荣耀</p>
</div>

或者

.wang p {
    text-decoration: line-through;
}

<div class="wang">
    <p>王者荣耀</p>
    <p>王者荣耀</p>
</div>

<2>子代选择器（用得比较少）

ul li > a {
    text-decoration: underline;
}

<ul>
    <li>
        <a>子代选择器</a>
        <a>子代选择器</a>
        <div>
            <a>孙子选择器</a>
            <a>孙子选择器</a>
        </div>
    </li>
</ul>
</body>

这样的结果只会影响子代选择器

如果不要>号则所有的a标签都会受到影响

 ul li  a {
            text-decoration: underline;
        }

其写法就是把外层标签写在外面，内层标签写在里面，中间用空格分开，当标签内嵌时，内层标签就成了外层标签的后代
<3>交集选择器

   div.red {     /*交集选择器 固定死了只有div能用red这个类，别人用都是无效的。用得很少，特殊情况才用的*/
            color: blue;
        }

<div class="red">
    <p >王者荣耀</p>
    <p>王者荣耀</p>
</div>

<4>并集选择器

 div,p,h2,a{           /*并集选择器，标签连写，用逗号隔开*/
            color: green;
        }

<h2>你好哈哈哈哈哈哈哈哈哈哈</h2>
<h3>或或或或或或或或或或或或</h3>
<div>美杜莎女王</div>
<p>王者荣耀</p>
<a href="#">链接</a>

或者

.pp,.jj{
    color: deeppink;
}

<div class="pp">
    <p>美杜莎女王</p>
    <p>爱丽丝莎女王</p>
</div>
<span class="jj">
    <p>雅典娜女神</p>
</span>