一、通配符选择器

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

(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教程 HTML5和HTML的关系

    HTML5开发现在很火爆,是一门技术,更是一个概念.可以让我们的工作模式.交互模式以及对应用和游戏的体验有了翻天覆地的变化,很多人都知道HTML5这门技术,也常把HTML5读作H5(简称).其实一些外 ...

  2. Alpine Linux 安装 lxml Pillow 失败

    lixm 需要编译安装,因此需要先安装gcc g++ RUN apk add --update --no-cache g++ gcc libxslt-dev python3-dev openssl-d ...

  3. win10 关闭 “在时间线中查看更多日期” 提示

    在组策略中,禁用允许上传用户活动

  4. MySQL UNION 查询

    UNION 用来合并多个 SELECT 结果. 考察如下两个表: # t1 +----+---------+ | id | pattern | +----+---------+ | 1 | Divot ...

  5. C#数组1

    using System; namespace ConsoleApp3 { class Program { static void Main(string[] args) { , , , , , }; ...

  6. 关于ScriptManager.RegisterStartupScript 摘录

    //ScriptManager.RegisterStartupScript 方法 (Control, Type, String, String, Boolean) public static void ...

  7. AllowsTransparency="True" 怎么放大缩小窗体

    后台都不用写任何代码! xaml: <Window x:Class="TestNoBorderWindow"         xmlns="http://schem ...

  8. sed文本处理

    1.基本概述 sed是一个流编辑器, 非交互式的编辑器,它一次处理一行内容. 处理时,把当前处理的行存储在临时缓冲区中,称* 为"模式空间"(pattern space) 接着用 ...

  9. MYSQL 复制整个数据库

    同一个服务器 mysqldump old -u root -p123456  | mysql new -u root -p123456 不同服务器(在源数据库服务器上执行) mysqldump old ...

  10. 告诉你如何在Xcode中安装炫酷的插件!!!!!

    (如果你已经有了自己喜欢的插件,你可以直接找到该插件的下载地址,下载下来,参照下面的步骤来安装到Xcode工程之中) 如果还没有找到自己想要的插件,那么推荐你在开源中国社区http://www.osc ...