十二，CSS其他选择器

最新推荐文章于 2023-08-04 11:11:48 发布

好多可乐

最新推荐文章于 2023-08-04 11:11:48 发布

阅读量150

点赞数

分类专栏： CSS基础

本文链接：https://blog.csdn.net/qq_36792120/article/details/111220182

版权

CSS基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1，调用class选择器（允许重复class选择器名称）：
定义：

<p class="imooc">慕课网</p>

调用：

.imooc{
        color: red;
       }

2，调用id选择器（唯一）
定义：

 <p id="name1">慕课网</p>

调用：

 #name1{
        color: blue;
  }

3，调用*选择器：

 *{
        background-color: yellow;
   }

4，调用，选择器（联合选择器，用逗号隔开）：

 #name1,#name2{
        color: blue;
       }

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Demo</title>
    <style type="text/css">
    #div1 p{
     background-color: blue;
    }

</style>
</head>

<body>
<div id=div1>
<div id=div2>
  <h1>欢迎来到慕课网</h1>
  <p class="imooc" id="name1">慕课网</p>
          <p class="imooc" id="name2">www.imooc.com</p>
</div>
         <div id=div3>
          <p class="baidu" id="bd1">百度</p>
          <p class="baidu" id="bd2">www.baidu.com</p>
         </div>
          <p class="google" id="google">www.google.com</p>
    </div>
    <p>我是div外面的p标签</p>
     
</body>

3，空格选择器：子孙（后代选择器）

  #div1 p{
     background-color: blue;
    }

这里把div2和div3的全部p标签都选中了
4，>选择器：子选择器（不是子孙后代）
按照分析，这里只有google那段被选中，其他都是属于div2，div3里面的

  #div1> p{
     background-color: blue;
    }

5，+选择器：相邻兄弟选择器

 #div1+ p{
     background-color: blue;
    }

表示和div1是同一级的段落标记，符合条件的只有下面这个

<p>我是div外面的p标签</p>

6，[ ]：属性选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Demo</title>
    <style type="text/css">
     p[id="name1"]{
      color: blue;
     }

</style>
</head>

<body>
     <p class="imooc" id="name1">慕课网</p>
     <p class="imooc" id="name2">www.imooc.com</p>
     <h1>欢迎来到慕课网</h1>
</body>

好多可乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十二，CSS其他选择器

1，id，* ：选择指定元素中被用户选中的内容2，逗号选择器：联合选择器，用逗号隔开1，调用class选择器（允许重复class选择器名称）：定义：<p class="imooc">慕课网</p>调用：.imooc{ color: red; }2，调用id选择器（唯一）定义： <p id="name1">慕课网</p>调用： #name1,#name2{ color: blue; }
复制链接

扫一扫

专栏目录