初试CSS(二)：选择器

最新推荐文章于 2024-07-20 15:40:46 发布

平安不死街

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量182

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44344236/article/details/114987544

版权

选择器

选择器有很多，而且各个选择器之间可以混合使用，很方便。选择器后面加的{}叫声明块，在{}中放很多的css属性。按照平常使用的习惯，选择器可以分为2类——基本选择器、其他选择器。

基本选择器包括3种——标签选择器、类选择器(class选择器)、id选择器。

其他选择器包括4种——通配选择器、分组选择器、后代选择器、属性选择器、伪类选择器。

标签选择器

标签选择器就是直接将网页的某个标签标出来，让这个网页上的所有的这个标签都显示这个样式。如下方这个标签选择器，使得这个网页内所有p标签的内容，都显示为红色。

//标签选择器
<style>
    p{
    color:red;}
</style>

class选择器

class是"类"的意思，就是指类选择器，先给标签起一个名字（class=“name”），然后再

//类选择器
<style>
    .triDivTry {
    
        width: 0px;
        height: 0px;
        border-top: 200px solid #00a497;
        border-bottom: 200px solid #cc7eb1;
        border-left: 200px solid #165e83;
        border-right: 200px solid #c85179;
    }
</style>
<body>
    <div class="triDivTry"></div>
</body>

ID选择器

如果页面上某个标签具有唯一性，那么就给这个标签起一个id，id具有“唯一性”，每一个标签只能有一个id，每一个id只能对应1个标签，虽然将id像class一样使用，也是可以设置样式的，但这样！是！错！的！

<style>
    #areYouOk{
    color: green;}
</style>
<body>
    <p id="areYouOk">这个家伙用的是id</p>
</body>

通配选择器

这个选择器比较简单粗暴，只有一个标志——" * "，这个选择器里面写的属性会作用于整个网页中所有的标签，所以一般也就是在开头的时候用它调整一下margin和padding之类的——因为HTML中很多标签自带margin、padding，可以在开头直接将默认的**“间隙”**全部清除掉。

//常见操作
<style>
    *{
    
        margin

最低0.47元/天解锁文章

平安不死街

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初试CSS(二)：选择器

选择器选择器有很多，而且各个选择器之间可以混合使用，很方便。选择器后面加的{}叫声明块，在{}中放很多的css属性。按照平常使用的习惯，选择器可以分为2类——基本选择器、其他选择器。基本选择器包括3种——标签选择器、类选择器(class选择器)、id选择器。其他选择器包括4种——通配选择器、分组选择器、后代选择器、属性选择器、伪类选择器。标签选择器标签选择器就是直接将网页的某个标签标出来，让这个网页上的所有的这个标签都显示这个样式。如下方这个标签选择器，使得这个网页内所有p标
复制链接

扫一扫