【Html与CSS基础】CSS选择器

小职员

已于 2022-04-19 15:22:00 修改

阅读量249

点赞数 1

分类专栏： Html与CSS基础文章标签： html css

于 2022-04-19 15:02:23 首次发布

本文链接：https://blog.csdn.net/Thedemonsword/article/details/124268029

版权

Html与CSS基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS 选择器是对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，从而给指定元素添加样式。

一、CSS 选择器的分类

常用选择器
复合选择器
关系选择器
属性选择器
伪类选择器

二、不同种类选择器的用法

1. 常用选择器

标签选择器：针对一类标签
ID 选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）

代码如下（示例）：

<head>
  <title>css选择器</title>
  <style>
    /*标签选择器(根据标签名选中指定元素)*/
    h1{
      color: blue;
    }
    p{
      color: red;
    }
    /*ID 选择器选择器(根据元素的id属性选中一个元素，ID是不能重复的，代表唯一属性，类似于每个人的身份证)*/
    #red{
      color: red;
    }
    /*类（class）选择器(根据元素的class属性选中一组元素，类似于一个班级同一类)*/
    .blue{
      color: blue;
    }
    .abc{
      font-size: 30px;
    }
    /*通用选择器（通配符）：针对所有的标签都适用（不建议使用）*/
    *{
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1 class="blue abc">标题</h1>
  <p>应怜屐齿印苍苔,</p>
  <p>小扣柴扉久不开。</p>
  <p id="red">春色满园关不住，</p>
  <p>一枝红杏出墙来。</p>
</body>

2. 复合选择器

交集选择器
并集选择器

代码如下（示例）：

<head>
  <title>css复合选择器</title>
  <style>
    /*交集选择器(选中同时复合多个条件的元素，如果有元素选择器必须使用元素原则器开头)*/
    .red{
      color: red;
    }
    div.red{
      font-size: 30px;
    }
    /*选择器分组（并集选择器）（同时选择多个选择器对应的元素，中间用逗号分割）*/
    h1,span{
      color: blue;
    }
  </style>
</head>
<body>
  <h1>标题</h1>
  <span>简介</span>
  <div class="red">我是div</div>
  <p class="red">我是P元素</p>
  <div class="red2">我是div2</div>
</body>

3. 关系选择器

父元素：直接包含子元素的元素叫父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫祖先元素、一个元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫后代元素、子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素

<head>
  <title>css关系选择器</title>
  <style>
    /* 子元素 */
    div > span{
      color: red;
    }
    /* 后代元素 */
    p span{
      color: blue;
    }
    /* 兄弟元素 */
    p + span{
      color: aqua;
    }
  </style>
</head>
<body>
  <div class="red">
    我是div
    <p class="red">我是div中的P元素
      <span>我是P元素中的span</span>
    </p>
    <span>我是div中的span元素</span>
    <span>我是div中的span2元素</span>
  </div>
</body>

4. 属性选择器

通过已经存在的属性名或属性值匹配元素

  <head>
    <title>css属性选择器</title>
    <style>
      /*
        [属性名] 选择含有指定属性的元素
        [属性名=属性值] 选择含有指定属性和属性值的元素
        [属性名^=属性值] 选择属性值以指定值开头的元素
        [属性名$=属性值] 选择属性值以指定值结尾的元素
        [属性名*=属性值] 选择属性值中含有某值的元素
      */
      p[title]{
        font-size: 20px;
      }
      p[title*=abc]{
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>标题</h1>
    <p title="abc">应怜屐齿印苍苔,</p>
    <p title="abcdef">小扣柴扉久不开。</p>
    <p title="hello">春色满园关不住，</p>
    <p>一枝红杏出墙来。</p>
  </body>

5. 伪类选择器

伪类（不存在的类，特殊的类）

伪类用来描述第一个元素的特殊状态（比如：第一个子元素，被点击的元素、鼠标移入的元素等）
伪类一般情况下都使用：开头

代码如下（示例）：

  <head>
    <title>css伪类选择器</title>
    <style>
      /*
      1. 以下伪类是根据所有子元素进行排序
       :first-child 第一个元素
       :last-child 最后一个元素
       :nth-child() 选中第n个子元素
      2. 以下伪类是同类型元素进行排序
       :first-of-type 第一个元素
       :last-of-type 最后一个元素
       :nth-of-type() 选中第n个子元素
       :not() 除了第几个元素
      */
      /* 将ul里的第一个li设置为红色 */
      ul > li:first-of-type{
        color: red;
      }
      /* 将ul里除了第三个li元素，其他都设置为红色 */
      ul > li:not(:nth-of-type(3)){
        color: red;
      }
    </style>
  </head>
  <body>
    <ul>
      <span>第0个</span>
      <li>第一个</li>
      <li>第二个</li>
      <li>第三个</li>
      <li>第四个</li>
      <li>第五个</li>
    </ul>
  </body>

小职员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Html与CSS基础】CSS选择器

CSS 选择器是对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，从而给指定元素添加样式。一、CSS 选择器的分类常用选择器复合选择器关系选择器属性选择器伪类选择器二、不同种类选择器的用法1.常用选择器标签选择器：针对一类标签 ID 选择器：针对某一个特定的标签使用类选择器：针对你想要的所有标签使用通用选择器（通配符...
复制链接

扫一扫