HTML连载25-通配符选择器&选择器综合练习
一、通配符选择器
作用：给当前页面上所有的标签设置属性
（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-通配符选择器&选择器综合练习的更多相关文章
- JavaScript框架设计(四) 字符串选择器(选择器模块结束)
JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...
- HTML+css基础 css选择器 选择器的权重
css选择器 选择器的权重 在css中,哪个选择器的权重高,就走谁的样式 标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !imp ...
- 前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)
目录 CSS(Cascading Style Sheet) CSS注释 CSS语法结构 CSS的三种引入方式 选择器 伪类.伪元素选择器速查 CSS选择器优先级***** 选择器相同的情况下 选择器不 ...
- css选择器的综合使用
代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf ...
- jquery可见性选择器（综合）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery选择器（综合）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- jQuery选择器之全选择器(*选择器)
在css中,经常会在第一行写下这样一段样式: * { margin:; padding:; } 通配符*意味着给所有的元素设置默认的边距.jQuery中我们也可以通过传递*选择器来选中文档页面中的元素 ...
- CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
随机推荐
- css的伪元素 ::after ::before 和 图标字体的使用
浅谈css的伪元素::after和::before css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...
- LeetCode 599: 两个列表的最小索引总和 Minimum Index Sum of Two Lists
题目: 假设 Andy 和 Doris 想在晚餐时选择一家餐厅,并且他们都有一个表示最喜爱餐厅的列表,每个餐厅的名字用字符串表示. Suppose Andy and Doris want to cho ...
- vue中的父子组件相互调用
vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...
- Java中Set与Set<?>到底区别在哪？
您可能知道,无界通配符 Set<?> 可以容纳任何类型的元素,而原始类型Set也可以容纳任何类型的元素.那它们之间有什么区别呢? 1.关于Set<?>的两个事实 关于Set&l ...
- .NET Core CSharp初级篇 1-2 循环与判断
.NET Core CSharp初级篇 1-2 本节内容循环与判断 循环 循环是一个在任何语言都是极为重要的语法,它可以用于很多东西,例如迭代数组等等.在C#中,语法层面的循环有:for , fore ...
- 资深程序员：学Python我推荐你用这几款编辑器
Python使用什么编辑比较好,Python编辑器推荐 各位 Pythoner 好啊!在这个烦躁的时代,相聚就是缘分,很高兴各位 Pythoner 能相聚于此,希望接下来的路,我们一起走下去,使用 P ...
- Python笔记：设计模式之模板方法模式
此模式通过一个模板方法来定义程序的框架或算法,通常模板方法定义在基类中,即原始的模板,然后子类就可以根据不同的需要实现或重写模板方法中的某些算法步骤或者框架的某部分,最后达到使用相同模板实现不同功能的 ...
- python BeautifulSoup 爬虫运行出现 exited with code -1073741571
首先,exited with code -1073741571意思是栈溢出.具体可以看https://blog.csdn.net/vblittleboy/article/details/6613815 ...
- VMWare虚拟机应用介绍
目录 一:VMWare简介 二:VMWare启动第一个虚拟机 一:VMWare简介 VMWare虚拟机软件是一个"虚拟PC"软件,它使你可以在一台机器上同时运行二个或更多Win ...
- 1041. Robot Bounded In Circle
本题题意: 一开始一个机器人站在了(0,0)上,面朝的方向是北,收到三个序列G,L,R. G:直走 L:向左转 R:向右转 按序执行,永远重复. 返回TRUE,如果处在一个圈. 第一个卡住的点: 1. ...