在20世纪90年代初HTML诞生后，在96年底就有CSS诞生了，CSS是专门定义网页的基本属性的，那么在CSS3中，常用的选择器有哪些？今天就给大家介绍一下。HTML的诞生 20世纪90年代初1996年底， CSS第一版诞生1998年5月 CSS2正式发布2004年 CSS2.1发布CSS3的发布 2002 2003 2004 2005 2007 2009 2010模块化开发CSS1 中定义了网页的基本属性：字体、颜色、基本选择器等CSS2中在CSS1的基础上添加了高级功能浮动和定位、高级选择器...
一、:nth-child1.1 说明:nth-child(n)选择器匹配属于其父元素的第N个子元素，不论元素的类型。n可以是数字、关键词或公式。注意：如果第N个子元素与选择的元素类型不同则样式无效！1.2 示例<style> p>p:nth-child(2){color:red; } </style> <p><p>我是第1个段落</p><p>我是第2个段落</p><!--符合条件：1、是<p>元素，2、父元素<p>的第二个元素。这里被选择，会变成红色。--><p>我是第3个段落</p> </p> <p><p>我是第1个段落</p><spa...
本篇文章主要介绍了CSS3选择器:nth-child和:nth-of-type之间的差异，非常具有实用价值，需要的朋友可以参考下先看一个简单的实例，首先是HTML部分：<section><p>我是第1个p标签</p><p>我是第2个p标签</p> <!-- 希望这个变红 --> </section>然后两个选择器相对应的CSS代码如下：p:nth-child(2) { color: red; }p:nth-of-type(2) { color: red; }上面这个例子中，这两个选择器所实现的效果是一致的，第二个p标签的文字变成了红色：尽...
only-child选择器“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。示例演示通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。HTML代码：<p class="post"><p>我是一个段落</p><p>我是一个段落</p></p><p class="post"><p>我是一个段落</p></p>CSS代...
CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注： ele代表element元素 attr代表attribute属性，val代表value属性值 :xxx都属于伪类选择器，::xxx都属于伪元素选择器 有名字的选择器我尽量细分了CCS1选择器选择器类型示例说明.class类选择器.demo选择所有class包含demo的元素#idID选择器#unique选择所有id是unique的元素ele元素选择器p选择所有p元素ele,ele并列选择器h1,h2选择...
本文总结了30个CSS3选择器,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧或许大家平时总是在用的选择器都是：#id .class 以及标签选择器。可是这些还远远不够，为了在开发中更加得心应手，本文总结了30个CSS3选择器，希望对大家有所帮助。1 *：通用选择器* { margin:0; padding:0; }*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默...
本文总结了30个CSS3选择器,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧或许大家平时总是在用的选择器都是：#id .http://www.gxlcms.com/wiki/164.html" target="_blank">class 以及标签选择器。可是这些还远远不够，为了在开发中更加得心应手，本文总结了30个CSS3选择器，希望对大家有所帮助。1 *：通用选择器* { margin:0; padding:0; }*选择器是选择页面上的全部元素，上面的代码作用是...
今天把视频里的CSS3复杂选择器部分看完了，来整理一下学到的知识点。1、兄弟选择器：同一位置级别，可称为兄弟元素a、相邻兄弟选择器：next紧紧跟在【当前元素之后的】(一个)，指定选择器的元素 语法：通过“+”作为结合符eg: p+p ->紧跟在p后面的p元素<!-- demo.html --> <html><head><title></title></head><body><p>这是第一个段落</p><div id="d1">这是一个div</div><span>这是一个span</span><p class="p1"...
一、代码<style>ul{list-style: none}p ul li{width:100px;height:30px;border:#eee 1px solid;float:left;}p ul li:nth-child(1){background:#f00;}p ul li:nth-child(3){background:#ccc;}</style> <p> <ul> <li>11</li> <li>22</li> <li>33</li> </ul></p>二、预览效果如上图，ie9及以上背景色能显示问题：如上图，ie8背景色显示不出来三、解决方法<style> ul{list-style: none} p ul li{width:1...
这篇文章主要介绍了CSS3的first-child选择器实战攻略,包括first-child和:first-of-child的区别以及针对IE兼容问题的讲解,需要的朋友可以参考下CSS 中的 :first-child Selector 可以选择到特定元素的第一组物件(同一个 parent)HTML<ul><li>1</li><li>2</li><li>3</li> </ul> <hr> <ul><li>1</li><li>2</li><li>3</li> </ul>CSS// 只套用编号 1 的 li li:first-child { color: green; }first-child和:first-of-child的区别假...
css3属性符号选择器:<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>css3属性选择器</title><style>[id*=div]{color:red;/*id包含div的*/}[id^=div]{color:#0000ff;/*id首字符为div的*/}[id$=div]{color:green;/*id结束符为div的,数字前加上\*/}</style> </head> <body> <div id="div">测试文字</div> <div id="div1">测试文字</div> <div id="di">测试文字</div> <div id="mydiv">测试文字</div> </body> </html>css...
这篇文章详解css3类选择器之结合元素选择器和多类选择器用法css3类选择器之结合元素选择器和多类选择器用法:<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Title</title><style>.p2{font-size:30px;}/*结合元素选择器*/p.p1{color:rebeccapurple;}/*多类选择器*/.p1.p2{font-style: italic;}</style> </head> <body><div>看我</div><p>我就是我</p><p>我是一段文字</p><p class="p1 p2">我还是斜体字</p> </body> </...
在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称语法@keyframes animationname {keyframes-selector {css-styles;}}值描述animationname必需。定义动画的名称。keyframes-selector必需。动画时长的百分比。在css3中，我们以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。其中，0% 是动画的...
零、概览CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]1.[class="a"]只能匹配class="a"的元素2.[class~="a"]则可以匹配class="a"、class="a b"的元素3.[lang|=en]则可以匹配lang="en"、lang="en-us"的元素。CSS3新增*=、^=、$=三种匹配方式[{属性 | 属性 {*= | ^= | $=} 值}]：1.*=表示模糊匹配，[href="163"]可以匹配href="163.com"、href="mail.163.com"等元素；2.^=表示以指定字符开头，[href^="/"]则匹配...
selector :first-child 这个是后代选择器. 怪异, 注意避免而不是理解.selector:first-child 当前 selector 选中的元素集合中的第一个元素selector:last-child当前 selector 选中的元素集合中的最后一个元素.但是有问题, :last-child 不生效.应该是:1 当前 selector 的父元素 parent2 parent所有子元素, [a,b,c]3 子元素的集合的第一个元素, 如果是 selector4 设置样式, 生效. **if(selecor.parent.childElementList.firstElement ...