id可以换为class,class对应的名字可以多个一样

<div class="box">box1</div>

<div class="box">box2</div>

<div class="box">box3</div>

改变样式的时候

。box{}就改为一致的效果

<div class="box">box1</div>

<p class="box">box2 /p>

<div class="box">box3</div>

改变样式的时候也可以是:

div{}

p{}分别改变div的样式和p的样式。

当有包含的关系的时候如下

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#box p{width:100px;height:100px;background:red;}
p{width:100px;background:blue;}
/*
包含选择器
box下面的p标签
*/
</style>
</head>
<body>
<div id="box">
<p>p1</p>
</div>
<p>p2</p>
</body>
</html>

#box p{}表示box下面的p标签改变样式。注意注意注意:box要空格

标签(改变样式style)的更多相关文章

  1. jQuery实现单击某个标签改变样式

    1.HTML代码,如下图: <p class="sc_member_recharge_form"> <span class="selected" ...

  2. 用JS改变页面中b标签的样式啊 样式的等

    用JS改变页面中b标签的样式啊 样式的等    ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...

  3. Html中<a>标签的样式的设置

    html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...

  4. CSS_简介/语法结构/长度单位/应用方式/标签的样式重置/表单样式重置

    一.CSS简介:  w3c(World Wide Web Consortium):万维网联盟,是规定网页标准的一个组织(叫做Web标准) Web标准:是由w3c和其他标准化组织制定的一系列标准的集合, ...

  5. H5 音频标签自定义样式修改以及添加播放控制事件

    说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...

  6. input file 文件上传标签的样式美化

    input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...

  7. HTML 样式 (style) 实例

    77.HTML 样式 (style) 实例HTML 的 style 属性style 属性的作用: 提供了一种改变所有 HTML 元素的样式的通用方法. 样式是 HTML 4 引入的,它是一种新的首选的 ...

  8. 微信小程序,动态改变样式

    小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...

  9. H5 <audio> 音频标签自定义样式修改以及添加播放控制事件

    H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...

随机推荐

  1. java字符串格式化

    转自:JAVA字符串格式化-String.format()的使用(转) 常规类型的格式化 String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语 ...

  2. CSS3秘笈:第四章

    第四章  继承 1.继承:应用在一个标签上的CSS样式被传到其内嵌标签上的过程. 2.继承的局限性: (1)有些属性不会被继承,如:CSS. (2)以下情况不会严格执行继承: ·影响网页元素位置的属性 ...

  3. 递归解析任意层的json

    package com.sun.test; import java.util.Iterator; import net.sf.json.JSONArray;import net.sf.json.JSO ...

  4. 通过纯Java代码从excle中读取数据(为.xlsx文件)

    参考链接: 程序代码: package demo; import java.io.File; import java.io.IOException; import java.io.InputStrea ...

  5. Spring Security-用户密码自定义加密

    public class SunPasswordEncoder implements PasswordEncoder{ //@实现加密的方法,既将明文转换为密文的方法 public String en ...

  6. json解析尖括号<>

    如题 rs.getString("HEADLINE").replaceAll("<", " <").replaceAll(&qu ...

  7. Entity Framework 学习中级篇2—存储过程(上)

    目前,EF对存储过程的支持并不完善.存在以下问题: l         EF不支持存储过程返回多表联合查询的结果集. l         EF仅支持返回返回某个表的全部字段,以便转换成对应的实体.无法 ...

  8. MFC下对串口的操作以及定时器的调用

    最近研究了一下MFC下对串口的操作,测试了一下对设备的读写. 1.打开串口 GetDlgItem(IDC_BUTTON_OPEN)->EnableWindow(FALSE); m_hComm = ...

  9. ionic中 .col : 默认的定宽列

    .col : 默认的定宽列 在ionic的栅格中,每一行的各列默认是等宽的,这使得实现一个图片 浏览界面非常简单.下图是instagram app的截图: instagram <!DOCTYPE ...

  10. 一篇非常适合git入门的文章

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137583770360579 ...