1、实例源码 CSS3的[att^=val]选择器 [id^=div_border]{ background-color:#9F6; width:160px; font-family:微软雅黑; font-size:18px; font-size-adjust:!important; font-stretch:expanded; font-style:oblique; font-variant:inherit; font-weight:bolder; alignment-adjust:after-edge; alignment-baseline:alphabetic; marquee-speed:normal; } [id^=child]{ background-col...
一：基本介绍 1：css版本 css1: 定义了网页的基本属性：字体，颜色，补白，基本选择器等等。 css2：添加了高级功能：浮动，定位，高级选择器（子选择器，相邻选择器，通用选择器） css3：遵循模块化开发。发布时间并不是一个时间点，而是时间段。（2002-至今） 2：css3新特性 （1）CSS选择器 （2）新的颜色制式和透明设定 （3）多栏布局的实现 （4）多背景图效果 （5）文字阴影效果 （6）开放的网络字体类...
last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。 示例演示 通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色 （提示：这个段落不是“div.wrapper”容器的最后一个子元素）。 HTML代码： 我是第一个段落 我是第二个段落 我是第三个段落 我是第一个Div元...
CSS3模块化结构 CSS历史发展 CSS（Cascading Style Sheet），层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS3属性选择器 E[attr=val]表示具有属性att且其值等于val E[attr*=val]表示具有属性attr且其值中包含val E[attr^=val]表示具有属性attr且其值以val开头 E[attr$=val]表示具有属性attr且其值以val结尾 事实上除了以上四个之外还有俩用的相对比较...
css3 选择器 根据所获取页面中元素的不同，把css3选择器分为五大类： 基本选择器 层次选择器 伪类选择器 动态伪类选择器 目标伪类选择器 语言伪类选择器 UI元素状态伪类选择器 结构伪类选择器 否定伪类选择器 伪元素 属性选择器 基本选择器 基本选择器是CSS中使用最频繁，最基础，也是CSS中最早定义的选择器。通过基本选择器可以确定HTML树形结构中大...
CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/} [attribute^=value]: 选择该属性以特定值开头的元素 [attribute$=value]: 选择该属性以特定值结尾的元素 [attribute*=value]: 选择该属性中出现了特定值的元素 上边三个是可以组合使用的,方法如 ↓...
话说园子里也混迹多年了，但是基本没写过blog，写点基础的，那就从css3选择器开始吧。 Css3选择器 先说下，为什么提倡使用选择器。 使用选择器可以将样式与元素直接绑定起来，在样式表中什么样式与什么元素匹配一目了然，修改起来也很方便。 减少样式表的代码量。 属性选择器 1.[att*=val]属性选择器 意义：表示元素用att表示的属性的属性值包含用val表示的字符，则该元素使用这个样式 ...
之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色。今天有兴趣查看了一下，原来是一个很简单的CSS3的选择器::selection的用法。 上例子： .selectColor::selection{color:#fff;background:pink;} .selectColor::-moz-selection{color:#fff;background:pink;} .selectColor::-webkit-selection{color:#fff;background:pink;} 普通文本，不设置::section,选中时文本的颜色为白色...
直接开始正文。 一、属性选择器 属性选择器就是根据元素的属性及属性值来选择元素，用好属性选择器可以让你的级别上升一个层次。 1、只根据属性选择元素 适用于希望选择有某个属性的元素，只关心属性不关心属性值。。 Note：元素和方括号中间没有冒号，也不能有空格，方括号之间也不能有空格。 a、根据一个属性选择【E[Attr]】： *[title]{color:blue;}就可以给所以带title的元素设置样式。 a[href]{color:red;}只对...
接css3选择器（一） 八、结构性伪类选择器【:nth-child(n)】 :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素，和jquery中一样。 其中"n"是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式（2n+1,-n+5）和关键字(odd【奇数】、even【偶数】)，但是参数n的值起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。 Note:当“:nth-child(n)”选择器中的n为一个表达式时，其...
接css3选择器（一） 接css3 选择器（二） 这篇和前两篇内容相关性不大，主要是涉及到一些css3的状态选择器，所以标题从一开始。 一、【:enabled】选择器 一看这个属性就知道是专为表单元素提供的。在表单中输入框，密码框，复选框都有可用(:enabled)和不可用（:disabled）状态，默认情况，这些表单元素都处在可用状态。可通过选择器:enabled为这些表单元素设置样式。 举例：可用输入框设置样式。 div { margin: 3...
css3新增加的选择器 一、属性选择器： E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字母c开头的E[attr$=b] 以这个字母b结尾的E[attr*=a] 只要包含a这个字母就行E[attr|=z] 只要以字母z-开头的或者就是字母z的 二、结构性伪类选择器： E:nth-child(n) 第n个子节点div:nth-child(odd) 奇数行div:nth-child(even) 偶数行div:nth-child(2n) 2的倍数E:nth-last-chil...
CSS selector level 3规范中定义了一些和文档层级结构有关的连接选择器（或称组合选择器）， 分为后代选择器（Descendant combinator/Child combinators）和同级选择器（Sibling combinators）： 其中后代选择器分以下3个： 1. 空格。div p: 表示p是div的后代元素, div是p的祖先。该选择器选择所有div下的p后代元素。2. 箭头（>）。表示直系关系。div > p 表示div的儿子辈的元素。 3. 星号（*）。表示隔代关系。div ...
每个前端工程师可能每天都会写一些css，其中选择器是很主要的一部分。但是，大家可能每天写的大多是#id,.class这样的选择器，这并不稀奇，但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器，就可以简化我们的代码。 我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度，如果有需要，可以在这里查看它的浏览器支持情况：「caniuse.com」。 一、基本选择器 1. 通配选择器 「*」 ...
CSS选择器复习 通用选择器：* 选择到所有的元素 选择子元素：> 选择到元素的直接后代(第一级子元素) 相邻兄弟选择器：+ 选择到紧随目标元素后的第一个元素 普通兄弟选择器：~ 选择到紧随其后的所有兄弟元素 伪元素选择器： ::first-line 匹配文本块的首行 ::first-letter 选择文本块的首字母 伪类选择器： :before, :after在元素内容前面、后面添加内容(相当于行内元素) CSS3结构选择器 :nth-child 选择指定索引处的子元...