css选择器

吱吱吱-

已于 2023-02-24 20:07:42 修改

阅读量145

点赞数

文章标签： css 前端 html

于 2023-02-08 17:01:36 首次发布

本文链接：https://blog.csdn.net/m0_73970213/article/details/128937711

版权

一、css选择器

（一）css基本选择器

1、元素选择器

作用: 通过元素选择器可以选择页面中的所有指定元素

语法: 标签名{ } 例如： p{ color: red; }

2、id选择器

作用：通过元素的id属性值选中唯一的一个元素

语法: #id属性值{ } 例如：#p1{ color: black;}

3、类选择器：

作用：根据元素class属性可以选中一组元素

语法：.class属性值例如：.p2{color: pink; } .bcd{color:blue;}

注：我们可以为元素设置class属性,class属性和id属性类似，多个值之间使用空格隔开

4、通配符选择器

语法：*{ }

作用：选中页面中所有的标签例如： *{font-size: 30px; }

以下为代码

最终显示效果为

（二）css层级选择器：

1、元素之间的关系

①父子关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

② 祖先后代关系

祖先元素：直接或间接包含的元素，包含父元素

后代元素：直接或间接被包含的元素，包含子元素

③兄弟关系

拥有共同父元素的元素

源码：

<!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>Document</title>
    <style>
      /* 1、子元素选择器
      作用：选中指定的父元素下面指定的子元素
      语法：父元素>子元素{}
      例如：div>p,.big>p,#big>p{}
      */
      #big > p {
        color: red;
      }ss

      /* 2、后代选择器
      作用：选中指定祖先元素下面指定的后代元素
      语法：祖先元素 后代元素{}
      例如：#big span{}
      */
      #big span {
        font-size: 30px;
      }

      /* 3、 选择下一个兄弟(仅挨着我的)选择器
      作用：选择下一个兄弟
      语法：兄+弟{}
      */
      .tl + div {
        background-color: rgb(239, 169, 17);
      }
      
      /* 4、选择下面所有的兄弟(前面的不选)
      语法：兄～弟{}
      */
      .sg~p{
        background-color: rgb(170, 239, 10);
      }
    </style>
  </head>
  <body>
    <div id="big">
      菜市场
      <p class="tl">调料</p>
      <div class="sg">
        水果
        <span>苹果
          <em>香蕉</em>
          <em>西瓜</em>
        </span>
        <span>哈密瓜</span>
        <span>芒果</span>
      </div>
      <p>蔬菜</p>
      <p>海鲜</p>
    </div>
    <div>
      <p>烟酒</p>
      <p>饮料</p>
      商店
    </div>

    <!-- 元素之间的关系-->
    <!-- 
      父子关系
         父元素：直接包含子元素的元素
         子元素：直接被父元素包含的元素
      祖先后代关系
         祖先元素：直接或间接包含的元素，包含父元素
         后代元素：直接或间接被包含的元素，包含子元素
      兄弟关系
         拥有共同父元素的元素
     -->
  </body>
</html>

实现效果：

（三）css结构选择器（伪类选择器）

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

-伪类用来描述一个元素的特殊状态

-比如：第一个元素，被点击的元素，鼠标移入的元素···

-特点：一般请情况下，使用：开头

① :first-child 第一个子元素

② :last-child 最后一个子元素

③ :nth-child() 选中第n个子元素

④ 特殊值： n 所有的

2n或even 选中偶数

2n+1或odd 选中奇数

以上这些伪类都是根据所有的子元素进行排序

① :first-of-type

② :last-of-type

③ :nth-of-type()

功能跟上面相似，

不同的是，这是在同类型的子元素中去选择

（二）:not() 否定伪类

语法：选择器：not（条件）

作用：将符合条件的元素从选择器中去除

以下为代码演示：

<!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>
        *{
           list-style: none; 
        }
        ul li {
            float: left;
            
        }

        ul>li>p:nth-of-type(1){
            font-weight: bold;
        }

        ul>li>p:nth-of-type(2){
            color: brown;
        }

        ul>li>p:nth-of-type(3){
            color: rgb(41, 41, 228);
        }
        ul{
            overflow: hidden;
        }
        div{
            width: 900px;
            margin: 0 auto;
        }
    </style>

</head>

<body>
<div>
    <h2>热播</h2>

    <ul>
        <li><img src="./练习4img/img1.png" alt="" srcset="">
            <p>神武赵子龙</p>
            <p> 怒，林更新不抱网红抱女神</p>
            <p> 点击次数：242445次</p> <br>
        </li>
        <li> <img src="./练习4img/img2.png" alt="" srcset="">
            <p> 旋风十一人</p>
            <p> 胡歌变教练在撩前女友</p>
            <p> 点击次数：242445次</p>
        </li>

        <li> <img src="./练习4img/img3.png" alt="" srcset="">
            <p>太阳的后裔 </p>
            <p> 宋慧乔吃嫩草</p>
            <p> 点击次数：242445次</p>
        </li>
        <li> <img src="./练习4img/img4.png" alt="" srcset="">
            <p>山海经之赤影传说</p>
            <p>娜扎张翰再度联手</p>
            <p>点击次数：242445次</p>
        </li>

实现效果：

吱吱吱-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器

语法：.class属性值例如：.p2{color: pink;语法: #id属性值{ } 例如：#p1{ color: black;作用：选中页面中所有的标签例如： *{font-size: 30px;语法: 标签名{ } 例如： p{ color: red;-比如：第一个元素，被点击的元素，鼠标移入的元素···后代元素：直接或间接被包含的元素，包含子元素。祖先元素：直接或间接包含的元素，包含父元素。④ 特殊值： n 所有的。作用：通过元素的id属性值选中唯一的一个元素。
复制链接

扫一扫