首先给选择符起一个名字,然后把这个名字指定给想装饰的HTML标签。例如上一个例子中,我就给第一个div命名为“one”。 类选择符还能精确控制某个元素的外观,而不管元素使用的是哪个标签。...这时就可以用类选择符选取要装饰的词。 需要注意的是,使用类选择符选取某个标签里的部分单词时,需要借助标签。 类选择符的用法: 在CSS中,类选择符的名称必须以点号开头。...这样Web浏览器才能在样式表中找到类选择符。 类选择符的名称中只能包含字母、数字、连字符和下划线。 选择符的名称必须以字母开头。 类选择符区分大小写。 在HTML中,标签设置class属性。 。...ID选择符 CSS使用ID选择符选取网页中的特定部分,例如横幅、导航栏或者主内容区域。 在HTML中设置ID的方法与设置类的方法差不多,不过使用的属性不同。...如果有个按字母表顺序排列的术语表,可以使用ID选择符链接到以各个字母开头的部分。 Web设计圈有个趋势,尽量不在CSS中使用ID选择符。
在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始祖。...后代选择符可以由2个以上元素组成,例如: ul li a body li a html li a html body ul li a 以上四个选择符的作用相同,因此表明,无需指明目标标签的所有直系。...一般来说,应该使用能达到目的的最简短的后代选择符。所有标签都在和标签里,因此没要在后代选择符中指定和。 后代选择符里的选择符数量会影响冲突样式的处理方式,这种冲突处理机制成为特指度。...同样的,后代选择符也不局限于只能使用类型选择符。 可以使用不同类型的选择符构建复杂的后代选择符。
什么是组合选择符? 组合选择符说明了两个选择器直接的关系。 CSS组合选择符有几种,都是什么?
属性选择符的使用 由 Ghostzhang 发表于 2006-04-17 16:15 在CSS的选择符中,除了常用的“类型选择符(E)、通配选择符(*)、包含选择符(E1 E2)、ID选择符(#ID...)、选择符分组(E1,E2,E3)、类选择符(E.class)、伪类及伪对象选择符(E:P)”外还有“属性选择符(E[attr])”和“相邻选择符(E1+E2)”,试了一下属性选择符,感觉很不错,如果使用到页面中的话...,会让CSS的定义更加的强大,可惜现在IE并不支持这一选择符。...属性选择符可分为下面几种: Attribute Selectors E[attr] 属性选择符。 选择具有attr属性的E。...Attribute Selectors E[attr=value] 属性选择符。 选择具有attr属性且属性值等于value的E。
属性选择符的优先级 由 Ghostzhang 发表于 2006-04-24 10:59 大家都知道样式定义存在优先级的问题,像“ID选择符”的优先级就比“样式选择符”要高等等。...在写完《属性选择符的使用》和《CSS样式的优先级补遗2》后才发现,原来属性选择符的优先级是比较特殊的,看看下面的例子: /*IE*/ div{float:left;color:Orange;} /* 特性值为...所以不难得出,属性选择符的特性值是在10到12之间,姑且写为11吧,以方便表示。
一本正经的胡写代码,不至于用来陷害队友,更重要的是防止队友耍(装)帅(逼)滑自己。
于是,css选择符的地位在这个前提下就空前的提高了。所以,在开始学习盒模型、浮动、定位之前,有必要回顾一下选择符。...一般稍微接触过css的网页设计人员,都会很快地学会三种css选择符: 元素选择符(例如:body 、a 、li ) ID选择符(例如:#head、#body、#foot) 类选择符(例如:.red、....item、.content) 更进一步之后,开始了解到一些进阶的选择符: 后代选择符(例如 #head .menu、#foot #copyright) 伪类选择符(例如 a:hover、a:link...) 以及由这些选择符组合起来形成的综合选择符。...实际上css还支持一些更丰富的选择符。但是能够被浏览器广泛支持的其实主要就是上面这几种,其它的选择符在css中往往用来区别处理不同的浏览器,或者用在jQuery一类的框架中。本文就不提了。
用属性选择符来解决IE跟FF的兼容性问题 由 Ghostzhang 发表于 2006-04-24 11:39 从之前写过的《属性选择符的使用》中发现了一个可以用来解决IE跟FF兼容性的问题,因为IE...不支持CSS的属性选择符。...important声明提高样式的优先级不就完了吗,用属性选择符来为FF写样式意义不大。使用!important声明的确是比较方便,但IE6也认识这个声明,也就是说如果你给FF写了!...使用属性选择符就不会有这样的问题,而且可以将多个定义写到一起,是不是比较方便呢?看看下面的样式: /* 使用声明 */ div.try{ width:200px !...在《CSS样式的优先级补遗2》及《属性选择符的优先级》中我们了解到,ID选择符的特性值为100,而属性选择符的特性值为11,即不能达到将样式定义分开的目的。
选择符与遍历 (): 函数接受css选择符作为参数,充当一个工厂函数,返回对应元素的JQuery对象。...3种基本的选择符: 标签名 $(‘p’) ID $(‘#myid’) 类 $(‘.myClass’) 子元素组合符>: $(‘#myid > li’)选择id为myid的元素的所有列表项(li...属性选择符$(‘img[alt]‘): 选择所有带有alt属性的img元素. (‘a[href^=”mailto:”]‘): 选择所有URL以mailto:开头的超链接....自定义选择符: $(‘li:eq(1)’): 选择第二个列表项 $(‘li:odd’): 选择奇数的列表项 $(‘li:even’): 选择偶数的列表项 $(‘li:nth-child(...animate(): 自定义动画。
对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5。...选择符 API ---- Selectors API 是由 W3C 发起制定的一个标准,致力于让浏览器原生支持 CSS 查询。...这个方法接收一个参数,即 CSS 选择符,如果调用元素与该选择符匹配,返回 true,否则,返回 false: if (document.body.matchesSelector("body.page1...var head = document.head || document.getElementsByTagName("head")[0]; 自定义数据属性 HTML5 规定可以为元素添加非标准的属性,... 添加了自定义属性之后,可以通过元素的 dataset 属性来访问自定义属性的值
网页中所有h2标签采用此样式 2. class 类选择符 (使用点.将自定义名(类名)来定义的选择符) 定义: .类名{样式....} ...选择符的优先级:从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性] 4....关联选择符(包含选择符) 格式: 选择符1 选择符2 选择符3 ...{样式....} 例如: table a{....}...组合选择符(选择符组) 格式: 选择符1,选择符2,选择符3 ...{样式....} ...pointer小手,url自定义 zoom 设置或检索对象的缩放比例: normal|5倍|200%百分比 box-sizing 设置或检索对象的盒模型组成模式
三元选择符嵌套使用 网上很多人会推荐说用三元选择符代替简单的if-else,但几乎没有见过有人提到嵌套使用三元选择符的事情,如果看到如下代码,不知道各位读者会作何感想?...,但是在例如jsx的模版中,仍然不建议大量使用三元选择符,因为可能会出现如下代码: return ( condition1 ?...像这种简单的三元选择符,做成一个简单的memo变量,哪怕是在组件内直接写变量定义(例如:const clsName = condition2 ?...逻辑不拆分 React hooks可以很方便地帮助开发者聚合逻辑抽离成自定义hooks,千万不要把一个页面所有的useState、useEffect等全都放在一个文件中: 其实从功能上可以对页面进行拆分...其中有一个很简单的原则就是,如果一个逻辑同时涉及到了useState和useEffect,那么就可以一并抽离出去成为一个自定义hooks。
DepthChart.js组件基于HTML的Canvas技术实现,支持鼠标滚轮缩放与十字线聚焦,提供深色与浅色两种预置主题,并且支持自定义主题。...uikit中的DepthChart类初始化深度图: new uikit.DepthChart({ el: '#depth-chart', //canvas元素选择符...el配置用来声明深度图渲染的canvas元素(或者其选择符),dataset配置项用来声明要进行处理的市场深度数据。...3、使用配色主题 在创建DepthChart时,可以使用theme配置项来应用一个预置的主题,或者一个自定义的主题。...3.3 自定义主题 可以参考src/Theme.js中的dark或light主题,根据自己的需要进行自定义。
通配选择符 * 所有标签都具有属性 *{ property:value; } 类的后代才具有属性 .myclass *{ property:value; } 类型选择符 HTML选择符 HTML...标签设置对应属性 p{ property:value; } a{ property:value; } ID选择符 指定id设置对应属性 #my_ID{ property:value; } 类选择符...指定类设置对应属性 .classname{ property:value; } 类型选择符.classname{ property:value; } CSS3关系选择符 包含选择符 只有存在包含关系...position 对象的定位方式 static 无特殊定位,relative 相对定位对象不可层化,absolute 绝对定位对象可以层叠 z-index 对象的层叠顺序 auto表示遵循父元素的定位,自定义数值...auto表示无特殊定位;自定义数值:百分比或长度,只有position取值为absolute或relative时生效。
并且能够实现高度的自定义扩展,已经写好父类,可以在父类的基础上自定义扩展,底层弹出,消失,等已经封好 已经实现全屏幕展示图片功能。 全屏幕展示一张图片 ? 多按钮,按钮颜色自定义.png ?...icon,自定义内容样式.png ? 内容过多的情况,可滑动.png ? 只包含message.png ? 只包含title.png ? 内容过多和icon.png ?
对DOM的两个主要扩展是Selectors API(选择符API)和HTML5。 一、选择符API Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询。...1. querySelector()方法 querySelector()接受一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素返回null。...自定义数据属性 HTML5规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。...哈哈 添加了自定义属性后,可以通过元素的dataset...属性来访问自定义属性的值。
类选择符 用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。...类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式: .center {text-align: center} (定义.center的类选择符为文字居中排列...ID选择符 在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。 ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。...将上例中类用ID替代: 这个段落向右对齐 定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。...不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级。ID选择符,类选择符和HTML标记选择符,因为ID选择符是最后加上元素上的,所以优先级最高,其次是类选择符。
ID和类选择符。基于id和class属性的值选择元素。 属性选择符。基于属性的有无和特征选择元素。 上下文选择符 比如我们想给article中的段落设置不同的字号,可以使用上下文选择符来解决。...上下文选择符的格式如下: 标签1 标签2 {声明} 其中标签2 是我们要选择的目标,而且只有在 标签1是其祖先元素的情况下才会被选中。 上下文选择符,叫后代组合式选择符,就是一组以空格分隔的标签名。...上下文选择符以空格作为分隔符 特殊的上下文选择符 子选择符 > 格式如下: 标签1 > 标签2 标签1 必须是 标签2 的父元素,不能是其它的祖先元素。...属性选择符 属性名选择符 格式如下: 标签名[属性名] 选择任何带有属性名的标签名。...ICE记分规则如下: 选择符中有一个ID,在I的位置上加1; 选择符中有一个类,在C的位置上加1; 选择符中有一个元素,在E的位置上加1; 得到一个三位数。
从通用功能看,这些库大都提供了如下特性: 语法糖:链式调用、实用函数 选择元素:基于各种标准选择符和库自定义的选择符,以及通过回调进行筛选 操作DOM:创建和操作元素,乃至各种属性操作 处理事件:ready
jQuery基础教程之选择器 一、元素选择 1.通配选择符 * Q $("*") 2.标签选择符 div $("div") 3.ID选择符 #id $("#eid") 4.class选择符 .class $(".item") 二、关系选择符 e f 包含选择符...(E F) 所有子集 $(".list .item") 匹配6个 子选择符(E>F) 只有一级子集 $(".list>.item") 匹配3个 相邻选择符(E+F) 只有隔壁的同级 令居 $(...".a+.item") 结果为b 兄弟选择符(E~F) 同级都是 $(".a~.item") 结果为b、c 三、属性选择符 E[att] 匹配包含给定属性的元素 <div title="test2
领取专属 10元无门槛券
手把手带您无忧上云