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...
1 *：通用选择器?1* { margin:0; padding:0; }*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。 *选择器也可以应用到子选择器中，例如下面的代码：?1#container * { border:1pxsolidblack; }这样ID为container 的所有子标签元素都被选中了，并且设置了border。2 #id：id选择器?1234#container { width: 960px; margin: auto;}id选择器是很严格...
1.属性选择器a[href^=column]，选择属性是column开头的a标签a[href$=column]，选择属性是column结尾的a标签a[href*=column]，选择属性中包含column的a标签2.:root选择器类似于.html3.:empty选择没有内容的标签4.:not选择器a:not[id="footer"]，选择id不是footer的a标签5.#wrap p:first-of-type选择id为wrap的容器里面的第一个p元素 原文：http://www.cnblogs.com/anson19900221/p/4564168.html
下面我们来了解一下css选择器里面的几个:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。3:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开...
扔一些学习W3C时翻译的规范，以个人理解和总结为主，翻译为辅。 原文地址：http://www.w3.org/TR/css3-selectors/ 一、基本概念node和element：element是XML中的概念，是xml的数据组成部分。node是对于tree的结构而言的，元素由结点组成。parent ：父元素children：子元素（直接后代，不包括再往后的后代 = 。 =）slibings ：兄弟元素the subjects of a selector：一个选择器所匹配到的document tree中的元素就是这个选择器的subj...
伪类选择器，和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。a:link|a:visited|a:hover|a:active在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。 由于状态是动态变化的，所以一个元素达到一个特定状态时，它可...
CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行;~:p ~ p {color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/ }[attribute^=value]:选择该属性以特定值开头的元素[attribute$=value]:选择该属性以特定值结尾的元素[attribute*=value]:选择该属性中出现了特定值的元素上边三个是可以组合使用的,方法如 ↓ :实际中可以应用在区分本地链接与外部链接,通过判...
要用到的Css3选择器element:nth-child(number){}选择器匹配属于其父元素的第 number 个子元素参数 Numberodd 奇数even 偶数W3School介绍:http://www.w3school.com.cn/cssref/selector_nth-child.asp完整demo:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>测试</title></head...
1.私有前缀及其用法 在CSS3模块标准尚未被W3C批准或者标准所提议的特性尚未被浏览器完全实现时，浏览器厂商会使用所谓的私有前缀来测试“试验性的”CSS特性。看看CSS3中实现圆角的代码：.round{ -khtml-border-radius:10px; /* Konqueror */ -rim-border-radius:10px; /* RIM */ -ms-border-radius:10px; /* Microsoft */ -o-border-radius:10px; /* Opera */ -moz-border-radius:10px; /* Mozil...