css3选择器

css3选择器

﹥>﹥吖頭↗ 提交于 2020-03-28 16:53:35
CSS3 css3属性选择器 根据属性名查找某个标签(E[attr]),代码如下 <style> p {height: 30px; border: 1px solid black;} // 查找含有属性test的p标签 p [test] {background: red;} </style> <body> <p test="dhl">dhl</p> <p test="xb">xiaobei</p> </body> 查找某个属性名为固定值的某个标签(E[attr="value"]),测试代码如下: <style> p {height: 30px; border: 1px solid black;} // 查找test属性值为dhl的p标签 p [test="dhl"] {background: red;} </style> <body> <p test="dhl">dhl</p> <p test="xb">xiaobei</p> </body> E[attr~="value"] 指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表包含了一个value词,而且等号前面的"~"不能不写,详细代码如下: <style> p {height: 30px; border: 1px solid black;} // 查找含有属性test

CSS3高级

廉价感情. 提交于 2020-03-14 13:16:39
CSS3高级 Day01 复杂选择器 内容生成 多列 CSSHack(浏览器兼容) 1、兄弟选择器 匹配指定元素的相邻兄弟元素 1、相邻兄弟选择器 匹配相邻的元素 匹配当前元素【后面】的【一个】元素,前提两者必须拥有相同父元素 语法: selctor1+selector2 通过 + 作为结合符 eg: div+p{} 注意:只找与当前元素相关的后面一个紧挨着他的兄弟元素,如果符合则匹配,不符合也不会向下查找。 2、通用兄弟选择器 匹配当前元素【后面】的【所有】【兄弟】元素 语法: selector1~selector2 div.first span~b.bold_700{ } 使用 ~ 作为结合符 div ~ p 注意:第二个元素不必紧紧跟随第一个元素的后面 练习1: 1、通过指定元素 修改其相邻兄弟为红色字体 div.s1+p{ color:red; } 2、通过指定元素 修改其通用兄弟为#ccc背景 div.s1~p{ background:#ccc; } <p> <div>指定元素 <p> <p> 2、属性选择器 能够将元素附带的属性用于选择器中,对带有指定属性的元素设置样式 语法: 1、[属性名] 选择 带有 指定属性 的元素 [title] : 匹配包含title属性的所有元素 2、元素[属性名] p[id] : 匹配所有包含id属性的p元素 div[title] :

CSS3高级

不问归期 提交于 2020-03-14 12:57:02
CSS3高级 Day01 复杂选择器 内容生成 多列 CSSHack(浏览器兼容) 1、兄弟选择器 匹配指定元素的相邻兄弟元素 1、相邻兄弟选择器 匹配相邻的元素 匹配当前元素【后面】的【一个】元素,前提两者必须拥有相同父元素 语法: selctor1+selector2 通过 + 作为结合符 eg: div+p{} 注意:只找与当前元素相关的后面一个紧挨着他的兄弟元素,如果符合则匹配,不符合也不会向下查找。 2、通用兄弟选择器 匹配当前元素【后面】的【所有】【兄弟】元素 语法: selector1~selector2 div.first span~b.bold_700{ } 使用 ~ 作为结合符 div ~ p 注意:第二个元素不必紧紧跟随第一个元素的后面 练习1: 1、通过指定元素 修改其相邻兄弟为红色字体 div.s1+p{ color:red; } 2、通过指定元素 修改其通用兄弟为#ccc背景 div.s1~p{ background:#ccc; } <p> <div>指定元素 <p> <p> 2、属性选择器 能够将元素附带的属性用于选择器中,对带有指定属性的元素设置样式 语法: 1、[属性名] 选择 带有 指定属性 的元素 [title] : 匹配包含title属性的所有元素 2、元素[属性名] p[id] : 匹配所有包含id属性的p元素 div[title] :

14-高级选择器

天涯浪子 提交于 2020-03-02 20:34:45
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box1,.box2{ width: 200px; height: 100px; background-color: #ff0789; transition: 2s; } .box1:hover+.box2{ background-color: greenyellow; } .box2:active{ background-color: aqua; } ul li{ background-color: #ff0789; } ul :nth-child(odd){ background-color: aqua; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 后代选择器 .box1 .box2 选择

css3选择器

回眸只為那壹抹淺笑 提交于 2020-02-29 15:34:16
css3 CSS3是css技术的升级版本 ,CSS3语言开发是朝着 模块化发展 的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局 等。 CSS3的优点 :CSS3将完全 向后兼容 ,所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将 继续支持CSS2 。对我们来说,CSS3主要的影响是将可以使用新的可用的选择器和属性,这些会允许实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出现在的设计效果(比如说使用分栏),另外一方面,由于受支持设备和浏览器厂商的限制,设备或者厂商可以有选择的支持一部分模块,支持CSS3的一个子集,这样有利于CSS3的推广 。 css3选择器(选择符) HTML中,我们常需要给元素添加很多附加的信息,比如样式和行为等,各种元素会有不同的信息,为了精确的找到这个元素,css引入了选择符这个概念,通过一些属性来区分这些元素,在CSS2中引入了一些属性选择器,比如id,class等,而***CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念***,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器 属性选择器 E为选择符

05-伪类选择器

早过忘川 提交于 2020-02-29 14:21:12
伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则" LoVe HAte 1 /*没有被访问的a标签的样式*/ 2 .box ul li.item1 a:link{ 3 4 color: #666; 5 } 6 /*访问过后的a标签的样式*/ 7 .box ul li.item2 a:visited{ 8 9 color: yellow; 10 } 11 /*鼠标悬停时a标签的样式*/ 12 .box ul li.item3 a:hover{ 13 14 color: green; 15 } 16 /*鼠标摁住的时候a标签的样式*/ 17 .box ul li.item4 a:active{ 18 19 color: yellowgreen; 20 } View Code 再给大家介绍一种css3的选择器nth-child() /*选中第一个元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*选中最后一个元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*选中当前指定的元素 数值从1开始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; }

css3选择器

冷暖自知 提交于 2020-02-23 00:18:39
本人有幸成为逆战班的一员,接触并学习HTML5,今天总结一下CSS3选择器的学习内容。在总结之前,我们先了解一下,什么是 CSS选择器 ? CSS选择器是一种将CSS效果应用到某一个或者多个xhtml标记上的一种选择机制。 div{backgroung-color: red} 接下来,我将分类说明我在逆战班目前所学CSS选择器内容: 1:ID选择器 ID选择器,以#开始,数字或字母结尾。在一个页面中,ID是唯一值,不能重复使用。可以通过快捷键创建(div#elem+tab键→<div id=“elme”></div>)。 2:CLASS选择器(类选择器) CLASS选择器,名称以点开始,字母或数字结尾。可以重复使用,对多个标签应用。可以通过快捷键创建(div.elem+tab键→<div class=“elme”></div>)。 3:标签选择器(TAG选择器) 标签选择器,名称均为html标签,使用到该标签,CSS效果作用到该标签。一般不常用,基本用来去掉默认样式,例如ul{list-style: none},a{text-decoration: none}。 4:群组选择器(分组选择器) 群组选择器,控制多个并列元素的效果,如图所示,对三个元素同时起作用。 5:通配选择器 通配选择器,*号为名称,对所有元素起作用,一般用来去掉所有标签的默认样式。 6:层次选择器 后代:div

CSS3 :nth-child() 选择器

狂风中的少年 提交于 2020-02-14 05:27:50
实例 规定属于其父元素的第二个子元素的每个 p 的背景色: p:nth-child(2) { background:#ff0000; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera 所有主流浏览器均支持 :nth-child() 选择器,除了 IE8 及更早的版本。 定义和用法 :nth-child( n ) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 提示:请参阅 :nth-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素。 亲自试一试 - 实例 实例 1 Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。 在这里,我们为奇数和偶数 p 元素指定两种不同的背景色: p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; } 亲自试一试 实例 2 使用公式 ( an + b )。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。 在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色: p:nth-child(3n+0) { background:#ff0000; } 来源: https:/

CSS3选择器之学习笔记

三世轮回 提交于 2020-02-14 05:20:16
首先说first-child与last-child,这两个选择器很容易明白,就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素,甚至第偶数个、奇数个子元素精选样式的制定。 /*选择器写法示例*/ nth-child(n) //正数第n个子元素 nth-last-child(n) //倒数第n个子元素 nth-child(odd) //正数下来所有的第偶数个子元素 nth-last-child(even) //倒数上去的第奇数个子元素 那么nth-of-type与nth-last-of-type呢? 在一个div中有数篇文章,h2与p多次使用的情况要对h2实现奇偶异色,如果使用nth-child或是nth-last-child来实现就会发现一些问题(不提供demo代码,读者可自行编写h2ph2ph2p如此),试验的结果是没有出现奇偶异色,仅仅是奇数的变色了。 这个问题产生的原因是,nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素中的所有子元素一起计算的。换句话说,”h2:nth-child(odd)”这句话的含义,并不是指“针对div元素中第奇数个h2子元素来使用”,而是指“当div元素中的第奇数个子元素是h2子元素的时候使用。”(demo的话h2,p相互交错

WEB前端使用的CSS3选择器

久未见 提交于 2020-02-14 05:16:31
首先说first-child与last-child,这两个选择器很容易明白,就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素,甚至第偶数个、奇数个子元素精选样式的制定。 /*选择器写法示例*/ nth-child(n) //正数第n个子元素 nth-last-child(n) //倒数第n个子元素 nth-child(odd) //正数下来所有的第偶数个子元素 nth-last-child(even) //倒数上去的第奇数个子元素 那么nth-of-type与nth-last-of-type呢? 在一个div中有数篇文章,h2与p多次使用的情况要对h2实现奇偶异色,如果使用nth-child或是nth-last-child来实现就会发现一 些问题(不提供demo代码,读者可自行编写h2ph2ph2p如此),试验的结果是没有出现奇偶异色,仅仅是奇数的变色了。 这个问题产生的原因是,nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素中的所有子元素一起计算的。换句话 说,”h2:nth-child(odd)”这句话的含义,并不是指“针对div元素中第奇数个h2子元素来使用”,而是指“当div元素中的第奇数个子 元素是h2子元素的时候使用。”(demo的话h2,p相互交错