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. 解决VS2010中winsock.h与winsock2.h冲突(重复定义)——转载

    解决VS2010中winsock.h与winsock2.h冲突(重复定义)——转载 当这两个头文件顺序颠倒时,编译会出现许多莫名其妙的错误,错误如下: 1>…\include\ws2def.h( ...

  2. selenium 百度登陆

    using System;using OpenQA.Selenium;using OpenQA.Selenium.Firefox;//引用命名空间using System.IO; using Syst ...

  3. HUD1862:EXCEL排序

    Problem Description Excel可以对一组纪录按任意指定列排序.现请你编写程序实现类似功能.   Input 测试输入包含若干测试用例.每个测试用例的第1行包含两个整数 N (< ...

  4. 轻松创建nodejs服务器（1）：一个简单nodejs服务器例子

    这篇文章主要介绍了一个简单nodejs服务器例子,本文实现了一个简单的hello world例子,并展示如何运行这个服务器,需要的朋友可以参考下   我们先来实现一个简单的例子,hello world ...

  5. AngularJs多重视图和路由的使用

    使用AngularJs来做多重视图和路由是在方便不过了,在开发过程中,都有许多的页面,而这些页面都有相同的部分,比如页面的头部和尾部通常都是一样的,变化的都是主体部分,还有就是一些后端管理的一些项目, ...

  6. 简单Spring和mybatis整合配置文件

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  7. httpclient调用方法

    /**  * GET请求  *   * @param url  *            请求url,参数拼在请求串中  */ public static String get(String url) ...

  8. java web服务器tomcat介绍【转载】

    机器矩阵2016-08-10 22:14 java程序员亲切地称他为tom猫,看到这只猫可以说明1 服务器部署成功了 ,2 网络是联通的. 到底这只猫是什么来头呢? tomcat是Apache基金会下 ...

  9. 二分 Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) D

    http://codeforces.com/contest/722/problem/D 题目大意:给你一个没有重复元素的Y集合,再给你一个没有重复元素X集合,X集合有如下操作 ①挑选某个元素*2 ②某 ...

  10. Spring AOP面向切面编程的实现

    1.涉及到的几个概念 切面类.被切对象.切入点.切入时间.切入内容:(自己命的名,好理解点) 2.看配置文件 <?xml version="1.0" encoding=&qu ...