css选择器

最新推荐文章于 2024-05-01 12:01:29 发布
最新推荐文章于 2024-05-01 12:01:29 发布
阅读量339 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71380478/article/details/128695502
版权

1、标签选择器

该选择器可作用于所有同一个标签名上的标签，如div，p等，在head标签中添加style标签或加入css文件，在head标签加入link标签在herf属性中写入css文件相对路径。书写结构：标签名{css属性名：属性值}

<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>
        p{
            color:red;
        }
    </style>
</head>
<body>
    <p>
        这是一个红色的p标签
    </p>
</body>
运行结果：

在这里插入图片描述

后代选择器

作用于内嵌的标签如div标签内嵌一个a标签。无论内嵌多少重均生效，如div内嵌的p标签里再内嵌一个a标签，两个a标签同样生效，在head标签中加入style标签或加入css文件，在head标签加入link标签在herf属性中写入css文件相对路径。书写结构：选择器1（空格）选择器2{css属性名：属性值}

<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>
        div a{
            color:red;
        }
    </style>
</head>
<body>
    <p>
        <a href="#">这不是一个红色链接</a>
    </p>
    <div>
        <a href="#">这是一个红色链接</a>
       <p>
          <a href="#">这仍然是一个红色链接</a>
       </p>
    </div>
</body>
运行结果：

在这里插入图片描述

子代选择器

作用于内嵌的标签，但是只能生效第一重内嵌，如div标签内嵌一个a标签，该a标签生效，此时在div标签内嵌一个p标签然后再内嵌一个a标签时不生效，在head标签中加入style标签或加入css文件，在head标签加入link标签在herf属性中写入css文件相对路径。书写结构：选择器1>选择器2{css属性名：属性值}

<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>
        div>a{
            color:red;
        }
    </style>
</head>
<body>
    <p>
        <a href="#">这不是一个红色链接</a>
    </p>
    <div>
        <a href="#">这是一个红色链接</a>
       <p>
          <a href="#">这不是一个红色链接</a>
       </p>
    </div>
</body>
运行结果：

在这里插入图片描述

并集选择器

作用：同时选择多组选择器进行css样式，如同时选择div，p，a标签进行css样式，在head标签中加入style标签或加入css文件，在head标签加入link标签在herf属性中写入css文件相对路径。书写结构：选择器1，选择器2，选择器3，…{css属性名：属性值}

<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>
        div,a,p{
            color:red;
        }
    </style>
</head>
<body>
    <p>
        红色p标签
    </p>
    <div>
        红色div标签
    </div>
    <a href="#">红色链接标签</a>
</body>
运行结果：

在这里插入图片描述

伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式，如鼠标悬停在p标签上，则p标签内的样式改变，在head标签中加入style标签或加入css文件，在head标签加入link标签在herf属性中写入css文件相对路径。书写结构：选择器：hover{css属性名：属性值}

<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>
        p:hover{
            color:red;
        }
    </style>
</head>
<body>
    <p>鼠标悬停该标签时变红</p>
</body>
运行结果：

在这里插入图片描述

2、类选择器

作用：通过类名，找到页面中带有该类名的标签，进行css样式设置，在head标签中加入style标签或加入css文件，在head标签加入link标签在herf属性中写入css文件相对路径。书写结构：标签（空格）class=“类名”；.类名{css属性：属性值}

<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>
      .red{
        color: red;
      }
    </style>
</head>
<body>
    <p class ="red">
       这是一个红色标签
    </p>
    <p>
       这不是一个红色标签
    </p>
</body>
运行结果：

在这里插入图片描述

交集选择器

作用：通过标签名和该标签的类名找到页面中符合的标签，在head标签中加入style标签或加入css文件，在head标签加入link标签在herf属性中写入css文件相对路径。书写结构：标签（空格）class=“类名”；标签.类名{css属性：属性值}

<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>
      p.red{
        color: red;
      }
    </style>
</head>
<body>
    <p class ="red">
       这是一个红色标签
    </p>
    <p>
       这不是一个红色标签
    </p>
    <div class ="red">
       这不是一个红色标签
    </div>
</body>
运行结果：

在这里插入图片描述

3、id选择器

作用：通过id值，找到页面中带有该id值的标签，进行css样式设置，在head标签中加入style标签或加入css文件，在head标签加入link标签在herf属性中写入css文件相对路径。书写结构：标签（空格）id=“id值”；#id值{css属性：属性值}

<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>
      #red{
        color: red;
      }
    </style>
</head>
<body>
    <p id ="red">
       这是一个红色标签
    </p>
    <p>
       这不是一个红色标签
    </p>
</body>
运行结果：

在这里插入图片描述

4、通配符选择器

选择所有页面的标签进行css样式设置，在head标签中加入style标签或加入css文件，在head标签加入link标签在herf属性中写入css文件相对路径。书写结构：* {css属性：属性值}

<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>
      *{
        color: red;
      }
    </style>
</head>
<body>
    <p>标签一</p>
    <div>标签二</div>
    <a href="#">标签三</a>
</body>
运行结果：

在这里插入图片描述

lfllighy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3三：选择器
qq479850581的博客
09-18 242
选择器作用 选择页面上的某一个或者某一个元素 基本选择器 标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器，会选择页面上所有的这个标签元素*/ h1{ color: #a7ff81;
CSS基础：其他CSS选择器（搭配*号，空格，＞号，~号使用）
Alley_Olive的专栏
06-30 132
CSS基础：其他CSS选择器（搭配*号，空格，>号，~号使用）
浅谈CSS选择器中的空格
weixin_30596343的博客
03-12 254
HTML文档是一棵树的结构，各元素以一种层次结构为基础构成‘树’的视图。文档树中的每个元素，要么是另一个元素的父元素，要么是另一个元素的子元素，这样，各元素之间就形成了‘父子关系’。基于这样的关系模型，CSS定义了后代选择器（descendant selector）也称为上下文选择器（contextual selector）。 后代选择器的写法为，子代元素以空格与父元素形成连接关系构成选择器，如...
CSS - 类选择器: 中间有空格和没有空格的情景
qq_43886365的博客
02-20 2704
类选择器: 中间有空格和没有空格的情景 CSS中定义CLASS时，中间有空格和没空格的区别是什么？ .example .space{ // 注意，中间有空格 color: orange; } .example.noSpace { // 中间没有空格 color: green; } 如上面的两个定义一个是中间有空格，一个是中间没空格。 第一个class要这样写生效： <p class="example">文字文字 <span class="space">space
css的选择器-逗号、空格分隔和连写的区别
Alive_m的博客
10-30 2141
css的选择器-逗号、空格分隔和连写的区别
css选择器 - 空格，无空格和大于号＞的区别 个人笔记
树上骑个猴的博客
12-22 1721
无空格，选择的元素既有.box类，也有.p类 <style> .box.p{ font-weight:bold; color:red; } </style> <body> <div class="box"> <div class="p"> 1 </div> <div class="p2"> 2 <div class="p"> 3 <div class="box .
CSS中两个类选择器有空格与没空格的区别
Vincent_Zhang233的博客
09-14 1009
CSS中两个类选择器有空格与没空格的区别
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
CSS教程之css选择器 、属性、值
10-30
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。 每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。 值在冒号（不是等号）后面，分号分离属性。
CSS 选择器支持列表
09-25
evotech网站整理的CSS选择器支持列表.
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
不能不知道的CSS选择器技巧
09-24
不能不知道的CSS选择器技巧，CSS选择器使用技巧，你应该知道特分享给大家，感兴趣的小伙伴们可以参考一下
CSS选择器中的空格
ginny_mjy的博客
08-17 3030
今天工作时同事问写css选择器时加空格与不加空格的区别。由于我一直用的后代选择器，于是就以为没有任何区别。为保险起见查了一下百度，竟然是有区别的。 div.contain .blue{color:blue;} div.contain.blue{color:blue;} 以上两种规则分别应用的元素如下： 1 <!--后代--> <div class="contain">contain<span class="blue">blue</span> 2
css选择器带空格和不带空格的区别
u010999809的博客
06-07 2453
之前写css的时候，没太注意css选择器里组合选择器里带空格和不带空格的差别，这次总结下 看下面的html代码 <body> <div id="containerDiv"> <div id="form1" class="formDiv">111</div> <div id="form2" class="formDiv">222</div> <div> .
写CSS选择器时标签的class属性值中有空格的问题
陈广智的专栏
08-18 4647
1 问题描述 HTML代码片段为： <div class="alert alert-warning"> 请至“随书下载”下载本书的示例程序。 </div> <div class="book-intro readmore"> 本书通过正在学习机器学习的程序员绫乃和她朋友美绪的对话，结合回归和分类的具体问题，逐步讲解了机器学习中实用的数学基础知识。其中，重点讲解了容易成为学习绊脚石的数学公式和符号。同时，还通过实际的Python 编程讲解了数学公式的应用，进而加深读
html+css基础知识
m0_63023515的博客
07-28 525
html+css基础语法知识
CSS基础学习（7）——复合选择器
mdyLjyCN的博客
05-17 303
复合选择器： 在CSS中，可以根据选择器的类型吧选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器智商，对基本选择器进行组合形成的。 复合选择器可以更准确、更高效的选择目标元素（标签）。 复合选择器是有两个或多个基础选择器，通过不同的方式组合而成的。 乘用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。 后代选择器： 后代选择器又称为包含选择器，可以选择父元素里面的子元素，器械发是吧外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就
CSS后代选择器“空格”和“>”的使用辨析
极客神殿
03-11 1610
要点： “空格”：包含子孙 “>”：含子不含孙 举个栗子： html代码如下 <body> <div class="parent"> <p>1p</p> <div>2div <p>-2.1p</p> <p...
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
最新发布
秋刀鱼不做梦的编程日常
05-01 971
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
web css选择器
03-09
以下是一些常见的CSS选择器： 1. 元素选择器：通过元素的标签名选择元素。例如，`p`选择所有的`<p>`元素。 2. 类选择器：通过元素的类名选择元素。类名以`.`开头。例如，`.container`选择所有具有`container`类的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值