【Html学习之十(CSS选择器的使用--伪类选择器)】教程文章相关的互联网学习教程文章

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  在一个元素之后添加一个...

伪类选择器汇总【图】

伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":"1. 根元素选择器 只作用于html等底部标签.很少用 ..:root 2. 子元素选择器 子元素全选还要更细致 ul>li:first-child{ } 增加伪类first-child 第一个ul>li...

介绍2个伪类选择器:E:nth-child(n)和E:nth-of-type(n)【图】

结构伪类是css3新增的类型选择器。 E:nth-child(n)、E:nth-of-type(n)就是其中之二。搞懂了这两个,基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了。首先先用文字语言来描述一下这俩: E:nth-child(n): 选择父元素下的第n个子元素,并且这第n个子元素的类型为E, 还是语言描述了之后用例子比较好 上面这个例子很简单,来简单分析一下样式表中的span:nth-child(2)这条语句(实际写代码不会这么随便啦,这里只是为...

伪类选择器和内联元素的一点点小困惑_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;} 第一行 第二行 第三行 ...

CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)_html/css_WEB-ITnose

《CSS3基本选择器》 一、通配符选择器(*) *{ marigin: 0; padding: 0; } 二、元素选择器(E) ...

CSS3:nth-child()伪类选择器_html/css_WEB-ITnose

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

关于CSS伪类选择器_html/css_WEB-ITnose

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

CSS动态伪类选择器温故-3_html/css_WEB-ITnose

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

使用CSS3伪类选择器美化按钮_html/css_WEB-ITnose

直接上源码:```html 使用CSS3美化按钮 body { padding-top: 50px; } .download-info { text-align: center; } /* 默认状态下的按钮效果 */ .btn { background-color: #0074cc; *background-color: #0055cc; /* IE6,7 */ /* CSS3渐变制作背景图片 */ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); background-image: -...

CSS3:checked伪类选择器妙用_html/css_WEB-ITnose

CSS3中的伪类选择器例如:hover,:before,:after在已经在前端开发中被广泛使用,但是可能开发者还不太熟悉:checked这个伪类选择器。本文将介绍:checked这个伪类选择器以及如何使用它写出更加有优雅的代码。 :checked伪类选择器顾名思义,表示的是 type="checkbox" 的input元素被选中的状态。在前端开发中,我们常用:hover伪类来设置鼠标悬浮时的样式,而由于checked状态的改变需要用户进行点击操作,使用:checked伪类,我们则可...