【CSS的伪类选择器】教程文章相关的互联网学习教程文章

CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式

css3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹。虽 然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b...

CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)【代码】

《CSS3基本选择器》一、通配符选择器(*)*{marigin:0;padding:0;}二、元素选择器(E)li {background-color: grey;color: orange;}三、类选择器(.className)四、id选择器(#ID)#first {background: lime;color:#000;}#last {background:#000;color: lime;}五、后代选择器(EF).demo li {color: blue;}六、子元素选择器(E>F)ul > li {background: green;color: yellow;}七、相邻兄弟元素选择器(E + F)li + li {background: gr...

css伪类选择器详细解析及案例使用-----伪元素【代码】

伪元素:(css3中将所有伪元素前变成了两个冒号,即::first-letter、::first-line、::before、::after、::selection。目的是为了区分伪元素与伪类。对于IE6~IE8,仅支持单冒号写法)1.::first-letter :用来选择文本块的第一个首字母。2.::first-line :用来匹配元素的第一行文本。3.::befor 和 ::after :创建一个作为当前元素子元素的伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。:before...

css伪类选择器【代码】【图】

伪类选择器 伪类是专门用来表示元素的一种特殊状态,比如说常见的 a 元素的一些特殊状态(原始状态的超链接,访问过的超链接,运行中的超链接等等),当我们需要为这些处在特殊状态的元素设置样式的时候就可以使用伪类选择器来定义。动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",":visited";另外一种被称作用户行为伪类...

Html学习之十(CSS选择器的使用--伪类选择器)【代码】【图】

伪类选择器一、基于a标签。1、:hover  选择鼠标滑过的超链接元素2、:active  选择鼠标单击中的超链接元素3、:link  选择未被访问的超链接元素4、:visited  选择已经被访问过的超链接元素二、基于input标签。1、:focus  表示某个input元素被选中的情况。2、:enable  启用input元素3、:disable  禁用input元素三、:before和:after伪类选择器1.:before  在一个元素之前添加一个元素2.:after  在一个元素之后添加一个...

CSS3 01. CSS3现状、属性选择器、伪类选择器、

CSS 3 现状    兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 ;    CSS3手册 需要阅读其--阅读及使用指引[]表示全部的可选项 || 或者 | 表示 多选一 ? 表示 0个或1个* 表示 0个或多个{}表示范围 {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限# 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:...

CSS3之伪元素选择器和伪类选择器【代码】【图】

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。a:link|a:visited|a:hover|a:active在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的。 由于状态是动态变化的,所以一个元素达到一个特定状态时,它可...

CSS3 结构伪类选择器 详解

1 CSS3 结构伪类选择器1.E:root匹配E元素所在的根元素 即:html2. E:nth-child(n)(1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型。否则无效p:nth-child(1){color:red}<div> <p>这是红色的<p></div> <div> <h1>这是第一个子元素 但不是P类型,不是红色</h1> < p>这是黑色的 注意对比 nth-of-type(1) </p></div> 3. E:nth-of-type(n)匹配E的父...

CSS选择器之伪类选择器(伪元素)

selection[CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。(IE8及以下不支持)(火狐-moz-selection)first-line选择每个 <p> 元素的首行,并为其设置样式。first-letter选择每个 <p> 元素的首字母,并为其设置样式。before在每个 <p> 元素的内容之前插入新内容。after在每个 <p> 元素的内容之后插入新内容。cue backdrop placeholder marker spelling-error grammar-error 与伪类一样, 伪元素添加...

css3中UI元素状态伪类选择器实例详解

这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下所谓UI选择器:就是指定的样式只有当元素处于某种状态下时,才起作用,在默认状态下不起作用!浏览器兼容性:E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome ...

关于CSS伪类选择器-HotenHuang

#CSS伪类选择器##使用css伪类选择器需要注意的使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始读取的,也就是说,类似 p:first-child 这样的伪类选择器,指的是&ldquo;某元素的以p元素作为第一子项的那项&rdquo;,而不是&ldquo;p元素的第一个子项&rdquo;. 原因是因为,其实这里在p:之前,省略了 xxx & nbsp; 这几个字符,导致很容易产生误解。e.g. div p:f...

CSS的伪类选择器【图】

这次给大家带来CSS的伪类选择器,CSS伪类选择器的注意事项有哪些,下面就是实战案例,一起来看一下。a.random:hover{ color:#64FFDA; font-size:120%; } //选择的是class="random"的<a>标签。a#search:active{ font-size:80%; } //选择的是id="search"的<a>标签。相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!相关阅读:iframe的各项参数html的内联元素和块级元素有哪些不同base标签需要如何使用怎样...

CSS动态伪类选择器温故-3-怪诞咖啡【图】

动态伪类选择器 伪类选择器:大家熟悉的:【:link】【:visited】【:hover】【:active】CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器(4)UI伪类选择器(5)结构伪类选择器(6)否定伪类选择器注:和其它CSS选择器的区别-伪类选择器都以冒号【:】开头 思考问题?(1)CSS3伪类选择器有什么功能?(2)选定元素能带来什么便利? 1.1.动态伪类选择器语法动态伪类包含两种:(1)在链接中常看...

css3巧用结构性伪类选择器【图】

最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式:1 2 li{3 list-style-type: none;4 float: left;5 width: 60px;6 height: 60px;7 background-color: #979698;8 margin-left: 10px;9 text-align: center; 10 line-height: 60px; 11 border-radius: 50%; 13 ...

伪类选择器和内联元素的一点点小困惑_html/css_WEB-ITnose

伪类选择器 内联元素 第一个问题 #nav li a:link{ display:block; width:90px; height:37px; background:url(images/nav_bg.gif);}#nav li a:hover{ background:url(images/nav_on.gif);} 这段代码中为什么第二个不写#nav li这样的关系就不能用呢?不写的话不是说明页面内所有的a:hover属性都可以用吗? 第二个问题 #g1{ background:red;} 第一行 第二行 第三行 ...