Html第10集：选择器

赵彦军

已于 2022-10-08 18:37:00 修改

阅读量211

点赞数

分类专栏：前端学习笔记文章标签： html 前端 css javascript

于 2022-08-27 16:00:32 首次发布

本文链接：https://blog.csdn.net/zhaoyanjun6/article/details/126558787

版权

前端学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

转载请标明出处：http://blog.csdn.net/zhaoyanjun6/article/details/126558787
本文出自【赵彦军的博客】

文章目录

标签选择器
id 选择器
类选择器
- 多 class 场景
通配选择器
交集选取器
选择器分组、并集选择器
关系选择器

选择器格式

选择器：{
          样式；
}

标签选择器

h1 {
  color : red;
  font-weight : normal;
};

举例：对所有 P 标签做选择，字体颜色为 red

<head>
    <meta charset="UTF-8">
    <title>测试</title>

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

</head>
<body>


<p>星期一</p>
<p>星期二</p>

</body>
</html>

效果如下：

在这里插入图片描述

id 选择器

语法格式：#id { }

举例说明：

<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>

        #one{
            color: blue;
        }

    </style>

</head>
<body>


<p id="one">星期一</p>
<p>星期二</p>

</body>

效果如下：

在这里插入图片描述

类选择器

class 属性定义了元素的类名

class 和 id 有什么区别？

id 不能重复，类似于身份证号
class 可以重复，类型于班级

语法：

.类选择器名称{
         css样式代码；
}

注意： 
1.英文圆点开头
2.类选择器名称可以任意起名（但不要中文名）

举例说明：

<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>

        .red{
            color: blue;
        }

    </style>

</head>
<body>

<p class="red">星期一</p>
<p class="red">星期二</p>
<p>星期三</p>

</body>

效果如下：

在这里插入图片描述

多 class 场景

一个标签可以指定多个 class 属性，多个 class 属性用空格符分割。

<p class="red blue">星期一</p>

举例：

<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>

        .red{
            color: red;
        }

        .blue {
            color: blue;
        }

    </style>

</head>
<body>

<p class="red blue">星期一</p>
<p class="red">星期二</p>
<p>星期三</p>

</body>

效果如下：

在这里插入图片描述

通配选择器

语法：*{}
含义：页面的所有元素都选中

举例：

<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>
        
        *{
            color: coral;
        }
    </style>

</head>
<body>

<p>星期一</p>
<p>星期二</p>
<p>星期三</p>

</body>

效果图：

在这里插入图片描述

交集选取器

作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器n{ }

<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>

        .red {
            color: red;
        }

        div.red {
            font-size: 40px;
        }
    </style>

</head>
<body>

<div class="red">div</div>
<p class="red">星期一</p>
<p>星期二</p>

</body>

在这里插入图片描述

选择器分组、并集选择器

作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n { }

<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>
      
        .red,.blue {
            font-size: 40px;
        }

    </style>

</head>
<body>

<p class="red">星期一</p>
<p class="blue">星期二</p>

</body>

在这里插入图片描述

关系选择器

祖先元素：直接或间接包含后代元素，叫祖先元素
后代元素：直接或间接被祖先元素包含的元素，叫后代元素
父元素：直接包含后代元素，叫父元素
子元素：直接被父元素包含的元素，叫子元素
兄弟元素：拥有相同父元素的元素，叫兄弟元素

子元素选择器

语法：父元素 > 子元素 { }

<head>
    <meta charset="UTF-8">
    <title>测试</title>

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

    </style>

</head>
<body>

<div>我是一个div

   <p>我是一个div中的p</p>

</div>

</body>

在这里插入图片描述

后代元素

语法：祖先元素后代元素{ }

<head>

    <style>
       
        div p {
            color: red;
        }

    </style>

</head>
<body>

<div>我是一个div

    <p>我是一个div中的p</p>
    <p>我是一个div中的p</p>
    <span>我是一个span</span>

</div>

</body>

在这里插入图片描述

下一个兄弟元素

语法：前一个元素 + 下一个元素{ }

<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>
 
        p + span {
            color: red;
        }

    </style>

</head>
<body>

<div>我是一个div

    <p>我是一个div中的p</p>
    <p>我是一个div中的p</p>
    <span>我是一个span</span>

</div>

</body>

在这里插入图片描述

下边所有元素

语法：上一个元素 ~ 下一个元素 { }

<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <style>
       
        p ~ span {
            color: red;
        }

    </style>

</head>
<body>

<div>我是一个div

    <p>我是一个div中的p</p>
    <p>我是一个div中的p</p>
    <span>我是一个span</span>
    <span>我是一个span2</span>

</div>

</body>