通配符选择器：*

最新推荐文章于 2024-09-23 10:05:42 发布
最新推荐文章于 2024-09-23 10:05:42 发布
阅读量4k 收藏 4
点赞数

通配符选择器：*  

作用描述：选择所有元素。

例子：

内容：

[html] view plain copy
  1. <h1>我是标题</h1>  
  2.        <p>我是段落</p>  
  3.         <a href="#">我是超链接</a>  


需求：把<h1>,<p>,<a>标签中的内容变成红色。


方法一：（id选择器）

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>      
  4.         <meta charset="utf-8">  
  5.         <title>通配符选择器（理解）</title>  
  6.         <base target="_self">  
  7.         <style>  
  8.             #x{  
  9.                 color: red;  
  10.                 }  
  11.             #xx{  
  12.                 color: red;  
  13.                 }  
  14.             #xxx{  
  15.                 color: red;  
  16.                 }  
  17.         </style>  
  18.     </head>  
  19.     <body>  
  20.         <h1 id="x">我是标题</h1>  
  21.         <p id="xx">我是段落</p>  
  22.         <a href="#" id="xxx">我是超链接</a>  
  23.     </body>  
  24. </html>  

方法二：（class类选择器）

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>      
  4.         <meta charset="utf-8">  
  5.         <title>通配符选择器（理解）</title>  
  6.         <base target="_self">  
  7.         <style>  
  8.             .xxxx{  
  9.                 color: red;  
  10.                 }  
  11.         </style>  
  12.     </head>  
  13.     <body>  
  14.         <h1 class="xxxx">我是标题</h1>  
  15.         <p class="xxxx">我是段落</p>  
  16.         <a href="#" class="xxxx">我是超链接</a>  
  17.     </body>  
  18. </html>  



再次要求：不允许使用id选择器和class类选择器，运用别的选择器改变<h1>,<p>,<a>中的内容变为红色。

方法三：（通配符选择器）

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>      
  4.         <meta charset="utf-8">  
  5.         <title>通配符选择器（理解）</title>  
  6.         <base target="_self">  
  7.         <style>  
  8.             *{  
  9.                 color: red;  
  10.                 }  
  11.         </style>  
  12.     </head>  
  13.     <body>  
  14.         <h1>我是标题</h1>  
  15.         <p>我是段落</p>  
  16.         <a href="#">我是超链接</a>  
  17.     </body>  
  18. </html>  




通配符选择器格式：

 *{

  属性:值;

   }



什么是通配符选择器？

作用：给当前界面上所有的标签设置属性。（*的意思是选中所有的标签）


注意点：

由于通配符选择器是设置界面上所有的标签属性，所以在设置之前会遍历所有的标签，如果

当前界面上的标签比较多，那么性能就会比较差，所以在企业开发中一般不会使用通配符选择器。


ImpulsionAndpower
关注
CSS之⑥通配符选择器（基础选择器④）
笔岸柳影
02-07 1110
通配符选择器使用须知：通配符选择器的选择器名字，通配符选择器的作用范围，通配符选择器的基本格式，通配符选择器的使用。 ...
HTML 通配符选择器 CSS进阶
kuyoru's blog
10-03 812
这里写自定义目录标题HTML练习 HTML练习 主要收获：css3通配符选择器的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style type="text/css"> a { text-decoration: none; }
通配符选择器
Blue_lan18的博客
01-18 1195
在CSS中，通配符选择器用*定义，可以选取页面中所有标签（元素）。通配符选择器在特殊情况下才使用。 语法： 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content.
【CSS】选择器详解与最佳实践
最新发布
lph159的博客
09-23 1234
选择器用于匹配HTML中的元素，使开发者可以对这些元素应用样式。例如，可以选择所有的元素，或特定ID、类名的元素，并应用不同的样式。选择器在控制网页的外观时至关重要，理解和掌握选择器的用法可以提高CSS代码的维护性和效率。CSS选择器是样式表的核心工具，了解和掌握各种选择器的使用方法，可以帮助你更高效地编写样式代码。在实际项目中，通过合理使用选择器，你可以轻松实现页面布局和样式的控制，并且能够编写更加灵活、维护性更高的CSS代码。希望本文对你理解和应用CSS选择器有所帮助。JavaScript。
通配选择符
weixin_44802155的博客
11-04 544
选择符 Id选择符，class选择符，tag选择符，通配选择符，分组选择符，包含选择符和伪类选择符 Id，class选择符上个说过了。就直接说tag选择符。 Tag选择符 也叫标签选择符，可直接通过HTML标签的名字来设置样式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
css通配选择符
LCY133的博客
09-30 468
通配选择符 在整个html文件当中如果想要选中所有元素，则用通配选择符；但通常使用去 掉所有边距，比如：*{margin:0;pading:0;} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0px; padding: 0px; } /*这个通配符
searchfiles:使用通配符 * 和 ** 递归搜索文件的对话框-matlab开发
05-29
filterspec、limit、dialogname、optiontext、optiondefault） 将显示一个对话框，用户可以在其中使用递归搜索文件通配符（* 和 **），可以选择限制文件数量每个文件夹，并带有可选的自定义复选框。 输入参数（所有...
jQuery的选择器中的通配符使用介绍
10-26
1. **通配符选择器** - `*` 通配符：这个符号用于选取包含特定字符串的任何元素。例如，`$("input[id*='code']")`会选择所有id属性中包含"code"的`<input>`标签。 - `^` 开始匹配：`$("input[id^='code']")`会选择...
jQuery中的通配符选择器使用总结
11-23
通配符选择器是jQuery选择器的一个重要部分，它允许我们根据特定的模式匹配元素。这些选择器基于元素的属性，如ID、类、名称等，极大地提高了我们定位DOM元素的灵活性。下面将详细解释jQuery中的几种通配符选择器...
css基本选择器，id选择器，class选择器，标签选择器，*通配符选择器，逗号 空格 + ＞
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-30 3555
全栈工程师开发手册 （作者：栾鹏） css系列教程1—选择器全解css基本选择器包括id选择器，class选择器，标签选择器，*通配符选择器，以及使用逗号实现查询集合，空格实现查询后代，>实现查询子元素，+实现查询后续同胞元素， 代码如下：h2{ /* 标签选择 */ } p,h1{
HTML5前端开发入门之CSS通配符选择器
qq_41886761的博客
12-22 889
通配符选择器 1.什么是通配符选择器？ 作用:给当前界面上的所有标签设置属性   格式： *{     属性：值; }   注意点： 由于通配符选择器是设置界面上所有的标签的属性  所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差  所有在企业开发中一般不会使用通配符选择器...
CSS的选择符
人生如梦，一樽还酹江月
09-11 1422
<!--CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dt-->.style1 {color: #000066;font-size:24px; font-weight: bo
CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器……），你知道了多少？
AE_BD的博客
03-04 1403
选择器{样式;在css中{}之前的部分就是"选择器","选择器"指明了{}中的”样式“的作用对象，也就是说该”样式“作用与网页中的哪些元素。
css选择器
xqs251769745的专栏
07-12 2907
学习了css选择器，在此做一个知识梳理：一、基本选择器1、id选择器（优先级最高 0100）如：#id{...}2、类选择器（优先级次之 0010）如：.class{...}3、标签选择器 （优先级最低 0001，涉及最广）如: div{...}二、加强选择器1、后代选择器（选择器名称之间采用空格隔开）如：#wrap p{...id为wrap下的所有p标签....}2、子代选择器（选择器名称之间采...
【Web】CSS（No.12）Css基本选择器（标签选择器、类选择器、多类名选择器、id选择器、通配符选择器）
Sherry带你学Web
06-10 389
CSS基础选择器 标签选择器（元素选择器） 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下： 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者： 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺...
CSS基础选择器
Inory_ye的博客
12-23 216
前言 每一条css样式定义由两部分组成，形式如下： 选择器{样式} ，在{}之前的部分就是“选择器”。“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。 一、基础选择器 1.通配符选择器 二、复杂选择器 总结 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值