css 选择器(标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器)

css 选择器的定义

        css 选择器是用来选择标签的,选出来以后给标签加样式。

css 选择器的种类

  1. 标签选择器
  2. 类选择器
  3. 层级选择器(后代选择器)
  4. id选择器
  5. 组选择器
  6. 伪类选择器
  7. 通配符选择器

标签选择器

  • 概念:

    标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

  • 语法:

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
  • 作用:

    标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签

  • 优点:

    是能快速为页面中同类型的标签统一样式

  • 缺点:

    不能设计差异化样式。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>

<body>
    <div>hello</div>
    <p>hello</p>
</body>

</html>

类选择器

        根据类名来选择标签,以 . 开头, 一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是css中应用最多的一种选择器。

        类选择器使用“.”(英文点号)进行标识,后面紧跟类名.

  • 语法:

    • 类名选择器

    .类名  {   
        属性1:属性值1; 
        属性2:属性值2; 
        属性3:属性值3;     
    }
    • 标签

<p class='类名'></p>
  • 优点:

    • 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

  • 注意

    • 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)

    • 长名称或词组可以使用中横线来为选择器命名。

    • 不要纯数字、中文等命名, 尽量使用英文字母来表示。

多类名注意:

  • 各个类名中间用空格隔开。

  • 多类名选择器在后期布局比较复杂的情况下,还是较多使用的。

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style type="text/css">
        .blue {
            color: blue
        }

        .big {
            font-size: 20px
        }

        .box {
            width: 100px;
            height: 100px;
            background: gold
        }
    </style>
</head>

<body>
    <div class="blue">这是一个div</div>
    <h3 class="blue big box">这是一个标题</h3>
    <p class="blue box">这是一个段落</p>

</body>

</html>

 示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style type="text/css">
        .blue {
            color: blue;
            font-size: 100px;
        }

        .red {
            color: red;
            font-size: 100px;
        }

        .orange {
            color: orange;
            font-size: 100px;
        }

        .green {
            color: green;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>

</html>

层级选择器(后代选择器)

        根据层级关系选择后代标签,以选择器1 选择器2开头,主要应用在标签嵌套的结构中,减少命名。

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style type="text/css">
        div p {
            color: red;
        }

        .con {
            width: 300px;
            height: 80px;
            background: green
        }

        .con span {
            color: red
        }

        .con .pink {
            color: pink
        }

        .con .gold {
            color: gold
        }
    </style>
</head>

<body>
    <div>
        <p>hello</p>
    </div>

    <div class="con">
        <span>哈哈</span>
        <a href="#" class="pink">百度</a>
        <a href="#" class="gold">谷歌</a>
    </div>
    <span>你好</span>
    <a href="#" class="pink">新浪</a>
</body>

</html>

运行效果:

注意点:

        这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器

id选择器

        根据id选择标签,以#开头, 元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。

        id选择器使用#进行标识,后面紧跟id名

  • 其基本语法格式如下:

    • id选择器

      #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    • 标签

      <p id="id名"></p>
  • 元素的id值是唯一的,只能对应于文档中某一个具体的元素。

  • 用法基本和类选择器相同。

示例代码

<style type="text/css">
    #box{color:red} 
</style>

<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式,其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名  -->

注意点:

        虽然给其它标签设置id=“box”也可以设置样式,但是不推荐这样做,因为id是唯一的,以后js通过id只能获取一个唯一的标签对象。

id选择器和类选择器区别

  • W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。

    • 类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜

    • id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次,经常和javascript 搭配使用。

        id选择器和类选择器最大的不同在于 使用次数上。

组选择器

        根据组合的选择器选择不同的标签,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style type="text/css">
        .box1,
        .box2,
        .box3 {
            width: 100px;
            height: 100px
        }

        .box1 {
            background: red
        }

        .box2 {
            background: pink
        }

        .box2 {
            background: gold
        }
    </style>
</head>

<body>
    <div class="box1">这是第一个div</div>
    <div class="box2">这是第二个div</div>
    <div class="box3">这是第三个div</div>
</body>

</html>

伪类选择器

        用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background: gold;
        }

        .box1:hover {
            width: 300px;
        }
    </style>
</head>

<body>
    <div class="box1">这是第一个div</div>
</body>

</html>

通配符选择器

  • 概念

            通配符选择器用*号表示, * 就是 选择所有的标签 他是所有选择器中作用范围最广的,能匹配页面中所有的元素。

  • 其基本语法格式如下:

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}
  • 注意:

    会匹配页面所有的元素,降低页面响应速度,不建议随便使用

示例代码:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        * {
            color: pink;
        }
        .red {
            color: red;
        }
        li {
            color: green;
        }
    </style>
</head>
 
<body>
    <div>hello word!</div>
    <div>hello word!</div>
    <p>hello word!</p>
    <span>hello word!</span>
    <div>
        <ul>
            <li class="red">hello word!</li>
            <li>hello word!</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>hello word!</li>
            <li>hello word!</li>
        </ul>
    </div>
</body>
 
</html>

  • 0
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

IT之一小佬

你的鼓励将是我创作的最大动力!

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值