一、通配符选择器

作用:给当前页面上所有的标签设置属性

(2)格式:

*{属性:值;}

(3)注意点:由于通配符选择器是给界面上所有的标签设置属性,因此在设置之前会遍历所有的标签,如果当前界面上的标签比较多,那么性能就会比较差,所以一般在企业开发过程中一般不会使用通配符选择器。

(4)例子:

        *{

            color: red;

        }

........省略代码.......

<h1>我是标题</h1>

<p>我是段落</p>

<a href="#">我是一个链接</a>

二、选择器综合练习

下面的这些方法都可以对p标签进行属性的设置

没有最好的方法,只有更合适的做法,对之前学习的选择器都练习了一遍

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>d82_selector_comprehensive_exercise</title>

    <style>\

        /*标签选择器*/

        p{

            color: red;

        }

        /*id选择器*/

        #identity1{

            color: green;

        }

        #identity2{

            color: green;

        }

        /*class选择器*/

        .para{

            color: blue;

         }

        /*后代选择器*/

        div p{

            color: yellow;

        }

        /*子元素选择器*/

        div>p{

            color: red;

        }

        /*交集选择器*/

        p.para{

            color: green;

        }

        /*并集选择器*/

        #identity1,#identity2{

            color:wheat;

        }

        /*通用兄弟选择器*/

        h1~p{

            color: #37fa1e;

        }

        /*序选择器*/

        p:nth-of-type(n+1){

            color:green;

        }

        /*属性选择器*/

        p[id]{

            color: #ff4b54;

        }

</style>

</head>

<body>

<h1>我是标签</h1>

<div>

<p id="identity1" class="para">我是段落1</p>

<p id="identity2" class="para">我是段落2</p>

</div>

</body>

</html>

三、源码:

d81_wildcard_selector.htm

d82_selector_comprehensive_exercise.html

地址:

https://github.com/ruigege66/HTML_learning

2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)

3.博客园:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,后台回复“礼包”获取Java大数据学习视频礼包

HTML连载25-通配符选择器&选择器综合练习的更多相关文章

  1. JavaScript框架设计(四) 字符串选择器(选择器模块结束)

    JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...

  2. HTML+css基础 css选择器 选择器的权重

    css选择器  选择器的权重 在css中,哪个选择器的权重高,就走谁的样式 标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !imp ...

  3. 前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

    目录 CSS(Cascading Style Sheet) CSS注释 CSS语法结构 CSS的三种引入方式 选择器 伪类.伪元素选择器速查 CSS选择器优先级***** 选择器相同的情况下 选择器不 ...

  4. css选择器的综合使用

    代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf ...

  5. jquery可见性选择器(综合)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jquery选择器(综合)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. jQuery选择器之全选择器(*选择器)

    在css中,经常会在第一行写下这样一段样式: * { margin:; padding:; } 通配符*意味着给所有的元素设置默认的边距.jQuery中我们也可以通过传递*选择器来选中文档页面中的元素 ...

  9. CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

随机推荐

  1. IT兄弟连 HTML5教程 HTML语言的语法 2

    HTML颜色值的设置 大多数浏览器都支持颜色名集合,颜色值是一个关键字或一个RGB格式的数字,在网页中用得很多.仅仅有16种颜色名被W3C的HTML 4.0标准所支持,它们是:aqua.black.b ...

  2. idea 方法注释live template

    groovyScript("def result=''; def params="${_1}".replaceAll('[\\[|\\]|\\s]', '').split ...

  3. 最全各种系统版本的XPosed框架资料下载整理

    由于XPosed在不同安卓系统版本中对应的版本不同,给很多新手造成极大困扰,本文作者经过几番努力,给大家整理了各个版本对应的xposed框架版本以及相关资料,并附上相关下载链接,希望对大伙有所帮助. ...

  4. wp.editor.initialize 配置案例

    wp.editor.initialize ( 'EditorTextArea' , { tinymce: { wpautop: to true , theme: 'modern' , skin: 'l ...

  5. oracle 关联更新

    不多说了,我们来做实验吧. 创建如下表数据 select * from t1 ; select * from t2; 现需求:参照T2表,修改T1表,修改条件为两表的fname列内容一致. 方式1,u ...

  6. GO 函数的参数

    一.函数 函数的参数 1.1 参数的使用 形式参数:定义函数时,用于接收外部传入的数据,叫做形式参数,简称形参. 实际参数:调用函数时,传给形参的实际的数据,叫做实际参数,简称实参. 函数调用: ​ ...

  7. .net core使用NLog日志

    前言:NLog日志对.net core web项目最新的支持在官网上有最新的介绍: 官网介绍地址:https://github.com/NLog/NLog/wiki/Getting-started-w ...

  8. WPF中Button的背景图片,实现禁止IsMouseOver时显示默认

    <Button x:Name="btnPickUpNum" Click="PickUpNum_OnClick" Grid.Row="1" ...

  9. 计时 答题 demo

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  10. Javase之object类的概述

    object类的概述 object类是类层次结构的根类,每个类都使用object作为超类. 即每个类都直接或间接的继承object类. object类中方法介绍 hashCode public int ...