<section> <p>我是第1个p标签</p> <p>我是第2个p标签</p></section>然后对应2个选择器对应的CSS代码如下：p:nth_child(2) { color:red;} // p:nth-of-type(2) { color:red;}两种对应的效果都是这样的：对于:nth-child选择器有两点需要说明：1，这个是个段落元素2，这个是父级元素的第二个孩子 而对于：nth-of-type选择器，意味着选择一个元素如果：1，选择父级元素的第二个 段落 子 元素 如果把上面的代码稍...
那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。 CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分，第一部分是我们常用的部分，我把他叫做基本选择器；第二部分我把他称作...
CSS3模块化结构CSS历史发展CSS（Cascading Style Sheet），层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS3属性选择器E[attr=val]表示具有属性att且其值等于valE[attr*=val]表示具有属性attr且其值中包含valE[attr^=val]表示具有属性attr且其值以val开头E[attr$=val]表示具有属性attr且其值以val结尾事实上除了以上四个之外还有俩用的相对比较少的属性选择器，那就是E[attr|=val]用来选择具有...
1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素<style type="text/css"> .list div:nth-child(2){background-color:red;} </style> ...... <div ><h2>1</h2><div>2</div><div>3</div><div>4</div><div>5</div> </div><!-- 第2个子元素div匹配 --> 2、E:first-child：匹配元素类型为E且是父元素的第一个子元素3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素4、E > F E元素下面第一层子集5、E...
常见的基于关系的选择器选择器选择的元素A E元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)A > E元素A的任一子元素E(也就是直系后代)E:first-child任一是其父母结点的第一个子节点的元素EB + E元素B的任一下一个兄弟元素EB ~ EB元素后面的拥有共同父元素的兄弟元素E你可以任意组合以表达更复杂的关系。你还可以使用星号（*）来表示”任意元素“。一般情况下，如果你提高了某个选择器的的确定度，你便提高它...
选择器：CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容一 属性选择器：a) E[attribute] 表示存在attr属性即可；div[class]b) E[attr=val] 表示属性值完全等于val；div[class=mydemo]c) E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；div[class*=mydemo]d) E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；d...
或许大家平时总是在用的选择器都是： id class 以及标签选择器。可是这些还远远不够，为了在开发中更加得心应手，本文总结了30个CSS3选或许大家平时总是在用的选择器都是：#id .class 以及标签选择器。可是这些还远远不够，爱创课堂为了在开发中更加得心应手，本文总结了30个CSS3选择器，希望对大家有所帮助。更多精彩关注：http://www.icketang.com/1 *：通用选择器* { margin:0; padding:0; }*选择器是选择页面上的全部元...
1.1 E:nth-child(n)：表示E父元素的第n个子节点 p:nth-child(odd){ background: red } /* 匹配奇数行 */ p:nth-child(even){ background: red } /* 匹配偶数行 */ p:nth-child(2n){ background: red } /* 自定义行数 */1.2 E:nth-last-child(n)：表示E父元素的第n个子节点，从后向前计算2.1 E:nth-of-type(n)：表示E父元素中的第n个子节点，且类型为E2.2 E:nth-last-of-type(n)：表示E父元素中的第n个子节点，...
CSS3中使用了很多的属性选择器，通过这些属性选择器，可以根据我们自己的设计来定义元素的样式，制作精美的网页。CSS3属性选择器下面是CSS3的属性选择器的语法，及使用。元素名字[元素类型=“类型名字”]：选择器名字{属性：值；属性：值； } 在元素类型匹配时，就可以使用类似正则的匹配方法。 [att=val] 指定特定名字的元素 [att*=val] 匹配val*的元素， [att^=val] 匹配val开头的元素，比如id为val1、val432432都可...
属性选择器 [title]:选择带有title属性的元素 [title=‘hello‘]:选择属性是title并且值是hello的元素 [title~=‘hello‘]:选择属性是title并且部分值是hello的元素，hello需要是单独的值，以空格分开 [title*=‘hello‘]:选择属性是title并且其中包含了hello的元素 [title|=‘hello‘]:选择属性是title并且值是以hello开头并且允许hello后面以-的任意字符 [title^=‘hello‘]:属性以hello开头的任意字符 [ti...
CSS概述 css：层叠样式表（Cascading Style Sheets），由于多个选择器的样式可以叠加在一起，所有叫层叠样式表，主要是用来美化界面。 css可放在页面head的<style></style>内、行内、外部css文件中 1<!DOCTYPE html> 2<html> 3 4<head> 5<meta charset="UTF-8"> 6<title>Document</title> 7<!-- 外链样式 --> 8<link rel="stylesheet" href="a.css"/> 9<!-- 页面css -->10<style>11 div{12 color...
CSS 3 现状 兼容性差，需添加私有前缀／移动端优于PC端／不断改进中／渐进增强原则／考虑用户群体／遵照产品的方案 ； CSS3手册 需要阅读其--阅读及使用指引[]表示全部的可选项 || 或者 | 表示 多选一 ? 表示 0个或1个* 表示 0个或多个{}表示范围 {A}代表出现A次 ，{A,B}代表出现A次以上B次以下 ，B可以省略，{A,} 代表至少出现A次，无上限# 出现1次以上，以逗号隔开，可以选择后面跟大括号的方式精确表示重复次数：...
1. 超链接伪类选择器1、概念超链接的伪类。由于伪类是定义特定的元素状态,所以「超链接的伪类」指的是超链接的状态。2、超链接状态类型链接伪类说明: link未访问的链接状态: visited已访问的链接状态: hover鼠标悬浮的链接状态: active激活的链接状态优先级： link > visited > hover > active含义::hover必须置于:link和:visited之后，才有效:active 必须置于:hover之后，才有效...3、超链接伪类使用a:link{ }a:visited{ }a:hov...
关于CSS3中的选择器属性选择器选择符语法描述E [att]匹配具有att属性的所有元素E [att = "value"]匹配具有att属性且值为value的元素E [att ^= "value"]模糊匹配，以属性值为value打头的元素E [value $= "value"]模糊查询，以属性值为value结尾的元素E [value *= "value"]完全模糊匹配结构伪类选择器这里一共分为两个大类选择符语法描述E:first-child匹配父元素中的第一个子元素EE:last-child匹配父元素中的最后一个子元素EE:nth-ch...
css3选择器有如下几类: 1:基本选择器 1.1:id选择器 # 1.2:类选择器 . 1.3:元素选择器 E 1.4:群组选择器 select1,select2 1.5:通配符选择器 * 2:层次选择器 2.1:E F 后代选择器,选择的是F，F是E的后代 2.2:E>F 子选择器，选择的是F，F是E的儿子节点 2.3:E+F 相邻兄弟选择器，选择的是F，F是紧邻E的节点 2.4:E~F 通用选择器，选择的是F，F是E的后面的节点 3:伪类选择器 3.1:动态伪类选择器 E:li...