1. ---条件选择器:---
  2.  
  3. .ccc[cusid*= value]
  4.  
  5. {
  6.  
  7. backgroud-color:#0094ff;
  8.  
  9. } //表示使用了class="ccc"元素自定义属性cusid的值包含value字符的即可使用如下样式。
  10.  
  11. [cusid^= value]
  12.  
  13. {
  14.  
  15. backgroud-color:#0094ff;
  16.  
  17. } //表示元素自定义属性cusid的值以value字符开头的即可使用如下样式。
  18.  
  19. [cusid$= value]
  20.  
  21. {
  22.  
  23. backgroud-color:#0094ff;
  24.  
  25. } //表示元素自定义属性cusid的值以value字符结尾的即可使用如下样式。
  26.  
  27. ---伪选择器:---
  28.  
  29. p:first-line
  30.  
  31. {
  32.  
  33. backgroud-color:#0094ff;
  34.  
  35. }//将p的第一行内容变使用该样式。
  36.  
  37. p:first-letter
  38.  
  39. {
  40.  
  41. backgroud-color:#0094ff;
  42.  
  43. }//将p的第一个子或其第一个单词的首字母使用该样式。
  44.  
  45. li:before
  46.  
  47. {
  48.  
  49. content:"a";
  50.  
  51. color:red;
  52.  
  53. }//给所有的li之前加一个字母a并且为红色(若为after则为在后面追加该内容)。
  54.  
  55. ---结构性伪类选择器:---
  56.  
  57. :root
  58.  
  59. {
  60.  
  61. backgroud-color:#0094ff;
  62.  
  63. }//给根级元素使用样式(范围要大于body)。
  64.  
  65. :empty
  66.  
  67. {
  68.  
  69. backgroud-color:#0094ff;
  70.  
  71. }//给标签内容为空的标签设置上背景。
  72.  
  73. body *:not(h1)
  74.  
  75. {
  76.  
  77. backgroud-color:#0094ff;
  78.  
  79. }//给body元素使用样式但除了其中的h1。
  80.  
  81. :target
  82.  
  83. {
  84.  
  85. backgroud-color:#0094ff;
  86.  
  87. }//若一个超链接href绑定了一个元素(如:<a href="#A"></a>..<div id="A"></div>),当点击超链接之后该元素会使用其样式。
  88.  
  89. ---以ul中的li为例:---
  90. li:first-child
  91. {
  92. backgroud-color:#0094ff;
  93. }//将第一个li变色
  94. li:nth-child(3)
  95. {
  96. backgroud-color:#0094ff;
  97. }//将第三个li变色
  98. li:nth-child(even)
  99. {
  100. backgroud-color:#0094ff;
  101. }//将偶数(odd为奇数)li变色
  102. ---以inputtype="email"表单元素为例:---
  103.  
  104. input[type="email"]:invalid
  105. {
  106. backgroud-color:red;
  107.  
  108. }//如果写入的表单内容不合法则显示红色
  109. input[type="email"]:valid
  110. {
  111. backgroud-color:#0094ff;
  112.  
  113. }//如果写入的表单内容合法则显示#0094ff
  114.  
  115. ---选中文本区域变色---
  116. ::selection
  117. {
  118. backgroud-color:green;
  119. }//选中的文本区域变为绿色
  120.  
  121. input[type="text"]::selection
  122. {
  123. backgroud-color:green;
  124. }//所有input,text元素内选中的文本区域变为绿色
  125.   
  126. ---控制兄弟元素---
  127. div~span
  128. {
  129. background:red;
  130. }//所有div的span兄弟变红色
  131. 如:2,3变色,而1不变色
  132. <div>
  133. <span>1</span>
  134. </div>  
  135. <span>2</span>
  136. <span>3</span>
  137. ---在一个元素前后加样式(并不添加元素)---
  138. #a:before{
  139. /*这里写123hello前边的样式代码*/
  140. }
  141. #a:after{
  142. /*在这里写123hello后边的样式代码*/
  143. }
  144. <div id="a">123hello</div>

CSS3新添加的选择器的更多相关文章

  1. css3新增加的选择器

    css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...

  2. CSS3新添加的属性

    1.圆角设置 border-radius:15px 50px 30px 5px; /*四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下 角. 三个值: 第一个值为左上角, ...

  3. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  4. 总结CSS3新特性(Transform篇)

    概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫 ...

  5. HTML5新规范和CSS3新特性

    1.HTML5最新规范(HTML5是HTML.XHTML以及HTML.DOM的新标准) ①用于绘画canvas元素 ②用于媒介回放的video和audio元素 ③对本地离线存储的更好支持 ④新的特俗内 ...

  6. css3新的选择器

    CSS3新的选择器 ele[att^="val"] /*属性att的值以val开头的元素*/ ele[att$="val"] /*属性att的值以val结尾的元 ...

  7. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  8. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  9. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

随机推荐

  1. 海贼王之——梦想音乐

      相信和很多海粉一样,对伙伴的关照和战斗,是相当地震撼.   好东西时不时地听一下,然后感受那种刷新全身表层细胞,触电...:   音乐链接: http://v.youku.com/v_show/i ...

  2. ZOJ3228 Searching the String(AC自动机)

    题目大概是给一个主串,询问若干个模式串出现次数,其中有些模式串要求不能重叠. 对于可以重叠的就是一个直白的多模式匹配问题:而不可重叠,在匹配过程中贪心地记录当前匹配的主串位置,然后每当出现一个新匹配根 ...

  3. Codeforces 86D Powerful array(莫队算法)

    和BZOJ2038差不多..复习一下. #include<cstdio> #include<cmath> #include<algorithm> using nam ...

  4. Booklet Printing[HDU1117]

    Booklet Printing Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  5. BZOJ1175 : [Balkan2007]The stairways of Saharna

    杨氏图表,维护若干个单调不下降队列. 每次新加入一个数时,先考虑第一个队列: 如果可以放在最后,则放在最后. 否则找到最小的可以替换的替换掉,再将替换的数放入第二个队列,以此类推. 最后$ans_i= ...

  6. CC150 - 11.6

    Question: Given an M x N matrix in which each row and each column is sorted in ascending order, writ ...

  7. hiho#14

    军训去了没有打,回来看题跑. T1:hehe 注意X可能是实数233 #include<cstdio> #include<cctype> #include<queue&g ...

  8. mysql主从配置脚本

    PASSWD=123456USER=rootREP_HOST=10.10.10.70REP_PORT=3306REP_USER=slaveREP_PASSWD=123456@REP_FILE=mysq ...

  9. 去掉网址中的 html编码

    修改 web\urlManager  createUrl函数,去掉 urlEncode函数

  10. Scrum会议3(Beta版本)

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...