前端篇 css选择器

最新推荐文章于 2022-11-26 15:46:24 发布
最新推荐文章于 2022-11-26 15:46:24 发布
阅读量242 收藏
点赞数
文章标签： css html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/undefineing/article/details/121372818
版权

1.基础选择器

基础选择器是复合选择器的基础，一切骚操作都离不开基础选择器，所以这玩意儿必须掌握熟练。

简单分类和描述
基础选择
通配符选择器
标签选择器
类选择器
id选择器
所有对象指定
指定对应的标签全体
指定所有同类名的标签
指定一个拥有id名的标签

我们以下面简单代码作为后续操作的基础

<body>
  <div>
    div: 我是div
    <p>p: 我是p1</p> 
    <p>p: 我是p2</p>
    <ul>
      <li>li: 我是li1</li>
      <li>li: 我是li2</li>
      <li>li: 我是li3</li>
      <li>li: 我是li4</li>
      <li>li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

在这里插入图片描述

1.1. 通配符选择器

“*”即代表通配符选择器，意思是指操控所有单元，后面的{}中键入所需要的写入的样式

语法

*{
	#需要的样式
}

例:将所有文本内容设置为红色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <style>
    * {
      color: red;
    }
  </style>
</head>
<body>
  <div>
    div: 我是div
    <p>p: 我是p1</p> 
    <p>p: 我是p2</p>
    <ul>
      <li>li: 我是li1</li>
      <li>li: 我是li2</li>
      <li>li: 我是li3</li>
      <li>li: 我是li4</li>
      <li>li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

在这里插入图片描述

1.2.标签选择器

标签名即代表标签选择器，意思是指操控所指定的标签，后面的{}中键入所需要的写入的样式

语法

标签名{
	#需要的样式
}

例:将所有li中文本设置为红色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
    li {
      color: red;
    }
  </style>
<body>
  <div>
    div: 我是div
    <p>p: 我是p1</p> 
    <p>p: 我是p2</p>
    <ul>
      <li>li: 我是li1</li>
      <li>li: 我是li2</li>
      <li>li: 我是li3</li>
      <li>li: 我是li4</li>
      <li>li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

在这里插入图片描述

1.3.类选择器

“.自定义类名” 即代表类选择器，意思是指操控所有具有对应类选择器名的标签，后面的{}中键入所需要的写入的样式。当然使用前，先要用class为标签取对应的类名，类选择器和id选择器能够精确的指定对应的标签，其灵活性是通配符选择器和标签选择器所不能比拟的。

样式

<ul class="自定义类名">

.自定义类名{
	#需要的样式
}

例:为p1、p2分别设置不同颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
   .txt1{
       color:blue;
   }
   .txt2{
       color:green;
   }
</style>
<body>
  <div>
    div: 我是div
    <p class="txt1">p: 我是p1</p> 
    <p class="txt2">p: 我是p2</p>
    <ul>
      <li>li: 我是li1</li>
      <li>li: 我是li2</li>
      <li>li: 我是li3</li>
      <li>li: 我是li4</li>
      <li>li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

在这里插入图片描述

1.4.ID选择器

“#自定义id名” 即代表id选择器，意思是指操控所有具有对应id选择器名的标签，后面的{}中键入所需要的写入的样式。当然使用前，先要用id为标签取对应的id名，类选择器和id选择器能够精确的指定对应的标签，其灵活性是通配符选择器和标签选择器所不能比拟的。

样式

<ul id="自定义id名">

.自定义id名{
	#需要的样式
}

id选择器与类选择器很很相似所以也能实现同样的功能

例:为p1、p2分别设置不同颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
   #txt1{
       color:blue;
   }
   #txt2{
       color:green;
   }
</style>
<body>
  <div>
    div: 我是div
    <p id="txt1">p: 我是p1</p> 
    <p id="txt2">p: 我是p2</p>
    <ul>
      <li>li: 我是li1</li>
      <li>li: 我是li2</li>
      <li>li: 我是li3</li>
      <li>li: 我是li4</li>
      <li>li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

在这里插入图片描述

1.5.id选择器和类选择器的区别

一个类选择器，是为所有具有相同类名的标签设置属性，可以使用很多次。
而一个ID 选择器，是为所有第一个具有id名的标签设置属性，只能使用一次。
当我们有一个样式需要在很多标签上使用时，一般用类选择器
当我们的样式在一个标签上使用时，一般使用id选择器.

例：区别

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
   .txt3{
   	   color:red;
   }
   #txt1{
       color:blue;
   }
   #txt2{
       color:green;
   }
</style>
<body>
  <div>
    div: 我是div
    <p id="txt1">p: 我是p1</p> 
    <p id="txt2">p: 我是p2</p>
    <ul>
      <li class="txt3">li: 我是li1</li>
      <li class="txt3">li: 我是li2</li>
      <li class="txt3">li: 我是li3</li>
      <li>li: 我是li4</li>
      <li>li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

在这里插入图片描述

2.选择器的权限等级

2.1.权限等级概念

权限等级问题是为了解决一个问题“当我们为一个标签设置多种样式时，结果会如何？”，作为一个编写代码者，必须要清楚自己写的每一句话是什么意思，不然很容易闹笑话。

同样的，我们先看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
   *{
   		color:yellow;
	}
	p {
		color:red;
	}
	
   #txt1{
       color:blue;
   }
   .txt2{
       color:green;
   }
</style>
<body>
  <div>
    div: 我是div
    <p id="txt1" class="txt2">p: 我是p1 缝合怪</p> 
    <p>p: 我是p2</p>
    <ul>
      <li>li: 我是li1</li>
      <li>li: 我是li2</li>
      <li>li: 我是li3</li>
      <li>li: 我是li4</li>
      <li>li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

在这里插入图片描述
p1缝合怪最后呈现的颜色是蓝色，我们由此可知权限等级最高的是id选择器，其他方式的等级也可以如此测试，但这里就不卖关子了。

2.2.权限等级排序

id选择器>类选择器>标签选择器>通配符选择器

3.复合选择器

3.1.复合选择器概念

所谓复合选择器就是由多个基础选择器组成的选择器,复合选择器可以由各种各样的组合产生，使用复合选择器，更准确更精细地选择目标元素标签,减少冗余代码。

样式：

ul li {
	#样式
}

当然复合选择器也不是简单就间隔一个空格就完了的，它还是有几个不同形式的，它们也对应了不同的功能，下面我们详细讲一讲

3.2.并集选择器

3.2.1.并集选择器介绍

功能：通过抽出重复代码，统一管理，实现减少代码冗余

先看代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
   #txt1{
       color:blue;
   }
   #txt2{
       color:blue;
   }
</style>
<body>
  <div>
    div: 我是div
    <p id="txt1">p: 我是p1</p> 
    <p id="txt2">p: 我是p2</p>
    <ul>
      <li>li: 我是li1</li>
      <li>li: 我是li2</li>
      <li>li: 我是li3</li>
      <li>li: 我是li4</li>
      <li>li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

在这里插入图片描述
从css部分中我们可以看见#txt1和#txt2的样式是一样的，这里只是两个id选择器所以看不出啥，但要是有一百个一千个呢？那就显得臃肿了，所以为了减少这种冗余，并集选择器应运而生

3.2.2.并集选择器使用

其实很简单，也就是用“，”逗号把各个基础选择器分开而已。

.tx1,#txt2,ul,p,#{
	#样式
}

知道并集选择器后我们来优化一下上面的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
   #txt2,#txt1{
       color:blue;
   }
</style>
<body>
  <div>
    div: 我是div
    <p id="txt1">p: 我是p1</p> 
    <p id="txt2">p: 我是p2</p>
    <ul>
      <li>li: 我是li1</li>
      <li>li: 我是li2</li>
      <li>li: 我是li3</li>
      <li>li: 我是li4</li>
      <li>li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

在这里插入图片描述
就像你看到那样，代码功能是一样的，但省了代码，看起来更舒服也更方便管理

3.3. 交集选择器

3.3.1.交集选择器介绍

所谓交集选择器即是两个或多个选择器共同指定的部分，为的是精确指定目标。

样式

选择器1选择器2选择器3{
	#样式
}

需要注意的是为了避免误会类选择器和id选择器一般不能放在最前面。如“#txtp”的实际含义就不是交集选择器，而是一个单纯的id选择器。

例


`<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
</style>
<body>
  <div>
    div: 我是div
    <p class="txt1">p: 我是p1</p> 
    <h6 class="txt1">p: 我是p2</h6>
    <ul>
      <li>li: 我是li1</li>
      <li>li: 我是li2</li>
      <li>li: 我是li3</li>
      <li>li: 我是li4</li>
      <li>li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

如上述代码所示，h6和p标签都有类名txt1,如何精确的类名为txt1的h6标签改变颜色呢？这里我们就可以用交集选择器。

3.3.2. 交集选择器使用

几种举例：

p#txt1{
	#样式
}

p#txt1.txt2{
	#样式
}

p#txt1{
	#样式
}

下面我们解决最开始的问题。


`<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
   h6.txt1{
       color:blue;
   }
</style>
<body>
  <div>
    div: 我是div
    <p class="txt1">p: 我是p1</p> 
    <h6 class="txt1">p: 我是p2</h6>
    <ul>
      <li>li: 我是li1</li>
      <li>li: 我是li2</li>
      <li>li: 我是li3</li>
      <li>li: 我是li4</li>
      <li>li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

在这里插入图片描述

3.4.子选择器（后代选择器）

3.4.1.子选择器概念

这里子的意思不是儿子女儿，而是被元素包含在内的元素，处于包含别人地位的元素称之为父元素，处于被别人包含地位的元素称之为子元素，这里要做的就是精确选中父元素的“子”当然“孙”也是可以的

样式

xx yy zz{
	#样式
}

这里指定地点是xx下的yy下的zz
xx yy zz不好理解所以有更形象的

父元素 子元素 孙元素 曾孙元素{

}

3.4.2.子选择器使用

该讲的都讲了，来个实例吧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
   .font .red{
       color:red;
       font-weight:block;
   }
   .font .blue{
       color:blue;
       font-weight:block;
   }
   .font .pink{
       color:pink;
       font-weight:block;
   }
   .font .brown{
       color:brown;
       font-weight:block;
   }
    .font .white{
       color:white;
       font-weight:block;
   }
    .font .yellow{
       color:yellow;
       font-weight:block;
   }
</style>
<body>
  <div class="font">
    div: 我是div
    <p class="red">p: 我是p1</p> 
    <p class="blue">p: 我是p2</p>
    <ul>
      <li class="pink">li: 我是li1</li>
      <li>li: 我是li2</li>
      <li class="brown">li: 我是li3</li>
      <li class="yellow">li: 我是li4</li>
      <li class="white">li: 我是li5</li>
      <li>li: 我是li6</li>
    </ul>
  </div>
</body>

在这里插入图片描述

3.5.伪选择器

伪选择器，也称伪元素选择器，没错它是假的选择器，很假但又不是那么假，它假就假在它不能实际改变元素的样式，而是做一些小修饰，只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于HTML来说不可见。当我们想要不通过HTML来设计，仅仅需要在某个标签前后做一点小小的装饰的时候，可以使用伪元素选择器。

div::before {
    content:"";   # 这个必须写,没有就赋空值 
    #content的属性
  ....         
}

div::after {
    content:"";   # 这个必须写,没有就赋空值 
    #content的属性
  ....         
}

伪选择器就像爬山虎，自己是没有骨头的，只能寄生在别的已经存在标签上才能显现，before和after则是表示它寄生的位置，在前还是在后
url可以设置图片，attr可以获取属性值

来个梨子（before和after）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
  div::before{
    content:"我是content";
  }
</style>
<body>
  <div>
    div: 我是div
    <p>p: 我是小明</p> 
    <p>p: 我是小兰</p>
    <p>p: 我是小樱</p>
  </div>
</body>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
  div::after{
    content:"你是个铲铲";
  }
</style>
<body>
  <div>
    div: 我是div
    <p>p: 我是小明</p> 
    <p>p: 我是小兰</p>
    <p>p: 我是小樱</p>
  </div>
</body>

在这里插入图片描述
来张图片的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
  div::after{
    content:url(../image/OIP-CAXZZBDKG.jpg);
  }
</style>
<body>
  <div>
    div: 是猫猫我呀！
  </div>
</body>

在这里插入图片描述

来张取属性名的


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<style>
  div::after{
    content:attr(id);
  }
</style>
<body>
  <div id="喵喵！">
    div: 是猫猫我呀！
  </div>
</body>

在这里插入图片描述

undefineing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端之css样式（选择器）。。。
dichengpai8268的博客
09-19 206
一、css概述 CSS是Cascading Style Sheets的简称，中文称为层叠样式表，对html标签的渲染和布局 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 例如 二、css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 2.内嵌式 嵌入式...
前端css样式及选择器
daruan1111的博客
05-24 246
标题： 1.scc概述 2.行内样式 3.内接样式 4.外接样式（链接式） 推荐使用 5.外接样式（导入式） 6.嵌套规则 7.css选择器 1.scc（Cascading Style Sheets）层叠样式表 　　当前CSS前端分为三层： HTML：超文本标记语言。从语义的角度描述页面结构。 CSS：层叠样式表。从审美的角度负责页面样式...
web前端——css选择器
xishaoguo的博客
03-08 424
我们要给一个元素设置样式，可以通过css设置样式，但是css要怎么找到这个元素呢？这就需要为css设置选择器，就是为css选一个html标签元素。标签选择器：就是把标签名写上。写法是：元素名{    }&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &
前端：css选择器
qq_42774702的博客
07-03 149
一.元素选择器 二.id选择器 定义元素的id,使用#id为元素的样式赋值,以下代码改变id值为’one’的div元素的样式,注意id一般是唯一的 三.类选择器 class属性在网页中是可重复的,多个不同的元素可以使用同一个class属性 以下的样式则表示,只改变class属性为’top’的p元素的样式,不改变其他类型的元素 四.伪类选择器 1.控制a元素 当鼠标悬浮在a元素时,a的背景颜色改变 2.使用a元素控制a的子元素的样式 当鼠标悬浮在a元素时,a包含的p元素样式会被改变 注意当鼠标悬浮在
前端自己实现一个属性选择器
沛沛呀、
05-08 212
实现一个$attr(name, value)遍历，属性名为name，值为value的的元素合集 相当于写一个属性选择器。 获得所有标签，循环所有标签。得到每一个标签，传入什么属性就按照这个属性去获取属性值。特殊情况，class这些只要包含这个属性值就可以 let ary = $attr('id','AAA') function $attr(property,value){ let elements = document.getElementByTagName('*'), //获取当前页面
前端css选择器练习diner.zip
04-22
"前端css选择器练习diner.zip" 是一个针对CSS选择器学习和实践的资源包，名为"css-diner"。 在"css-diner"这个练习中，你可以深入理解并掌握各种CSS选择器的用法，从而提升你的前端开发技能。以下是一些关于CSS选择...
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
css选择器.xmind
07-28
脑图形式的css选择器和层叠规则整理，包括css选择器的类型以及css层叠规则的影响因素（重要性、来源、特殊性、顺序等等），属于前端基础技术的资源
前端必须掌握的css选择器方法
08-29
下面是前端开发中经常使用的 30 个 CSS3 选择器，包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
css 元素选择器的简单实例
09-24
CSS（Cascading Style Sheets）元素选择器是CSS中最基础的选择器类型，它允许开发者针对HTML或XML文档中的特定元素应用样式。...在进行前端开发时，理解并灵活运用各种选择器，可以极大地提高代码的可读性和复用性。
前端之选择器
weixin_46372074的博客
03-02 3712
前端之选择器选择器选择器参考表类型选择器 选择器 用来指定网页上我们想要样式化的HTML元素。 选择器所选择的元素，叫做“选择器的对象”。 选择器参考表 类型选择器 又名“标签名选择器”或者是”元素选择器“，因为它在文档中选择的对象是一个HTML标签/元素。 <style> </style> ...
4.前端CSS之选择器
放纵kf的博客
11-13 330
1.CSS书写格式，CSS引入方式 1.css的语法结构 选择器 { 属性1:值1; 属性2:值2; 属性3:值3; 属性4:值4; } 2css的三种引入方式 1.style标签内部直接书写(head内，调试阶段) <style> hi{ color: yellow; } </st....
css选择器和标签的权值
VonJ_1993的博客
07-30 635
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码： p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p
css选择器权重与优先级
weixin_65787685的博客
11-26 1240
一：优先级 第一优先级：css属性+!important 拥有最高优先级 第二优先级： 给标签加style，及内联样式 权值1000 第三优先级： id选择器，#id｛｝ 权值0100 第四优先级：class选择器、属性选择器、伪类选择器 权值0010 第五优先级：元素选择、伪元素选择器 权值0001 第六优先级：通用选择器
CSS选择器详解1——常用选择器
zhengxue_er
05-24 373
CSS选择器，实现对HTML页面元素的选择控制，为元素精确添加CSS样式。选择器种类有很多，将其比较分类有利于对选择器进行系统的掌握。每个人都有不同的分类方法，我根据选择器的功能特点及其分支大致将其归为四大类——常用选择器、属性选择器、后代选择器、伪类选择器。此文中，只对常用选择器进行归类整理。 （元素用字母“E”表示；属性用字母“A”表示；class表示类名；id表示id名）1.通配选择器 语
CSS选择器中的权限问题
Ocean WANG的博客
11-23 3106
1.选择器的权限 行内式 ＞ id选择器 ＞ 类选择器 ＞ 标签选择器
html中ul和li标签的用法
热门推荐
kwame211的博客
11-28 7万+
普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。 如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框等需要配合CSS一起设置。 一.做导航，居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &...
Linux 指令篇(1)
hem的专栏
05-25 1482
Linux 指令篇(1) 2000-11-23 9:50 发布者：netbull 阅读次数：5604  cat cd chmod chown cp cut 名称：cat 使用权限：所有使用者 使用方式：cat [-AbeEnstTuv] [--help] [--version] fileName 说明：把档案串连接后传到基本输出（萤幕或加 > fileName 到另一个档案） 参数： -n 或 -
MATLAB学习——MATLAB中的三维绘图指令
xingsongyu的博客
12-06 8381
2 基本XYZ立体绘图命令 mesh和plot是三度空间立体绘图的基本命令，mesh可画出立体网状图，plot则可画出立体曲面图，两者产生的图形都会依高度而有不同颜色。下列命令可画出由函数 形成的立体网状图: x=linspace(-2, 2, 25); % 在x轴上取25点 y=linspace(-2, 2, 25); % 在y轴上取25点 [xx,yy]=meshgrid(x,...
前端css > 选择器
最新发布
09-06
CSS选择器可以根据元素的标签名、类名、ID、属性等进行选择。 以下是一些常见的CSS选择器： 1. 标签选择器：通过元素的标签名来选择元素。例如，`h1`选择所有 `<h1>` 标签。 2. 类选择器：通过元素的类名来选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值