HTML5新增的Css选择器、伪类介绍

2016-02-19 10:16 7 1 收藏

下面这个HTML5新增的Css选择器、伪类介绍教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

选择器
p[name^=my]{font-size:14px}
选择器 ^= 讲规则应用到所有 name属性以my开头的p元素标签
p[name$=my]{font-size:14px}
选择器 $= 讲规则应用到所有 name属性以my结尾的p元素标签
p[name*=my]{font-size:14px}
选择器 $= 讲规则应用到所有 name属性包含my结尾的p元素上
选择器 、 + 、~
选择器表示受影响的元素是第一个元素的子元素。
选择器+这 个选择器引用紧跟元素之后的元素,这两个元素必须有相同父级。
选择器~与+类似,但受影响的元素不一定紧跟第一个元素。

伪类与引用元素名称之间要加:
例:myclass:nth-child(2)
myclass元素中的第二个素
关键字odd ,even
myclass:nth-child(odd):影响其父元素索引位置为奇数的
myclass:nth-child(even):影响其父元素索引位置为偶数的

代码如下:

style
.test:nth-child(odd)
{
color:Blue;
}
.test:nth-child(even)
{
color: Red;
}
.test:nth-child(2)
{
color: Green;
}
/style
div class="test"
p
1
/p
p
2
/p
/div
p class="test"
1
/p
p class="test"
2
/p
p class="test"
1
/p
p class="test"
2
/p

效果如下:
1
2
1
2
1
2
否定伪类
:not(p){color:red}
除了p元素之外的其他元素都为red

来源:http://www.tulaoshi.com/n/20160219/1593990.html

延伸阅读
标签: Web开发
相关阅读文章:CSS3属性选择符介绍 4.7.3 结构伪类(Structural pseudo-classes) CSS 3增加了大量的结构伪类,利用文档结构树来实现表现,从而可以减少页面内class属性和ID属性的定义,使得文档更加简洁。 1. E:root 匹配文档的根元素。在(X)HTML中,根元素就是html元素。例如: :root { border: 1px solid blue; } 在(X)HTML...
标签: Web开发
去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。 笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS 2...
标签: Web开发
在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素。这些模式叫着选择符(selector)。 一条CSS规则(rule)是选择符{属性:值;属性:值;}(selector {property:value;property1:value2;}),即选择符决定了{}中的声明(declaration)匹配哪个元素。 类:在HTML中当表现class属性的时候,人们可以用点...
标签: Web开发
代码如下: -webkit-transition: all 0.5s; color: #b91003; margin-left: 40px !important; 效果是 在0.5秒内容字体颜色逐渐红 向左边逐渐margin-left直到40px
CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也都意识到了它是有用的,CSS 选择器远未发挥它们的潜力,有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。 避免让这些瘟疫在你的标签中传播并保持其简洁...

经验教程

203

收藏

100
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部