首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

以及元素的一些使用小技巧

在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些元素。这里稍微提一下在实际工作中用到的一些小技巧,算是笔记。...1.focus,chenked使用。...2.还有after一个这么强大的对象,在以前竟然只是被用作清除浮动,实在是大材小用暴殄天物。看下面这个demo,就是使用after和befor这对好基友,来实现切换标签的current状态小尖角。...这里只是使用befor和after来体现出来; nav a.curr::before{border-color:#ccc transparent;border-style:solid; border-width...transparent;border-style:solid; border-width:5px 4px 0px 4px;bottom:-5px; margin-left:-2px; z-index: 2; } 这样两个对象的嵌套

90390
您找到你想要的搜索结果了吗?
是的
没有找到

css的说明以及使用(css事件)

CSS使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html   之前有开发开发App的时候,有同事问我那个列表的条目按下去背景会变成淡黄色的效果是怎么做的...,嗯~最终效果实现与否就不得而知啦~;最近稍仔细的翻翻相关文章才知道类似于JavaScript中的事件的东西叫做“”,是CSS中特有的一种东西ヽ(^o^)丿,大多时候很少很少用到,这个叫做“”的东东一般只有... ̄)): 描述 :active 点按,向被激活的元素添加样式。 :focus 焦点输入,向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方,向元素添加样式。...要使用这些的话,样式该怎么写呢,。。。以下举个?...;以上只是定义了所列举的部分的样式效果,下面把剩余的几种效果也展示下,方便读者参考?。   ==>  :active     (点按之前) ?     (点按之后) ?

1.2K50

css的说明以及使用(css事件)

CSS使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html   之前有开发开发App的时候,有同事问我那个列表的条目按下去背景会变成淡黄色的效果是怎么做的...,嗯~最终效果实现与否就不得而知啦~;最近稍仔细的翻翻相关文章才知道类似于JavaScript中的事件的东西叫做“”,是CSS中特有的一种东西ヽ(^o^)丿,大多时候很少很少用到,这个叫做“”的东东一般只有... ̄)): 描述 :active 点按,向被激活的元素添加样式。 :focus 焦点输入,向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方,向元素添加样式。...要使用这些的话,样式该怎么写呢,。。。以下举个?...;以上只是定义了所列举的部分的样式效果,下面把剩余的几种效果也展示下,方便读者参考?。   ==>  :active     (点按之前) ?     (点按之后) ?

1.2K20

css的说明以及使用(css事件)

CSS使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html   之前有开发开发App的时候,有同事问我那个列表的条目按下去背景会变成淡黄色的效果是怎么做的...,嗯~最终效果实现与否就不得而知啦~;最近稍仔细的翻翻相关文章才知道类似于JavaScript中的事件的东西叫做“”,是CSS中特有的一种东西ヽ(^o^)丿,大多时候很少很少用到,这个叫做“”的东东一般只有... ̄)): 描述 :active 点按,向被激活的元素添加样式。 :focus 焦点输入,向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方,向元素添加样式。...要使用这些的话,样式该怎么写呢,。。。以下举个?...;以上只是定义了所列举的部分的样式效果,下面把剩余的几种效果也展示下,方便读者参考?。   ==>  :active     (点按之前) ?     (点按之后) ?

1.1K70

前端基础:CSS的作用和基本使用

前端基础:CSS中的作用和基本使用 作为一名优秀的前端开发,不会使用元素有点说不过去。...但是很多小白可能元素都分不清楚,我先同通俗的话解释下:是用来给指定选择器添加状态效果,元素是给指定元素添加内容修饰。 今天先带大家看一下是如何使用的,明天给大家演示下元素的使用。...常见的诸如:active/:focus/:hover/:visited/:first-child等大家可能比较熟悉,用的比较频繁,实际上有几十个,下面分门别的展示一下 一、用于链接,按钮等元素的常见...// :focus 可输入内容的标签选中的元素样式 // :focus-within 当他的后代出现光标触发该样式 三、用于打印的常见 // :first 打印文档的时候,第一页的样式。...// :hover 鼠标悬浮在某个元素上的样式 六、其他 // :checked 表示处于选中状态是的radio、chexkbox等元素的状态 // :default 表示处于默认值的元素状态

37900

结构选择器的分类以及使用语法

结构选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或的依赖,有助于保持代码干净整洁。...last-of-type 选择父元素下同种标签的倒数第一个元素,相当于E:nth-last-of-type(1) E:nth-of-type(n) 与:nth-child(n)作用类似,用作选择使用同种标签的第...选择父元素下仅有的一个子元素,相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1) E:only-of-type 选择父元素下使用同种标签的唯一子元素...E:nth-child(odd) 选择的是奇数项,而使用:nth-last-child(odd) 选择的却是偶数项 结构选择器很容易遭到误解,需要特别强调。...还需要注意的是,结构选择器中,子元素的序号是从 1 开始的,也就是说,第一个子元素的序号是 1,而不是 0。换句话说,当参数 n 的计算结果为 0 ,将不选择任何元素。

45420
领券