CSS3 使用选择器在页面插入内容

使用选择器来插入文字 h2:before{ content:'COLUMN'; color:white: background-color:orange: padding:1px 5px; } 注意点: 使用content插入的内容要打单引号或双引号可以对插入的内容设置样式对个别元素不进行插入 h2.sample.before{ content:none: } h2.sample.before{ content:normal: } --表示h2中class为sample的不插入内容-- no…

CSS3系列一（概述、选择器、使用选择器插入内容）

CSS3模块化结构 CSS历史发展 CSS(Cascading Style Sheet),层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. CSS3属性选择器 E[attr=val]表示具有属性att且其值等于val E[attr*=val]表示具有属性attr且其值中包含val E[attr^=val]表示具有属性attr且其值以val开头 E[attr$=val]表示具有属性attr且其值以val结尾事实上除了以上四个之外还有俩用的相对比较少的属性选择器,那就…

css3在页面中插入内容

A．使用选择器来插入内容 h2:before{ content:"前缀"; } h2:after{ content:"后缀"; } B．指定个别的元素不进行插入 h2.sample:before{ content:none; } 2. 插入图像 A．在标题前插入图像文件 h2:before{ content:url(anwy.jpg); } B．将alt属性的值作为图像的标题来显示(用不了) img:after{ content:attr(alt); dis…

jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩小等动画特效.使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果. 基本用法 $('.smoove').smoove(options); 上面的代码会在class为 smoove 的元素上使用默认参数初始化 jQuery Smoove. 你可以通过dat…

基于jQ+CSS3页面滚动内容元素动画特效

今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览源码下载实现的代码. html代码: <div class="htmleaf-container"> <div class="container"> <h2 class…

CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素

# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12看不到,::selection 只是给E添加了css样式) ::aftet/:after ? 伪元素(F12看到,添加了新结点 ::after 结点) :first-child 伪类(.class)(F12看不到,只是给E添加了css样式或 Jquery的js) */ /* CSS3伪元素/伪类…

jq prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $(".122"…

CSS3常用选择器（一）

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.比如最常用到的#id,.class,标签选择器. 随着CSS3到来,增加了很多新型选择器,这里就常用的做一个总结. 1.属性选择器. 在css3中,追加了三个属性选择器,分别为[attribute*=value],[attribute^=value],[attribute$=value],使选择器有了通配符的概念.这三个选择器分别是包含,首字符,结束字符. 举个栗子: a[src*="abc"]表示选择其 src 属性中包含…

CSS3属性选择器与(:not)选择器

一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代码: img[alt="atwi_oscar"]{ border:2px dashed #000; } css3的子字符串匹配属性选择器 (1)‘匹配开头’的属性选择器依法如下: Element[attribute^="value"],实例代码如下: img[a…

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

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

CSS3 教程选择器标记一下防止要找时404

客 » Airen的博客 CSS3 选择器——基本选择器作者:大漠日期:2011-08-09 点击:6418  CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别,从头一起来看看CSS选择器的运用. CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要…

CSS系列：CSS3新增选择器

1. CSS1定义的选择器选择器类型说明 E 类型选择器选择指定类型的元素 E#id ID选择器选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略. E F 包含选择器选择匹配F的元素,且该元素被包含在匹配E的元素内. E:link 链接伪类选择器选择匹配E的元素,且匹配元素被定义了超链接并未被访问.例:a:link E:visited 链接伪类选择器选择匹配…

CSS3 ::selection选择器

一.介绍之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> .selectColor::selection{color:#fff;background:pink;} .selectColor::-moz-selection{color:#fff;background:pink;} .selectColor::-webkit-selection{color:#fff;…

CSS3学习----选择器、字体

属性选择器: [att*=val]{}若att元素属性值包括val指定字符,则使用该样式 [att^=val]{}若att元素属性值开头字符为val,则使用该样式 [att&=val]{}若att元素属性值结尾字符为val,则使用该样式例: <style type="text/css"> [id^=section1]{ background-color: yellow; } </style> <div id="section2&q…

CSS3选择器02—CSS3部分选择器

该部分主要为CSS3新增的选择器接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color:#00FF00; } 二.属性选择器: 25:E[att ^= val],匹配属性att的值以”val“开头的元素. [id ^= start]{ background-color:red; ] /*匹配以id属性的值为start开头的,如id="start1",id="sta…

CSS选择器及CSS3新增选择器

转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器选择器类型说明 E 类型选择器选择指定类型的元素 E#id ID选择器选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略. E F 包含选择器选择匹配F的元素,且该元素被包含在匹配E的元素内. E:link 链接伪类选择器选择匹配E的元素…

CSS3 新增选择器

CSS3 新增选择器结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型 :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数. n 可以是数字.关键词或公式 li:first-child { /* 选择第一…

CSS3–1.css3 新增选择器

1.后代级别选择器 2.同辈级别选择器 3.伪类选择器 4.属性选择器 5.UI伪类选择器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &…

使用HTML5的JS选择器操作页面中的元素

文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用HTML5的JS选择器操作页面中的元素</title> 6 </head> 7 <body> 8 &…

【CSS3】选择器

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1 class="c…

认识CSS3新增选择器和样式

前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的最后一个子元素的指定选择器 :nth-child(n):选取父元素中的第n个子元素的指定选择器,n取小于等于子元素个数的正整数.当n取n值表示选取父元素中所有子元素:n取2n表示选取父元素中所有偶数的子元素,等同于:nth-child(odd):n取2n+1表示选取父元素中所有奇数的子元素,等同于:…

使用HTML5的JavaScript选择器操作页面中的元素

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>使用HTML5的JavaScript选择器操作页面中的元素</title> </head><body> <div>  <h2>…

CSS3：选择器

CSS选择器的作用是找出某类元素,以便我们使用style元素或者外部样式表对这类元素设置样式. 基本选择器选择器含义演示样例描写叙述 * 选择全部元素 * { border: thin black solid; padding: 4px } 选择全部元素 <元素类型> 选取一个文档中该元素的全部实例 a { border: thin black solid; padding: 4px } 选择a元素 .<类名>(或 *.<类名>) 指定全局属性class为指定类…

向ueditor中插入内容

html在ueditor中插入内容不能直接插入,必须判断编辑器是否创建成功,jsp可以用java代码嵌套的方式. html页面中:<textarea id="zym" name="zym" style="width:100%;height:100px;"></textarea> js代码: //判断ueditor 编辑器是否创建成功UE.getEditor('zym').addListener("ready&qu…

CSS3新增选择器：伪元素选择器

一. ::first-letter 第一个字二. ::first-line 第一行(以浏览器为准的第一行) 三. ::selection 被选中的字行(鼠标选中的字段)只能向 ::selection 选择器应用少量 CSS 属性:color.background.cursor 以及 outline. <body> <p>微软的 Internet Explorer(IE) 是当今最流行的因特网浏览器.它发布于 1995 年,并于 1998 年在使用人数上超过了 Netscape.…

css3的选择器有哪几种？

*通用选择器,ID选择器 ,.类选择器class,标签选择器,标签组合选择器,伪类选择器:,+相邻元素选择器,>子元素选择器,~同辈选择器,x[title]属性选择器[type="button"],x[href^="http"]匹配以href值为http打头的地址,x[href$=".jpg"]匹配所有的图片链接input[type=checkbox]:checked{};选择checkbox为当前选中的那个标签. 伪类选择器 ------…

css3的选择器

先来做一下准备工作页面的效果: 看到上面的框框了吗?我们就是通过给这些框框添加背景色的方式,来让大家,了解css3的选择器的效果,下面正式开始: 关联选择器 E1~E2 选择 E1 后面的兄弟 E2. 页面效果: 选择除了第一个 p 元素之外,后面所有的 p 元素,即使中间隔着一个 div 标签,也能被选中,背景色变成蓝色. 属性选择器新增 [^=" " ] 选中以...开头的元素 [$=" " ] 选中以...结束的元素 [*=" " ] 包…

CSS3 新添选择器

目录属性选择器结构伪类选择器伪元素选择器属性选择器属性选择器可以元素特定属性来进行选择,这样就可以不借助于类选择器或id选择器选择符简述 E[att] 选择具有att属性的E元素 E[att="val"]orE[att=val] 选择具有att属性且属性值为val的E元素 E[att="val"]orE[att=val] 选择具有att属性且属性值以val开头的E元素 E[att$="val"]orE[att$=val] 选择具有a…

使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

查看本章节查看作业目录需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后,使用 jQuery 设置标题"Web 前端技术"的字体颜色为红色第一层的无序列表 <ul> 即"使用 DIV+CSS 设计前端页面""使用 JavaScript+jQuery 制作页面特效",列表符号是正方形第二层无序列表是说明具体章…

基于SqlSugar的开发框架循序渐进介绍（12）-- 拆分页面模块内容为组件，实现分而治之的处理

在早期的随笔就介绍过,把常规页面的内容拆分为几个不同的组件,如普通的页面,包括列表查询.详细资料查看.新增资料.编辑资料.导入资料等页面场景,这些内容相对比较独立,而有一定的代码量,本篇随笔介绍基于Vue3+Typescript+Setup语法方式,来拆分页面模块内容为组件,实现分而治之的处理. 1.页面模块组件的划分我们先来了解下常规页面的内容的整体界面布局,它包含常规的列表界面,新增.编辑.查看.导入等界面,除了列表页面,其他内容以弹出层对话框的方式进行处理,如下界面示意图所示. 这些页面…

【CSS3 使用选择器在页面插入内容】的更多相关文章