属性选择器

  • 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;

  • .wrap a[href^="http://"]{background:orange;color:blue;}
  • 2. E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;

    .wrap a[title*="hubwiz"]{background:black;color:white;}
  • 3. E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;

    .wrap a[href$="png"]{background:green;color:black;}

选择某个元素的第一个子元素<:first-child>

.wrap li:first-child {background: green; border: 1px dashed blue;}

选择某个元素的最后一个子元素<:last-child>

.wrap li:last-child {background: green; border: 2px dashed blue;}

选择某元素下的第一个同类子元素<:first-of-type>

.wrap  p:first-of-type {
background: green;
}

选择某元素的最后一个同类子元素<:last-of-type>

.wrap  p:last-of-type {
background: green;
}

选择某元素的一或多个特定的子元素<:nth-child()>

1. 简单数字序号写法 :nth-child(number),直接匹配第number个元素。参数number必须为大于0的整数。

如下,把第3个p的背景设为绿色:

p:nth-child(3){background:green;}

2. 倍数写法 :nth-child(an),匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。

如下,把第2、第4、第6、…、所有2的倍数的p的背景设为蓝色:

p:nth-child(2n){background:blue;}

3. 倍数分组匹配 :nth-child(an+b)与:nth-child(an-b),先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。

如下,匹配第1、第4、第7、…、每3个为一组的第1个p元素

p:nth-child(3n+1){background:orange;}

选择元素并倒序计算<:nth-last-child()>

":nth-last-child()"选择器和前面的":nth-child()"很相似,只是这里多了一个last,所以他起的作用就和前面的":nth-child"不一样了,它是从最后一个元素开始算,来选择特定元素。

如下使用:nth-last-child()选择器来选择元素并添加样式:

.wrap p:nth-last-child(4) {background: red;}

匹配其父元素中有唯一子元素的元素<:only-child>

p:only-child
{
background:red;
}

选择没有任何内容的元素<:empty>

p:empty {
display: none;
}

CSS3 边框

CSS3 圆角边框

border-radius:

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

CSS3 边框阴影

box-shadow:
div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3 边框图片

border-image:

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3 背景

调整背景图片的大小:

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

规定背景图片的定位区域:

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3 文本效果

向文本应用阴影:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

CSS3 自动换行:

word-wrap:允许对长单词进行拆分,并换行到下一行:
p {word-wrap:break-word;}
												

CSS3 (一)的更多相关文章

  1. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  3. CSS3 3D立方体效果-transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  4. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  5. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  6. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. 前端制作动画的几种方式(css3,js)

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  9. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  10. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

随机推荐

  1. [BZOJ1663] [Usaco2006 Open]赶集(spfa最长路)

    传送门 按照时间t排序 如果 t[i] + map[i][j] <= t[j],就在i和j之间连一条边 然后spfa找最长路 #include <queue> #include &l ...

  2. Spring-IOC源码解读2.1-BeanDefinition的Resource定位

    Spring通过ResourceLoader来处理得到的Resource.在前面我们知道容器初始化是以refresh()方法为入口的,内部的实现首先准备上下文,然后通过obtainFreshBeanF ...

  3. jenkins异常解答

    1.安装插件时offline 需要更换插件管理中的升级URL   http://mirror.xmission.com/jenkins/updates/current/update-center.js ...

  4. 表单禁用复制、粘贴、及右击菜单(contextmenu、oncopy、oncut、onpaste、onselectstart)

    禁用右键菜单,可以使用oncontextmenu属性: <textarea oncontextmenu="return false"></textarea> ...

  5. msp430项目编程37

    msp430中项目---usb接口编程37 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结

  6. 转载 gdb调试程序

    转载自csdn,作者haoel,链接http://blog.csdn.net/haoel/article/details/2879 用GDB调试程序 GDB概述———— GDB是GNU开源组织发布的一 ...

  7. set_include_path() &&get_include_path()用法

    function initialize(){    set_include_path(get_include_path().PATH_SEPARATOR . "core/");   ...

  8. hdu 2686 费用流 / 双线程DP

    题意:给一个方阵,求从左上角出到右下角(并返回到起点),经过每个点一次不重复,求最大获益(走到某处获得改点数值),下来时每次只能向右或向下,反之向上或向左. 俩种解法: 1  费用流法:思路转化:从左 ...

  9. Jetson TK1 三:项目相关安装

    ROS.QT.pyserial2.7.罗技手柄驱动.navigation.slam和rviz等 激光雷达IP设置,tk1对应的IP设置,tk1串口设置 一.安装ros参见官网 二.安装QT 百度QT官 ...

  10. 安装Django时解决的问题-mysql及访问(附pycharm激活)

    1.做些软链接和virtualenv的基本使用: ln -s /data/linkdood/im/vrv/python36/bin/python3.6 /usr/bin/python3 ln -s / ...