css3学习总结1--CSS3选择器

CSS3的属性选择器主要包括以下几种:

  • 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
  • 2. E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
  • 3. E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;

示例

.classNamea[href^="http://"]{background:orange;color:blue;}.classNamea[href$="png"]{background:green;color:black;}.classNamea[title*="hubwiz"]{background:black;color:white;}

CSS3选择器,或者CSS3结构类,首先列出他具有的选择方法:

  • 1. :first-child选择某个元素的第一个子元素;
  • 2. :last-child选择某个元素的最后一个子元素;
  • 3. :first-of-type选择一个上级元素下的第一个同类子元素;
  • 4. :last-of-type选择一个上级元素的最后一个同类子元素;

示例:

.classNameli:first-child {background: green; border: 1px dashed blue;}
.classNameli:last-child {background: green; border: 2px dashed blue;}
.className> p:first-of-type {background: green;}

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


  • 5. :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;}

       如下,匹配第3-1=2、第6-1=5、…、第3的倍数减1个p元素

p:nth-child(3n-1){background:#33FF33;}

  

    4. 奇偶匹配 :nth-child(odd)与:nth-child(even)分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

这里,我们为奇数和偶数p元素指定两种不同的背景色:

p:nth-child(odd){background:#ff0000;}
p:nth-child(even){background:#0000ff;}
  • 6. :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
.className p:nth-last-child(4) {background: red;}

 

  • 7. :nth-of-type()选择指定的元素;

     :nth-of-type类似于:nth-child,不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素,这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处。

  • 8. :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;

    :nth-last-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素,从最后一个子元素开始计数(n可以是数字或公式)。

  • 9. :only-child选择的元素是它的父元素的唯一一个了元素;

    E:only-child,匹配那些是其父元素唯一子元素的E元素。简单来说就是匹配父元素中只有一个子元素的类型元素。说白了就是E元素的父级只有它本身一个子元素。

  • 10. :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;

  :only-of-type是表示一个元素他有很多个子元素,而其中只有一个子元素是唯一的。

   所以我们使用这种选择器就可以选中元素的唯一子元素。

   说白了就是选择它的各类型子元素中个数只有一个的那一类

div :only-of-type{
background-color: green;
}

  

  • 11. :empty选择的元素里面没有任何内容。

  empty是用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。

时间: 07-04

css3学习总结1--CSS3选择器的相关文章

CSS3学习笔记(1)-CSS3选择器

CSS3与CSS2相比发生了很大的变化,CSS3的亮点功能包括实现圆角.阴影.新的flex伸缩布局模型.多列布局模型.填充色的渐变.2D变形(位移.缩放.旋转.倾斜).3D变形.动画(transition过渡动画.animation关键帧动画)等.看到这些字眼,你实际上已经可以深深感受到CSS3的野心,通过这些东西基本上都可以做出很棒的多媒体演示了,flash.Powerpoint制作演示也无外乎这些东西而已! 确实如此,CSS从CSS3开始,已经从单纯的实现静态页面元素布局美化之中超脱出来,向

CSS3学习笔记一(选择器)

属性选择器: E[attr] 包含attr属性的E E[attr="value"] 包含attr属性值为value的E E[attr~="value"] 包含attr属性的值列表中含有value的E E[attr^="value"] 包含attr属性的值是以value开头的E E[attr$="value"] 包含attr属性的值是以value结束的E E[attr*="value"] 包含attr属性的值

CSS3学习笔记(4)-CSS3函数

p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0; } .alexrootdiv>div>p:first-of-type,.alextitlep{ font-size: 18px; font-weight: bold; color: red;

CSS3学习笔记(2)-CSS3边框

p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0; } .alexrootdiv>div>p:first-of-type,.alextitlep{ font-size: 18px; font-weight: bold; color: red;

CSS3学习笔记(3)-CSS3边框

p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0; } .alexrootdiv>div>p:first-of-type,.alextitlep{ font-size: 18px; font-weight: bold; color: red;

CSS3学习手记(二) 伪类选择器

伪类选择器 动态伪类 UI元素状态伪类 CSS3结构类 否定选择器 伪元素 动态伪类 这些伪类并不存在于HTM中,只有当用户和网站交互的时候才能体现出来 锚点伪类 :link  :visited 用户行为伪类 :hover :active :focus(获取鼠标焦点) UI元素状态伪类(CSS3新增) 我们把:enabled,:disabled,:check伪类称为UI元素状态伪类 兼容IE9以上  check只兼容OPera <!DOCTYPE html> <html> <

css3学习笔记三

css3有些特殊的元素选择器这和jquery相似.效果图如下 黑色的小球是旋转3D效果不是特别明显,主要是学习的是对每个小球的控制.上代码. <!DOCTYPE html><html>  <head>    <title>Ball.html</title>        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&g

CSS3学习笔记

这两天的CSS3学习笔记: 慕课网课程地址: http://www.imooc.com/learn/33 笔记: 边框: 圆角效果border-radius:同border相同的缩写方式: 阴影box-shadow: 参数说明: 说明: 单位除了用px也可以用百分比: 多个阴影:用逗号隔开即可: 模糊半径与扩展半径的区别: 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊: 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整

css和css3学习

css和css3学习  css布局理解  css颜色大全  样式的层叠和继承  css ::before和::after伪元素的用法 中文字体font-family常用列表 css选择器  Flex布局

HTML5与CSS3权威指南之CSS3学习记录

title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) 官方网站: 华章图书 书中所有代码下载链接: 链接:http://pan.baidu.com/s/1c0oGMn2 密码:f7zt 选择器 属性选择器 [att=val]选择器--选择属性att值为val的元素 [att*=val]选择器--选择属性att值包含val的元素 [att^=val]选择器--选