1. p:last-of-type{background-color: red;} 选择p中最后一项
  2.  
  3. p:nth-of-type(2n){background-color: red;} 隔行变色里面也可以填写even 偶数变色 n 是计数器(从 0 开始)

  4. p:nth-of-type(2n+1){background-color: pink;} 隔行变色里面也可以填写odd 奇数变色
  5.  
  6. li:not(:last-child){border-right: 1px dashed black;} 选择全部排除最后一项,
    :last-child
  7. input[type^="text"]{ /**选择具有type属性且属性值为以text开头的字符串的input元素。**/
  8. background-color: red;
  9. }
  10.  
  11. 也可以写成[type^="text"] 这样范围更广一些
  12.  
  13. input[value$="按钮"]{ /**选择具有value属性且属性值为以按钮结尾的字符串的input元素。**/
  14. background-color:pink;
  15. }
  16.  
  17. input[value*="按钮"]{ /**选择具有value属性且属性值为包含按钮的字符串的input元素。**/
  18. background-color: green;
  19. }
  20.  
  21. div:before{display:block;content:"before伪类,前面插入内容";width: 70px;height: 60px;background-color:pink;}
  22. div:after{content:"after伪类,后面插入内容";width: 60px;height: 70px;background-color: green;display:block;}
  23.  
  24. p:nth-of-type(5){background-color: pink;} 选择p元素里面第五个值

CSS3 常用选择器的更多相关文章

  1. CSS3常用选择器(三)

    在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...

  2. CSS3常用选择器(一)

    在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.比如最常用到的#id,.class,标签选择器. 随着CSS3到来,增加了很多新型选择器,这里就常用的做一个总结. 1.属性选择器. 在c ...

  3. CSS3常用选择器

    一.基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father > Children)兼容性:IE8+.FireFox.Chrome.S ...

  4. CSS3常用选择器(二)

    本文继续介绍css3新增的选择器. 1.选择器 first-child.last-child.nth-child 和 nth-last-child 利用这几个选择器能够针对一个父元素中的第一个子元素. ...

  5. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  6. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  7. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  8. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  9. css常用选择器选择器

    tap选择器 ulclass选择器 .id选择器 #后代选择器 a b子代选择器 a>b兄弟选择器 a + b 以a为参考给b加样式属性选择器 input [type="text&qu ...

随机推荐

  1. qt——QObject 与 QWidget 的区别

    QObject是QT中所有类的基类,QWidget是所有UI Widget类的基类,所以QObject是QWidget的基类,从QWidget继承也就表示继承了QObject的所有属性.

  2. A solution for MySQL Assertion failure FIL_NULL

    A solution for MySQL Assertion failure FIL_NULL http://michaelfranzl.com/2014/01/25/solution-mysql-a ...

  3. javascript-js模拟form页面提交跳转

    window.location.href跳转到另外一个界面.但直接传递get方法会暴露数据 下面可以实现跳转的效果,却又能够通过post传递方法隐藏数据. 有一个不足就是,在跳转到新页面后,点击“返回 ...

  4. [LeetCode] 383. Ransom Note_Easy tag: Hash Table

    Given an arbitrary ransom note string and another string containing letters from all the magazines, ...

  5. Oracle彻底删除11gR2 GI

    Oracle彻底删除11gR2 GI 环境:RHEL 6.5 + Oracle 11.2.0.4 GI 需求:在搭建Standby RAC时,安装GI软件期间由于GI安装遇到一些问题,root脚本执行 ...

  6. 软件包管理:rpm命令管理-安装升级与卸载

    严格区分大小写 卸载命令不许再包的目录下执行.

  7. HDU 4500 小Q系列故事——屌丝的逆袭(简单题)

    http://acm.hdu.edu.cn/showproblem.php?pid=4500 AC代码: #include<math.h> #include<stdio.h> ...

  8. PKU2418_树种统计(map应用||Trie树)

    Description Hardwoods are the botanical group of trees that have broad leaves, produce a fruit or nu ...

  9. Codeforces Round #246 (Div. 2) D E

    这题说的是给了一个字符串当前缀和后缀相同的时候就计算此时的 整个串种拥有这样的子串友多少个,没想到用KMP解 用0开头的那种类型的 KMP 今天刚好也学了一下,因为KMP的作用是找出最长前缀 KMP ...

  10. Linux 安装gcc、gcc-c++编译器

    安装环境 Red Hat Enterprise Linux Server release 7.3 (Maipo) 方式一:yum安装 使用ISO制作yum源:Linux 使用系统ISO制作yum源 y ...