CSS基础-选择器

CSS选择器

前言

在前面初识CSS的时候，我们接触到了CSS的语法选择器。我们可以通过选择器找到html标签，并对其设置样式，从而达到美化的效果。

这一节，主要学习选择器的结构和CSS代码编写规则。

目标：了解每一种选择器的作用，并注意选择器的使用规则和场合。

1、标签选择器

结构：标签名 {css属性名：属性值;}

作用：通过标签名，找到页面中所有这一类标签，设置样式

注意点：

• 标签选择器选择的是一类标签，而不是单独某一个
• 标签选择器无论嵌套关系有多深，都能找到对应的标签

案例:

<style>
    p{
        color:red;
    }
</style>

通过上面的样式设置，我们可以把网页中所有p标签的内容的字体设置为红色。

但是，标签选择器也有它的缺陷，那就是通过他的标签名找到对应的标签。例如，当一个网页中有很多p标签，它就会给所有p标签加上样式，尽管我们只是想给几个p标签加上这个样式。

那我们要怎么解决这个问题？

可以利用 “类选择器”等等。

2、 类选择器

结构：.类名

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

• 所有标签上有class属性，class属性的属性值为类名(类似于名字)
• 类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
• 一个标签可以同时有多个类名，类名之间以空格隔开
• 类名可以重复，一个类选择器可以同时选中多个标签

2.1 创建一个类选择器

<!-- 样式 -->
<style>
 .content {
            font-size: 20px;
            color: orange;
        }
</style>

<!-- 给标签设置class属性 -->
<p class="content">
    这里是p标签，类名为content。
    你可以通过.content{}的方式给我设置样式
</p>

效果如下：

2.2 给标签设置多个类名

样式:

  		.fontsize {
            font-size: 30px;
        }
        
        .color {
            color: #fff;
        }
        
        .bgc {
            background-color: orange;
        }

html页面:

 <!-- 给标签设置多个class -->
    <div class="fontsize color bgc">
        这里是div标签， <br>你可以通过.fontsize给我设置字体大小
        <br>通过.color修改字体颜色
        <br>通过.bgc设置div背景色
    </div>

效果如下：

2.3 给多个标签设置样式

css样式:

 	.item {
            font-family: 'Trebuchet MS';
            font-size: 20px;
            color: greenyellow;
        }

html代码:

   <!-- 给多个标签设置样式 -->
    <ul>
        <li class="item">榴莲</li>
        <li class="item">香蕉</li>
        <li class="item">苹果</li>
        <li class="item">哈密瓜</li>
        <li class="item">火龙果</li>
    </ul>

效果如下：

3、id选择器

结构：#id属性值

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

• 所有标签上都有id属性
• id属性值类似于身份证号码，在一个页面上是唯一的，不可以重复的！
• 一个标签上只能有一个id属性值
• 一个id选择器只能选中一个标签

3.1 id选择器的使用

css样式:

#h {
    color: red;
}

html代码:

 <h4 id="h">我们在学习css！</h4>

效果：

3.2 为什么一个页面上的id值，只能有一个

这里我们用一个案例来测试一下：

#h {
    color: red;
}

    <h4 id="h">我们在学习css！</h4>
    <h5 id="h">我们在学习css！</h5>
    <h6 id="h">我们在学习css！</h6>

效果：

这里问题出来了，不是说一个页面上只能有一个id吗？我这里设置了3个id值一样的标签，它们的样式效果也正常显示。

这是因为，id是配合后面要学习的js来使用的。在html中，我们确实可以给多个标签设置同样的id，css也可以给这些标签渲染对应的样式。

但是，如果你用js通过id找对应的标签就会报错，因为html中存在多个id值相同的标签，它无法确定是哪一个。

所以，在这之后，我们要养成一个良好的编码规范。既然这里它要求一个页面中只能有唯一一个id值，那我们就按规则写。

3.3 设置多个id

#title {
    color: brown;
}

#content {
    font-size: 14px;
    color: antiquewhite;
}

   <h2 id="title">设置多个id</h2>
   <p id="content">设置了多个id，每一个id的值都不相同，每一个id值都是唯一的</p>

4、通配符选择器

结构:*

作用：找到页面中所有的标签，设置样式

注意点：

1. 开发中使用极少，只会在特殊的情况下才会用到
2. 可能会在去除标签默认的margin和padding使用到

4.1 去除标签margin和padding

padding：为一个标签的内边距

margin：为一个标签的外边距

当我们加上下面的样式之后：

*{
    margin:0;
    padding:0;
}

4.2 给所有标签设置样式

/* 所有标签的内容样式都设置为红色。*/
* {
    color: red;
}

    <p>
        通配符选择器 *
    </p>

    <span>span标签</span>
    <p>p标签</p>
    <div>div标签</div>