css3中关于伪类的使用

【css3中关于伪类的使用】的更多相关文章

::before ::after CSS3中的伪类和伪元素

::before和::after伪元素的用法一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可…

css3中关于伪类的使用

目标: css中after伪类,last-child伪类的使用.以及部分css3的属性. 过程: 在制作导航时.常常会遇到在每个li后面加入一个切割符号,到最后一个元素的时候,切割符就会去掉的一种效果. 如图那么制作这种一个效果.怎么用纯css非常easy的完毕了.这里用到了css的伪类. html部分 <body> <ul class="nav"> <li><a href="">Home</a><…

CSS3中的伪类选择器详解

类选择器和伪类选择器区别类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素我们把它放到这里 p.aaas{ text-align: left; color: red; } 它同样的会被选择最常见的伪类选择器未被访问的链接 a:link{ color: #ff6600 } /* 未被访问的链接 */ 我们来测试一下,我们给它添加一个超链接. 伪类选择器我们给这个伪类选择器,选定样式,第一种 a:link{ color: #000…

css3中的伪类选择器

一.动态伪类动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",":visited";另外一种被称作用户行为伪类,如“:hover”,":active"和":focus".先来看最常见的锚点伪类著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.原文: https://www.w3cplus.com/c…

CSS3中结构伪类选择器——root、not、empty、target选择器

1.root选择器将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="text/css"> :root{ background:yellow; } body{ background:green; } </style> 注意:不使用root选择器来指定root元素的背景色,只指定body元素的背景色,则整个页面就全部变成了绿色. 2.not选择器如果想…

CSS3中only-child伪类选择器

<body> <style type="text/css"> //只对li1设置样式 li:nth-child(1):nth-last-child(1){ background:yellow; } </style> <h2>列表1</h2> <ul> <li>li1</li> </ul> <h2>列表2</h2> <ul> <li>…

CSS和CSS3中的伪元素和伪类（总结）

好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang :active :focus :hover :link :visited CSS中伪元素包括: :first-letter :first-line :before :after CSS3中明确规定伪元素用::表示,伪类用:表示,因此, CSS3中的伪类有动态伪类 :active :focus :h…

CSS中的伪类与伪元素

在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某些选择器添加特殊的效果.应用于一组 HTML 元素. 伪类的作用获取页面中不存在的信息,即通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息.一个元素可以同时设置多个伪类效果.伪类名称对大小写不敏感. 伪类有以下几种,截图引自W3School: 注: a:link /…

css3学习之--伪类与圆角

随着css3.0的发布到逐渐完善,目前已经大部分浏览器已经能较好地适配,所以写一些css3的学习经历,分享心得,主要以案例讲解为主,话不多说,今天以css3的新增的“圆角”属性来讲解,基于web画一个“安卓机器人”. 一.理解border-radius属性 border-radius-top-left /*左上角*/ border-radius-top-right /*右上角*/ border-radius-bottom-right /*右下角*/ border-radius-bottom-le…

CSS3的一个伪类选择器:nth-child()

CSS3的一个伪类选择器“:nth-child()”. Table表格奇偶数行定义样式: 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari3+. 描述: 伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明. 第一种:简单数字序号写法 :n…