通配符选择器（理解）

最新推荐文章于 2023-03-30 16:14:34 发布

杨宗健

最新推荐文章于 2023-03-30 16:14:34 发布

阅读量8.3k

点赞数 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>

通配符选择器格式：

属性:值;

}

什么是通配符选择器？

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

注意点：

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

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