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

靠人脉奋斗生活

靠人脉奋斗生活

2016-02-19 10:16

下面这个HTML5新增的Css选择器、伪类介绍教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!
选择器
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
展开更多 50%)
分享

猜你喜欢

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

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

CSS3伪类选择器:nth-child()

Web开发
CSS3伪类选择器:nth-child()

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

css 类选择器和id选择器

Web开发
css 类选择器和id选择器

CSS:浏览器特定选择器介绍

Web开发
CSS:浏览器特定选择器介绍

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

最常用的五类CSS选择器

Web开发
最常用的五类CSS选择器

渲染CSS选择器

Web开发
渲染CSS选择器

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

ibm电源管理驱动程序的老版本解决办法

ibm电源管理驱动程序的老版本解决办法

MySQL 数据库两台主机同步实战(linux)

MySQL 数据库两台主机同步实战(linux)
下拉加载更多内容 ↓