HTML选择器

HTML选择器
1、标签选择器
直接将HTML元素中的标签作为选择器,可以是p、h1、d1、strong等HTML标签,在CSS中直接展现。
2、ID选择器
通常在编写页面的时候设定某些标签元素的ID,同一个HTML中ID不允许重复,例如,<div id="wrapper">,后来使用的时候就用#wrapper,这里的”#wrapper“就是ID选择器,在CSS中以”#“开头。
3、类选择器
CSS里面用”.“开头的表示类选择器,如有如下的CSS代码

.error{
color:red;
font-size:14px;
}

在页面HTML的代码中,使用class="类别名"进行调用

<span class="error">错误信息以红色显示</span>

注意:类选择器和ID选择器比较类似,都是通过HTML元素添加属性而生效的,可应用在<body>内的任何元素上,不过和ID选择器不同的是,类选择器是可以重复的。例如可以像下面的代码这样设定:

<div class="error">用户名不存在!</div>
<p class="error">邮箱格式不正确!</p>

也可以针对不同类型的元素对同一个名称的类选择器设定不同的样式规则,即使是相同名称的类选择器,也可以有不同的表现。例如,对于上面的HTML代码,可以修改CSS规则如下:

div.error{
color:red;
font-size:14px;
}p.error{
color:green;
font-size:14px;
}

4、后代选择器

<h3>外部</h3><div id="sider"><h3>内部</h3><ul><li>列表1</li><li>列表2</li><li>列表3</li></ul></div>

在这里,可以定义如下的CSS样式,就可以实现分层调用

h3 {color:green;}
#sider h3 {color:red;}
#sider ul {color:red;}
#sider ul li{color:red;}

5、子元素选择器

CSS样式设定如下:

div > em {color:red;}

HTML代码如下:

<div>
<em>这个em是div中的元素</em>
<p>p中的<em>是p的子元素</p>
</div>    

显示效果为第一个<em>标签显示红色,而第二个<em>标签的子元素将不会应用此样式。

6、相邻兄弟选择器
表示样式应用于与该元素相邻的下一个元素

div +p{color:red;}

HTML代码如下:

<p>与div相邻的上一个p</p>
<div>
<p>div中的p</p>
</div>
<p>与div相邻的下一个p</p>
<p>不与div相邻的p</p>

只有与div相邻的下一个p才会应用此样式

 

 

转载于:https://www.cnblogs.com/shudonghe/archive/2013/01/12/2857688.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/494425.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【每日SQL打卡】​​​​​​​​​​​​​​​DAY 13丨每位学生的最高成绩【难度中等】

活动介绍&#xff1a; 「数据仓库技术交流群」已经正式启动每日SQL打卡&#xff0c;帮助大家扎实基础&#xff0c;努力工作之余&#xff0c;别忘了自我提升。另有超多CSDN 周边礼物相送。 欢迎报名和邀请小伙伴参与&#xff0c;一个人可能走得很快&#xff0c;但一群人会走得很…

语言处理想突破,三座大山必须过

来源&#xff1a;大数据文摘编译&#xff1a;李佳、汤圆、钱天培“我的飞机什么时候到&#xff1f;”把这个问题抛给智能机器人助手。几乎可以肯定&#xff0c;机器立马就懵逼了。“我”是谁&#xff1f;“飞机”是航班还是淘宝上订的模型玩具呢&#xff1f;“到”又是到哪呢&a…

利用github page搭建博客

为什么选择GitHub Pages&#xff1f; 很多人用 wordpress&#xff0c;你为什么要用 github pages 来搭建&#xff1f; 1、github pages有300M免费空间&#xff0c;资料自己管理&#xff0c;保存可靠&#xff1b; 2、学着用 github&#xff0c;享受 github 的便利&#xff0c…

C语言中printf(built: %s %s,__TIME__,__DATE__);方便调试

代码中加入printf("built: %s %s",__TIME__,__DATE__);这样就可以了;后面将显示最后编译的时间。 这样可以知道自己改的代码是否生效&#xff0c;是否编译进去。转载于:https://www.cnblogs.com/jisheng/archive/2013/01/15/2860706.html

CSDN每日打卡已经2周,进展如何?(送两个CSDN背包)

&#x1f345; 作者主页&#xff1a;不吃西红柿 &#x1f345; 简介&#xff1a;CSDN博客专家 & 总榜前十&#x1f3c6;、HDZ核心组成员。欢迎点赞、收藏、评论 &#x1f345; 粉丝专属福利&#xff1a;知识体系、面试题库、技术互助、简历模板。文末公众号领取 点赞评论 …

WordPress环境配置与安装

要安装wordpress,要安装apache,php,mysql,还要进行一系列复杂的配置&#xff0c;较为复杂。 apache安装 php5.5.6 下载链接&#xff1a;http://windows.php.net/download/#php-5.5 推荐 V11 x64&#xff0c;也就是64bit的 apache2.4&#xff0c;下载链接&#xff1a;http:/…

趋势 | 人工智能领域十大最具成长性技术展望

来源&#xff1a;搜狐日前&#xff0c;在2018世界机器人大会基础技术与创新论坛中&#xff0c;中国电子学会发布了《新一代人工智能十大成长性技术展望》。经调研走访了一批在新一代人工智能技术及产业方面具备领先水平和特色的龙头企业&#xff0c;拜访了来自于知名高校、研究…

CTex + Texmaker

CTex 套装提供了一个Latex编译环境和相关的库&#xff0c;最大的优点是自动部署&#xff0c;直接就可以用。但是CTex自带的WinEdt和开源的Texmaker比起来在设计方面显得比较粗陋&#xff0c;影响工作效率。 Texmaker 本身只是一个前台软件&#xff0c;但是设计精良。如果已经安…

【每日SQL打卡】​​​​​​​​​​​​​​​DAY 14丨报告的记录 I【难度简单】

活动介绍&#xff1a; 「数据仓库技术交流群」已经正式启动每日SQL打卡&#xff0c;帮助大家扎实基础&#xff0c;努力工作之余&#xff0c;别忘了自我提升。另有超多CSDN 周边礼物相送。 欢迎报名和邀请小伙伴参与&#xff0c;一个人可能走得很快&#xff0c;但一群人会走得很…

android之phonegap入门

利用phoneGap可以利用HTML开发安卓应用&#xff0c;是web app的一种&#xff0c;可以有效的提高开发效率&#xff0c;降低开发成本 。 第一步&#xff1a; 开发环境配置以及基本操作请参考其它文档. 新增一个名为 phoneGap 的android项目,将主activity命名为:PhoneGapActivi…

java获得项目绝对路径

在jsp和class文件中调用的相对路径不同。 在jsp里&#xff0c;根目录是WebRoot 在class文件中&#xff0c;根目录是WebRoot/WEB-INF/classes 当然你也可以用System.getProperty("user.dir")获取你工程的绝对路径。 1.jsp中取得路径&#xff1a;以工程名为TEST为例&am…

全球第二家 亚马逊“喜提”万亿美金市值 AI或是最大功臣

亚马逊创始人杰夫贝佐斯&#xff08;Jeff Bezos&#xff09;来源&#xff1a;网易智能摘要&#xff1a;9月5日消息&#xff0c;美国当地时间周二&#xff0c;全球电商巨头亚马逊(Amazon)股价一度触及史上最高点&#xff0c;促使亚马逊市值短暂达到1万亿美元。不过&#xff0c;在…

【每日SQL打卡】​​​​​​​​​​​​​​​DAY 14丨重新格式化部门表【难度中等】

活动介绍&#xff1a; 「数据仓库技术交流群」已经正式启动每日SQL打卡&#xff0c;帮助大家扎实基础&#xff0c;努力工作之余&#xff0c;别忘了自我提升。另有超多CSDN 周边礼物相送。 欢迎报名和邀请小伙伴参与&#xff0c;一个人可能走得很快&#xff0c;但一群人会走得很…

Android之webView入门

WebView可以使得网页轻松的内嵌到app里&#xff0c;还可以直接跟js相互调用。 webview有两个方法&#xff1a;setWebChromeClient 和 setWebClient setWebClient&#xff1a;主要处理解析&#xff0c;渲染网页等浏览器做的事情 setWebChromeClient&#xff1a;辅助WebView处…

APL开发日志--2013-01-17

以后作者在博客上在专栏记录 APL每天开发日志, 以记录APL最新进展. 2013-01-17 APL开发日志: -------------------------------------------------------------------------------------------------------- 1. 增加API: getAplPublicPath() ; // 获得APL公共路径 setAplPubli…

【每日SQL打卡】​​​​​​​​​​​​​​​DAY 15丨查询活跃业务【难度中等】

活动介绍&#xff1a; 「数据仓库技术交流群」已经正式启动每日SQL打卡&#xff0c;帮助大家扎实基础&#xff0c;努力工作之余&#xff0c;别忘了自我提升。另有超多CSDN 周边礼物相送。 欢迎报名和邀请小伙伴参与&#xff0c;一个人可能走得很快&#xff0c;但一群人会走得很…

苹果/三星/华为纷纷布局人工智能 将AI作为公司发展新动力

来源&#xff1a;手机报在线摘要&#xff1a; 目前&#xff0c;以苹果、三星和华为为代表的手机厂商除了继续探索人脸识别、屏下指纹和柔性显示屏等技术外&#xff0c;也将目标瞄向了人工智能&#xff0c;纷纷将“AI拍照”、“AI芯片”等作为营销热门话题&#xff0c;并通过大力…

Android之Activity框架

在安卓应用中&#xff0c;经常需要Activity中经常需要有大量相似的Activity类&#xff0c;这些类往往有相似的结构与功能&#xff0c;因此产生了大量重复代码&#xff0c;为此&#xff0c;以下提供一种方法有效的降低了代码冗余。 定义Activity工具类 * 应用程序Activity…

POJ-1260 Pearls DP

题目链接&#xff1a;http://poj.org/problem?id1260 基本DP&#xff0c;只要证明最优解中不会有交叉替换&#xff0c;得出转移方程&#xff1a;f[i]min{f[j](a[j1]..a[i]10)*p[i]}。由(ai10)*bi(aj10)*bj(aiaj10)*bj > (ai10)*biai*bj 替换> t*biai*bj 可证。 1 …

【每日SQL打卡】​​​​​​​​​​​​​​​DAY 15丨用户购买平台【难度困难】

活动介绍&#xff1a; 「数据仓库技术交流群」已经正式启动每日SQL打卡&#xff0c;帮助大家扎实基础&#xff0c;努力工作之余&#xff0c;别忘了自我提升。另有超多CSDN 周边礼物相送。 欢迎报名和邀请小伙伴参与&#xff0c;一个人可能走得很快&#xff0c;但一群人会走得很…