通配符选择器（理解）

最新推荐文章于 2024-05-10 15:18:26 发布

杨宗健

最新推荐文章于 2024-05-10 15:18:26 发布

阅读量8.1k

点赞数 2

本文链接：https://blog.csdn.net/Ameir_yang/article/details/70045163

版权

通配符选择器：*

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

例子：

内容：

	<h1>我是标题</h1>
        <p>我是段落</p>
       	<a href="#">我是超链接</a>

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

方法一：（id选择器）

<!DOCTYPE html>
<html>
	<head>	
    	<meta charset="utf-8">
        <title>通配符选择器（理解）</title>
        <base target="_self">
        <style>
			#x{
				color: red;
				}
			#xx{
				color: red;
				}
			#xxx{
				color: red;
				}
		</style>
    </head>
    <body>
		<h1 id="x">我是标题</h1>
        <p id="xx">我是段落</p>
       	<a href="#" id="xxx">我是超链接</a>
    </body>
</html>

方法二：（class类选择器）

<!DOCTYPE html>
<html>
	<head>	
    	<meta charset="utf-8">
        <title>通配符选择器（理解）</title>
        <base target="_self">
        <style>
			.xxxx{
				color: red;
				}
		</style>
    </head>
    <body>
		<h1 class="xxxx">我是标题</h1>
        <p class="xxxx">我是段落</p>
       	<a href="#" class="xxxx">我是超链接</a>
    </body>
</html>

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

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

<!DOCTYPE html>
<html>
	<head>	
    	<meta charset="utf-8">
        <title>通配符选择器（理解）</title>
        <base target="_self">
        <style>
			*{
				color: red;
				}
		</style>
    </head>
    <body>
		<h1>我是标题</h1>
        <p>我是段落</p>
       	<a href="#">我是超链接</a>
    </body>
</html>

通配符选择器格式：

属性:值;

}

什么是通配符选择器？

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

注意点：

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

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

杨宗健

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
通配符选择器（理解）

通配符选择器：* 作用描述：选择所有元素。例子：内容：我是标题我是段落我是超链接需求：把,,标签中的内容变成红色。方法一：（id选择器）通配符选择器（理解） #x{ color: red; } #xx{
复制链接

扫一扫