文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

针对CSS说一说｜技术点评

CSS3新特性 有在属性选择符中引入通配符，灵活的伪类选择符nth-child()等。 属性选择符 E[attr]，选择具有attr属性的E元素。...E[attr="val"]，选择具有attr属性且属性值等于value的E元素。...E[att~="val"]，选择具有attr属性且属性值为用空格分隔的字词列表，其中一个等于val的E元素 E[attr|="value"]，选择具有attr属性且属性值为用连字符分隔的字词列表，表示由...val开始的E元素 E[attr^="val"]，选择具有attr属性且属性值为以val开头的字符串的E元素 E[attr$="val"]，选择具有attr属性且属性值为以val结尾的字符串的E元素 E...[attr*="val"]，选择具有attr属性且属性值为包含val的字符串的E元素 ^ 表示匹配起始符 $ 表示匹配结束符 * 表示匹配任意字符 CSS结构伪类选择符 E:root，选择匹配E所在文档的根元素

1.2K20
您找到你想要的搜索结果了吗？
是的
没有找到

《精通CSS：高级Web标准解决方案》 知识点汇总

表示并不完善的权宜之计 为了尽可能提高页面的可访问性，在定义鼠标悬停状态时，最好在链接上添加 :focus 伪类，再通过键盘移动到链接上是，这让链接显示的样式与鼠标悬停时相同 在下面的例子中，两个规则具有相同的特殊性...，通过颜色之外的某些方式让链接区别于其他内容是很重要的，这是因为许多有视觉障碍的人很难区分对比不强烈的颜色，尤其是在文本比较小的情况下，例如，有色盲症的人无法区分具有相似亮度或饱和度的某些颜色，因此，默认情况下...li:nth-child(odd) li:nth0child(even) 属性选择器 [attr^=abc]，匹配属性/键为 attr，值为 abc 开头的所有元素 [attr$=abc]，匹配属性/...键为 attr，值为 abc 结尾的所有元素 [attr*=abc]，匹配属性/键为 attr，包含 abc 字符的所有元素 伪类选择器 :nth-child(n) 在所有兄弟元素的排列 :nth-of-type...(n) 在相同类型的元素的排列 .box_1 p:nth-child(2) { color: red; } .box_2 p:nth-of-type(2) { color: red; }

86741

三种插件开发模式，带你玩废tinymce

与上下文菜单项类似，上下文表单是在匹配内容谓词时出现输入表单元素的项。上下文表单的一个示例是使用配置 { link_context_toolbar: true } 时的链接插件。...有关创建上下文菜单的信息，可以参阅: UI Components - Context Menu. addContextToolbar() 注册一个新的上下文工具栏，该工具栏仅在内容谓词匹配时出现，例如光标位于图像元素上...此侧边栏容器附加到编辑器的右侧，可以打开或关闭。注册后，将创建一个具有相同侧边栏名称的新工具栏切换按钮。...更多选项可前往查看 还是先上手 先来搭个起手式 举一个小例子 一个不可编辑的输入框组件 先在创建一个 index.html <!...哪该如何转化，还得再了解认识一下 tinymce tinymce 富文本中编辑的数据 会抽象为 ASTNode (可以直接看成tinymce官方自制简易版的DOM树)，如打印出来如下图 既然有转换

4.8K30

Cocos Creator基础教程(12)—精灵变身

在编辑器场景中添加一个Sprite组件 然后挂载上SpriteIndex 添加SpriteFrames数组属性元素 将可能会出现的图片拖动到SpriteFrames数组属性下 尝试修改index属性，你会看到精灵图片的变化...运行时图片切换 请出我们的按钮组件，通过点击时调用SpriteIndex.next方法进行切换，看下图配置： ? 此时启动预览，尝试点击这个精灵节点你就能看到图片在不断切换变化了。...直接继承cc.Sprite 我们设计的是通用型组件，最好还是不要访问别的节点、组件的属性和方法，保持干净！这样更具有可扩展性和适应性。...属性 cc.Class.Attr.setClassAttr(SpriteEx, '_atlas', 'visible', false); //根据函数返回值控制属性显示、隐藏 cc.Class.Attr.setClassAttr...其实我们这里仍然是在讲组件化思维，合格的组件化组件将成为非程序员创作游戏内容的利器，它也是提高生产力的秘密。我在想以后是不是做代码审查，美术、策划也能为程序投上一票呢？

2.3K20

50个必备的实用jQuery代码段

another-class", title: "..." }); 如何使用多个属性来进行过滤 //在使用许多相类似的有着不同类型的input元素时， //这种基于精确度的方法很有用 var elements...arguments); 　　} }; //用法 $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg'); 如何为任何与选择器相匹配的元素设置事件处理程序...元素： $('#someElement').find('option:selected'); 如何隐藏一个包含了某个值文本的元素： $("p.value:contains('thetextvalue'.../ 2 + $(window).scrollLeft() + 'px' 　　　　}); 　　}); } //这样来使用上面的函数： $(element).center(); 如何把有着某个特定名称的所有元素的值都放到一个数组中...tog; }); 如何基于一些输入文本来过滤一个元素列表： //如果元素的值和输入的文本相匹配的话,该元素将被返回 $('.someClass').filter(function() { 　　return

6.7K00

第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

[class=mydemo] 3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置； div[class*=mydemo] 4、E[attr^=val] 表示的属性值里包含val...字符并且在“开始”位置； div[class^=mydemo] 5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；  　div[class$=demos] 二、伪类选择器... 选择一个上级元素下的第一个同类子元素； :last-of-type  选择一个上级元素的最后一个同类子元素； :only-child  选择的元素是它的父元素的唯一一个了元素； :only-of-type... 选择一个元素是它的上级元素的唯一一个相同类型的子元素； :empty  选择的元素里面没有任何内容。...E::selection 可改变选中文本的样式； ":" 与 "::" 区别在于区分伪类和伪元素 关于before和after       CSS2中 E:before或者E:after，是属于伪类的

1.6K30

CSS选择器详解

="val"] { sRules } 选定具有属性 attr 且属性值等于 val 的文档元素 E /** 设置有属性 id 且值等于 "myid" 的元素为红色 **/ div[id="myid"]...} 选定具有属性 attr 且属性值以 val 开头的字符串的文档元素 E /** 设置 class 属性的值以 head 开头的元素为红色 **/ div[class^="head"] { 　　color...: red; } 我是div E[attr$="val"] { sRules } 选定具有属性 attr 且属性值以 val 结尾的字符串的文档元素...>我是div E[attr*="val"] { sRules } 选定具有属性 attr 且属性值包含 val 的字符串的文档元素 E /** 设置 class 属性的值包含 Div 的元素为红色...} 选定具有属性 attr 且属性值以 val 开头并用连接符 "-" 分隔的字符串（包含属性值只有 val 的情况）的文档元素 E /** 设置 class 属性的值以 head 开头并用连接符 "

2.8K40

jQuery_T2_DOM操作

DOM操作的内容 jQuery的DOM DOM转jQuery对象  DOM样式添加 jQuery元素属性设置 toggle切换 ​编辑html()与text()区别 DOM添加图片 纯dom添加元素 克隆元素...描述显示特点的标签:如〈b〉、〈I〉、〈strong〉、〈h1〉-〈h6〉等，其作用是强调重点内容，引起人们注意。 超链接相关的标签，表示网页间的内容相关性信息。...)，不同类的结点对Web信息提取的重要度不同。...视觉类(VISION):指描述页面显示特性的标签类别，如〈b〉、〈strong〉等。 分块类(BLOCK):指用于网页内容分块的标签类别，如〈table〉、〈tr〉等。...jQuery的DOM 使用 jQuery 选择器选择页面中的元素，是为了生成 jQuery 对象，jQuery 对象具有特有的方法和属性，完全能够实现传统 DOM 对象的所有功能 使用jQuery操作元素

7.8K20

css3 选择器

7、相邻兄弟选择器（E+F） 相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择...3、E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“～”不能不写； .demo a[title~=...4、E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的； .demo a[href^="http://"]{background:orange;color:green...3、CSS3的：nth选择器 这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法： 1):fist-child...11):empty选择的元素里面没有任何内容。

51210

HTML5选择器

：ie6不支持 属性选择器 伪元素选择器 伪类选择器 CSS新增选择器 通用兄弟（关联）选择器：~，选择后面的所有的子元素 属性选择器（新增的）： E[attr~="value"]：指定属性名，并且具有属性值...，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写； E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的； E...[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的； E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value； E[attr|=...； :last-of-type 选择一个上级元素的最后一个同类子元素； :only-child 选择的元素是它的父元素的唯一一个了元素； :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素...:empty 选择的元素里面没有任何内容 :not 否定选择器 UI元素状态伪类 我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML

1.4K30

JQuery干货篇之处理元素

作者说 JQuery干货篇之处理元素 注意这里用的还是我前两篇用的例子，详情请看我的博客 attr attr() 方法设置或返回被选元素的属性值。...语法： $(selector).attr(attribute) 返回被选元素的属性值。...$(selector).attr(attribute,value) 设置被选元素的属性和值 $(selector).attr(attribute,function(index,oldvalue)) 设置被选元素的属性和值...参数 描述 attribute 规定属性的名称。 function(index,oldvalue) 规定返回属性值的数。该函数可接收并使用选择器的 index 值和当前属性值。...当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容(会删除 HTML 标记) 语法： $(selector).text() 当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容

49320

从零开始学习DOM-BOM(二)

ECMAScript，描述了该语言的语法和基本对象，如类型、运算、流程控制、面向对象、异常等。 文档对象模型（DOM），描述处理网页内容的方法和接口。...概述 DOM的最小组成单位叫做节点（node），一个文档的树形结构（DOM树），就是由各种不同类型的节点组成。 Node是一个接口，各种类型的 DOM API 对象会从这个接口继承。...childNodes:所有的子节点; NodeType具体的枚举值可以参考MDN链接 我觉得我们日常开发不用掌握这些，也不用刻意去背记 理解Vue，react模版编译的时候会用到，碰到一些节点枚举值的时候...，我们来看一下常见的属性和方法: 详细文档可参考MDN 我们只选择重点内容和大家分享 常见属性 document.body 返回文档的body元素 document.title 返回当前文档的标题 document.head...comment 节点 Comment代表注释节点，顾名思义，html 中写的注释 Attr 节点 元素的特性在DOM中以Attr类型表示。

27410

jQuery笔记(2)

顺便把之前的微博的案例修改了一下: 本文由“壹伴编辑器”提供技术支持 但是jQuery还是想要把代码极简,所以还封装了事件切换方法 hover([over],out) over: 鼠标移到元素上就要触发的函数...display: block 看看效果吧: 即使鼠标乱划也不会出现排队现象 本文由“壹伴编辑器”提供技术支持 设置或获取元素固有属性值 prop( ) 所谓元素固有属性就是元素自身自带的属性,...,需要用到attr( ) 本文由“壹伴编辑器”提供技术支持 数据缓存 data( ) data( )方法可以在指定的元素上存取数据,并不会修改DOM元素结构.一旦页面刷新,之前存放的数据都将被移除...全选部分 这个地方真的很妙 现在做下一部分: 这个地方自己没想到,因为用了新的方法 这样就只要十几行就能搞定了 本文由“壹伴编辑器”提供技术支持 针对元素的内容和表单的值的操作...普通元素内容html()(相当于原生innerHTML) html() // 获取元素的内容 html("内容") // 获取元素的内容 获取内容: 修改内容: 获取设置表单值val()

83210

两个CSS知识点：BFC和选择器权重

决定元素的内容如何渲染以及与其他元素的关系和交互。BFC 有一个重要的特点：具有隔离作用。...table-caption，HTML 表格标题默认为该值）； 匿名的表格单元格元素（元素的 display 为 table、table-row、inline-table 等）； 两个典型的例子： 如何让浮动内容和周围的内容等高....bfc 的子元素可以选择到； 第四个选项表示通用的兄弟选择器，不管相不相邻都可以选择到； 以下属性选择器表示属性值以“val-”开头的是？..."] 表示属性值用空格分割为多个值，其中至少有一个值是 val，例如 class 属性就可以有多个值； [attr|="val"] 表示带有以 attr 命名的属性的元素，属性值为 val 或以 val...[attr$="val"] 表示属性值以字符串 val 结尾； [attr*="val"] 表示选取 attr 属性值中包含 val 字符串的元素。

80010

使用JavaScript和D3.js实现数据可视化

，编辑barchart.js： var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30]; 接下来，我们需要创建SVG元素。...设置形状的属性 我们可以通过使用.attr()，与为SVG定义属性相同的方式向形状添加属性。D3中的每个形状将具有不同的属性，具体取决于它们的定义和绘制方式。...使矩形反映数据 目前，我们阵列中的所有矩形沿X轴具有相同的位置，并且不代表高度方面的数据。要修改矩形的位置和大小，我们需要为我们的一些属性引入函数。添加函数将使值成为动态而非手动。...，我们会看到如下所示的内容： 现在我们有沿X轴间隔开的矩形，代表我们阵列中的每个项目。....attr("y", function(d, i) {return 400 - (d * 10)}); 现在，让我们切换到我们的style.css文件，目前看起来像这样： html

21.7K30

回炉重造，css常规布局系统整理——实战开发后复盘小结

块级元素：display:bloak；占据一行，下一个元素自动换行，如div等； ​ 行内元素：display:inline；元素没有高宽，根据元素内的内容改变大小，如span、a标签等； ​ 行内块：...display:inline-bloak；使行内元素具有块级元素特性、使块级元素具有行内元素特性； 1 基础css布局# 1.1 position定位# ​ position用于规定如div等元素的定位方法的类型...; /*演示：这句话不起作用，可删去*/ } 1.1.2 fixed定位方式# ​ 固定定位，元素的位置相对于浏览器（就是你能看到的这个浏览器窗口）来说，是固定的，无论你怎么滑动窗口，它都在那儿雷打不动...（口诀：子绝父相）。...wrap表示自动换行，当项目在第一行排列不完时，会自动切换到下一行排列。 ​ wrap-reverse 也是自动换行，但不同的是，它是从底下开始排列的（之前我们都是从上面开始排的）。

2.2K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券