通配符选择器（理解）

来源：互联网发布：兄弟连培训php学费多少编辑：程序博客网时间：2024/06/07 23:01

通配符选择器：*

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

例子：

内容：

<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>

通配符选择器格式：

属性:值;

}

什么是通配符选择器？

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

注意点：

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

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

0 0