css3选择器

css3: nth选择器 我们把CSS3的：nth选择器也称为CSS3 结构类 选择方法： ：first-child()，：last-child () ：nth-child(n) :nth-last-child() :nth-of-type() :nth-last-of-type () :first-of-type() :last-of-type() :only-child() :only-of-type() :empty() 首先我们可以理解，如果我们指定了上面的规则， html页面只要有嵌套，他就会逐级找符合条件的nth选择器 ，符合的都会执行 ：first-child() 选择其父元素的首个子元素的每个Element 元素 效果如下 使用 div效果不一样 如下 ： 这是为什么呢 原因是因为 相对于body来说， 第一个大div 上面的三个div 相当于 body的第一个div 但是 相对于下面的三个 div 它相对于body属于第二个div 但是第二个下面的第一个div 是属于第二个大div里面的第一个div，所以也会变颜色。 同理 ： last-child () 指定属于其父元素的最后一个子元素的Element元素 也是这个原理， 只不过是相反的 前提是 最后一个元素就是我们要匹配的， 如果是其他元素，则不符合。 ：nth-child(n)

1.元素选择器 （1）通用选择器： * 选择到所有的元素； （2）选择子元素： > 选择到元素的直接后代 （3）相邻兄弟选择器： + 选择到紧随目标元素后的第一个元素 （4）普通兄弟选择器： ~ 选择到紧随其后的所有兄弟元素 2.关系选择器 （1）child类型 :first-child 选择父元素下的第一个子元素 :last-child 选择父元素下的最后一个子元素 :only-child 选择父元素下唯一的子元素 :nth-child(n) 父元素下的第n个子元素 :nth-child(odd)/nth-child(2n-1)奇数子元素 :nth-child(even)/nth-child(2n)偶数子元素 nth-child(an+b)公式 :nth-last-child(n) 倒数第n个子元素 （2）of-type :nth-of-type(n) 父元素下的第n个指定类型的子元素 :nth-last-of-type(n) 父元素下的倒数第n个指定类型的子元素 3.属性选择器 （1）E[attr] 属性名，不确定具体属性值 （2）E[attr="value"] 指定属性名，并指定其对应属性值 （3）E[attr ^= "value"] 指定属性名，属性值以value开头 （4）E[attr $="value"] 指定属性名，属性值以value结束 （5）E[attr *=

一、常用选择器 1、类 　　.classname{} 2、id 　　#idName{} 3、标签 　　p{} 4、通配 　　*{} 5、并集：逗号分开 　　.box1,.box2{} 6、交集： 　　.box1.box2{} 二、后代选择器 1、后代：祖先元素 后代元素 .super .sub{} 2、子元素选择器：父元素>子元素 .father>.son{} 三、伪元素与伪类 　　伪类：本质上是用来补充常规选择器无法选择的内容，使用：表示 　　伪元素：可以创建一些语言文档无法创建的虚拟元素，可以在其中添加样式和内容，使用：：表示 1、:before :after 　　p:before{content:'使用伪类添加的内容'} 2、:link点击 :visited点击过的 :hover鼠标滑过 :active正在点击 　　注意：如果一起使用，顺序必须是如上、链接是通过历史记录来判断是否被访问过的，所以visited是能设置文字颜色 3、:focus 5、::before ::after ::first-letter ::first-line 6、否定伪类 　　div:not(.box){} 匹配所有div中除了class为box的所有元素 四、兄弟选择器 1）匹配紧随其后的一个 前一个+后一个 span+p{} 2) 匹配当前元素后面所有的 前一个~后一个 span~p{} 五

选择器的权重问题，这个问题很简单，但很容易让人忽略，所以我在这里提一下 选择器的权重： ！important>内联样式>id选择器>类选择器（class选择器）>类型选择器 >通配符选择器 !important 表示最重要的，在属性值后面添加之后，表示这句代码权重最高层叠样式表：因为同一个元素可以有多种方法去给他添加样式当同一个元素通过几种方法添加了同样的样式的时候，只能选择其一，就会出现选择器的权重问题 包含选择器的权重问题： 选择器的权重我们使用e0ee表示 内联样式---1000 id选择器---0100 class选择器---0010 类型选择器--0001 通配符---00001 包含选择器权重=各个选择器权重之和 .fuqin#son=10+100=110 .fuqin.erzi=10+10=20 继承：表示子元素可以使用一些父元素的样式 注意点：继成的权重是最低的当我们用时不仅要注意前后位置，还要注意他们的权重之和 来源： https://www.cnblogs.com/muyun123/p/11431574.html

1 渐进增强和优雅降级 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和最佳功能达到更好的用户体验。 优雅降级：一开始就构建完整的功能，然后在针对低版本浏览器进行兼容。 　　优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同事保证其根基处于安全地带。 2 CSS3选择器 2.1 属性选择器 a[title] a[title=baidu] 选中title属性为baidu a[href*=sina] href包含sina的元素 a[href^=http] href属性值以value（http）开始的a标签 a[href$=com] href属性以com结尾的a标签 注：若选择的值含有"."、”:"等特殊字符，则需引号包含 2.2 伪类选择器 2.2.1 结构伪类（位置伪类） :link,:visited,:hover,:active; ul:first-child 选中第一个ul ul:last-child 选中最后一个ul li:nth-child(3) 使用条件：是它父元素的第三个子元素且必须是一个li标签 li:nth-last-child(3):倒数第三个元素 2.2.2 空伪类

HTML选择器 三大基础选择器 标签选择器 html{属性：属性值} id选择器 #id{属性：属性值} class选择器 .id{属性：属性值}权重 　　标签的权重最低 按照通常说法分数为1分 　　　　id选择器的权重最高 一般为100分　　　　 class的选择器权重最低 一般为10分　　　　//这里的分数仅仅为了方便判断，实际当中并不存在具体的看文尾 　　 高级选择器 并集　　　　“并集”选择器：同时选中各个基本选择器所选择的范围，任何形式的选择器都可以，并集选择器是多个选择器通过逗号连接而成的。例如h1,h2,h3{color:red;font-size:23px;} 交集 “交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，其中第一必须是标记选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写.div. d1选中一个div标签类名叫d1 后代　　　　选择它里面的后代元素 例如.box .d1 p 选中类名为.box下面的.d1 的p标签 子元素选择器 .d1>a 选择类名为.d1下面的a标签 相邻兄弟选择器 div+p div后面的p标签被选中 普通兄弟选择器 div~p div后面额p标签全部被选中 通配符　　　　　　 *{ color ：red}星号代表所有，让颜色为红色 超链接伪类选择器

　　　　　　　　1、字体样式： 　　　　　　　　　　选择器 { font：font-style font-weight font-size / line-height font-family；} 　　　　　　　　　　例：p { font： italic bold 14px / 1 ' 宋体 ' ；} 　　　　　　　　　　注意：使用 font 属性时， 必须按上面语法格式中的顺序书写 ，不能更换顺序，各个属性以空格隔开 　　　　　　　　　　　　　不需要的属性可以省略，但 必须保留 font-size 和 font-family 属性 ，否则 font 属性不起作用。 　　　　　　　　2、结构（位置）伪类选择器（CSS3） 　　　　　　　　　　：first-child，选取第一个子元素 　　　　　　　　　　：last-child，选取最后一个元素 　　　　　　　　　　： nth-child（n） ，选取第 n 个元素，可以是 even 偶数， odd 奇数 ， 如果用公式 n 从 0 开始 ，倍数：2n，3n 　　　　　　　　　　：nth-last-child（n），倒数，选取第 n 个元素 　　　　　　　　3、目标伪类选择器（：target） 　　　　　　　　　　 ：target 目标伪类选择器，可用于选取当前活动的目标元素，更改样式。 　　　　　　　　　　例如： 　　　　　　　　　

基本选择器 非CSS3新增的选择器（最最基本的选择器） 　　通配符选择器：选中文档中所有元素 　　元素选择器：选中文档中某一标签的所有元素 　　类选择器：选中文档中某一class属性值的所有元素 　　ID选择器：选中文档中特定ID值的元素 　　后代选择器：结合元素、类和ID选择器，选中父元素下的某一子元素，父元素和子元素间用空格隔开 　　群组选择器：把需要应用相同样式的选择器放在一起，中间逗号隔开 　　 CSS3新增的选择器 子元素选择器（直接后代选择器） 　　只能选取元素下的子元素，不可选中孙元素 　　语法为父元素>子元素 　　 相邻兄弟元素选择器 　　选取指定元素相邻的下一个元素为指定元素的元素（说法有点绕，具体看图例） 　　语法为 父元素>子元素+兄弟元素 （只有 紧邻指定子元素的 第一个 兄弟元素 被选中） 　　 通用兄弟选择器 　　选取指定元素的后续所有指定类型的元素（具体看案例） 　　语法为 父元素>子元素~兄弟元素 （子元素后 所有 指定的兄弟元素 全部被选中） 　　 属性选择器 　　选中带有指定属性的HTML元素并设置样式 　　主要是针对其中的属性值来设置的 　　element[attribute]：选择所有带有attribute属性的元素 　　element[attribute="value"]：选择所有attribute属性值为value的元素（必须 一模一样