前端-选择器

最新推荐文章于 2023-07-10 21:59:06 发布

翻篇end

最新推荐文章于 2023-07-10 21:59:06 发布

阅读量129

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_53274742/article/details/128716426

版权

一、什么是选择器

用来指定网页上我们想要样式化的HTML元素。
选择器所选择的元素，叫做“选择器的对象”。

二、选择器的分类

1.类型选择器

类型选择器指的是html标签。也可以叫做标签选择器。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默认页面</title>

    <style>
        p{
            font-size: 30px;
            color: red;
        }
    </style>

</head>
<body>

    <p>我是类选择器</p>

</body>
</html>

2. id选择器

通过在标签中的id设置一个值，id值不能重复且只能有要给id值。用#作为前缀。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默认页面</title>

    <style>
       #span_id{
        font-size: 30px;
        color: red;
       }
    </style>

</head>
<body>

   <span id = "span_id">
    hello,world
   </span>

</body>

</html>

3.类选择器

通过在标签中的class设置一个值，该值也不应重复。用 .为前缀。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默认页面</title>

    <style>
       .span_class{
        font-size: 30px;
        color: red;
       }
    </style>

</head>
<body>

   <span class = "span_class">
    hello,world
   </span>

</body>

</html>

4.全局选择器

选中页面所有元素。用*为前缀

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默认页面</title>

    <style>
       *{
        font-size: 30px;
        color: rgb(68, 255, 0);
       }
    </style>

</head>
<body>

   <span>
    hello,world
   </span>

</body>

</html>