如何给css样式加上父节点?
在网上找到一个灰常好看的html模版,很可惜它自带了很多css样式,为了防止冲突,你需要一行一行的去改css样式,给它添加上父亲节点,并且改动css的选择器。工作量太大有木有啊。 这个代码可以给css添加上父亲节点。有效的防止了css冲突。
注意2点:
1. css文件中需要手动去掉注释,该功能没有写了。有兴趣的可以将代码补全
2. 最好在每个选择器的 ”{“ 换行,该代码没有写,有兴趣可以自己补全
比如:
#div1{ color : red; } 改成 #div1{ color:red; }
package test.css; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import java.io.FileWriter; import org.junit.Test; /** * 给所有的css样式加上父节点 * * @author Van * @time 20150312 */ public class ChangeCss { private static String tagName = "#footOuter "; private static String inPath = "D:\\workspaceluna\\GGBlog\\src\\main\\webapp\\resources\\plugins\\footer\\style.css"; private static String outPath = "D:\\workspaceluna\\GGBlog\\src\\main\\webapp\\resources\\plugins\\footer\\style1.css"; @Test public void cssTest() throws Exception{ //输入 BufferedReader in = new BufferedReader(new FileReader(inPath)); //删除旧文件 File file = new File(outPath); file.delete(); //创建输出流 FileWriter fw = new FileWriter(outPath); int lineTotal = 0; String temp; while( (temp = in.readLine()) != null ){ lineTotal++; StringBuilder sbder; //跳过空行 if(isEmpty(temp)){ continue; } //跳过@开头的行 if(temp.contains("@")){ fw.write(temp+"\r\n"); continue; } //对有逗号和没有分号的行加标签 if(temp.contains(",") && !temp.contains(";")){ sbder = new StringBuilder(); String _temp[] = temp.split(","); for(String _eveString : _temp){ //加上父节点 sbder.append( tagName + _eveString); if(_eveString.contains("{") || _eveString.contains("}")) continue; sbder.append(","); } fw.write(sbder+"\r\n"); continue; } //对有花括号和逗号的行进行处理 if(temp.contains("\\{")){ if(temp.contains(",")){ sbder = new StringBuilder(); temp = temp.split("\\{")[0]; String _temp[] = temp.split(","); for(int i=0;i<_temp.length;i++){ //加上父节点 sbder.append( tagName + _temp[i]); if(i==_temp.length-1) break; sbder.append(","); } sbder.append(temp.split("\\{")[1]); fw.write(sbder+"\r\n"); continue; } } //对有花括号的行进行处理 if(temp.contains("{")){ sbder = new StringBuilder(); sbder.append(tagName + temp); fw.write(sbder+"\r\n"); continue; } fw.write(temp+"\r\n"); } System.out.println(lineTotal); in.close(); fw.close(); } private boolean isEmpty(String value){ if(value.isEmpty()) return true; if(value.matches("^\\s+$")) return true; return false; } }
以上是如何给css样式加上父节点?的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

在 Vue.js 中使用 Bootstrap 分为五个步骤:安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选:自定义样式。可选:使用插件。

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

创建 Bootstrap 分割线有两种方法:使用 标签,可创建水平分割线。使用 CSS border 属性,可创建自定义样式的分割线。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

要设置 Bootstrap 框架,需要按照以下步骤:1. 通过 CDN 引用 Bootstrap 文件;2. 下载文件并将其托管在自己的服务器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根据需要编译 Sass/Less;5. 导入定制文件(可选)。设置完成后,即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

在 Bootstrap 中插入图片有以下几种方法:直接插入图片,使用 HTML 的 img 标签。使用 Bootstrap 图像组件,可以提供响应式图片和更多样式。设置图片大小,使用 img-fluid 类可以使图片自适应。设置边框,使用 img-bordered 类。设置圆角,使用 img-rounded 类。设置阴影,使用 shadow 类。调整图片大小和位置,使用 CSS 样式。使用背景图片,使用 background-image CSS 属性。

如何使用 Bootstrap 按钮?引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

要调整 Bootstrap 中元素大小,可以使用尺寸类,具体包括:调整宽度:.col-、.w-、.mw-调整高度:.h-、.min-h-、.max-h-
