【前端开发系列】—— 利用选择器添加内容

  上文讲到了CSS3的选择器,通过after和before选择器,在元素前后添加内容。

  也可以通过变量来实现自定义的标题

1     h1:before{
2             content:'第'counter(mycounter)'章';
3             color:red;
4             font-size:30px;
5         }
6         h1{
7             counter-increment:mycounter;
8         }

代码样例

<html>
<head>
    <style type="text/css">
        h1:before{
            content:'第'counter(mycounter)'章';
            color:red;
            font-size:30px;
        }
        h1{
            counter-increment:mycounter;
        }
        p:before{
            content:open-quote;
        }
        p:after{
            content:close-quote;
        }
        p{
            quotes:"("")";
        }
    </style>
</head>
<body>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
</body>
</html>

实现样例

本文转自博客园xingoo的博客,原文链接:【前端开发系列】—— 利用选择器添加内容,如需转载请自行联系原博主。

时间: 2024-10-04 19:40:09

【前端开发系列】—— 利用选择器添加内容的相关文章

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页. CSS3属性选择器 下面是CSS3的属性选择器的语法,及使用. 元素名字[元素类型="类型名字"]:选择器名字{ 属性:值: 属性:值: } 在元素类型匹配时,就可以使用类似正则的匹配

【前端开发系列】—— 文字阴影与样式

id与class的区别 id是这个界面唯一的元素,标识某个特定的容器,比如div等等.而class是一种样式,可以应用与多个div. 另外他们在配置CSS也是不同的: id: div#test1{ ... } class: div.test2{ } text-shadow 为字体属性添加样式阴影 word-break 一段文字自动换行 normal:默认样式 keep-all:不分割单词 break-all:可以分割单词 @font-face字体属性 font-family:字体 font-si

【前端开发系列】—— 别说你不会Ajax

之前一直都是用封装好的Ajax,所以一直很好奇它是如何使用和实现的.这里正好就进行一下学习,下面是Ajax的一个时间图. 设置触发条件 这里模拟一个使用场景,就是在用户登陆时,异步的对用户名以及密码进行验证.所以使用onBlur()触发,onBlur函数在输入框焦点遗失时,就会触发. 1 <form name="loginForm"> 2 <table> 3 <tr> 4 <td>用戶名:<input type="text

【前端开发系列】—— 通过鼠标浮动改变样式

这个简单的demo,可以应用到很多地方.比如导航鼠标移动到上方时,可以改变样式,或者触发下拉框,等等.很有意思 1 <html> 2 <head> 3 <style type="text/css"> 4 .red { 5 color:red; 6 font-size: 32; 7 font-style: italic; 8 } 9 .blue { 10 color: blue; 11 font-size: 25; 12 } 13 .black { 1

利用Angularjs和Bootstrap前端开发案例实战_javascript技巧

我们将利用Angularjs 和 Bootstrap,开发一个前端应用实例,通过这一次简单的项目实战,引领大家进入AngularJS前端开发的殿堂,并向大家介绍一下几个知识点:  1.MVC 基础,通过项目实例,让大家初步体会MVC设计模式的应用.  2.构建我们第一个AngularJS应用,通过一个实际用例的开发,大家可以对前端开发获得一定的感性认识.  3.初步了解AngularJS三个最重要的组成部件,他们分别是Model, View, 和Controller.  4.初步了解Angula

《Web前端开发最佳实践》——3.7 添加必要的&lt; meta&gt;标签

3.7 添加必要的< meta>标签 < meta >标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,如简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. 按照W3C的标准介绍,< meta>元素有4个属性:name.http-equiv.content和charset.< meta>标签通过name属性来表述页面文档的元信息,通过http-equiv属性设置HTTP请求

web前端 ajax ....-web前端 点击添加按钮在另一页面显示添加内容

问题描述 web前端 点击添加按钮在另一页面显示添加内容 我想请问一下 恩么实现:在添加页面添加用户信息 点击确定添加按钮之后 在另一个页面的表格中显示添加的用户信息呢? 解决方案 request对象会有这功能.application也有 解决方案二: 添加页面和显示页面什么关系?没有关系显示页面只能ajax轮训或者高级点的就是websocket,有关系看这个 iframe和父页,window.open打开页面之间的引用 解决方案三: 主要是看那个页面和当前的关系,,找到后就可以了

使用asp.net开发移动web的时候,如何在&amp;amp;lt;head&amp;amp;gt;节点里添加内容?

问题描述 小弟现在正在使用asp.net的移动web窗体和移动控件开发一个wap网站,现在发现在移动web窗体的<head>节点里写入东西,包括<linkhref-->和<meta>,结果在访问的时候并没有作为html输出到浏览器端.请问如何web移动窗体中才能在<head>里添加内容?这两天都被这个问题搞郁闷了. 解决方案 解决方案二:补充一下,比如aspx页面如下:<%@PageLanguage="C#"AutoEventWir

《HTML5开发手册》——2.9 中级“菜谱”:利用Microdata添加语义信息

2.9 中级"菜谱":利用Microdata添加语义信息 Microdata规范为开发者带来了给某些内容添加标签的功能.从计算机看来,这些内容变得更友善.更易于理解.理论上,像Google这样的"机器"能够借助于Microdata返回更加准确的页面信息. 读者可以将Microdata视为某种自定义的元素.你可以使用它为商业.人.产品.事件等添加标签.由于不存在book元素,你可以为现存的元素添加Microdata属性来表示书籍. Microdata包含5个属性:it