CSS3知识点总结：复杂选择器、伪类、CSS Hack、2D3D转换、动画

灰太狼 2022-04-17 03:20 118阅读 0赞

1、相邻兄弟选择器，通用兄弟选择器

相邻兄弟选择器：\#d1+p\{color:red\}   //紧挨着\#d1后面的第一个且必须为p的标签，文字颜色变为red

通用兄弟选择器：\#d1~p\{color:red\}   //\#d1后面所有为p的标签，文字颜色变为red

2、属性选择器，理解下面语句

①\[id\]\{color:red;\}                                ②div\[id\]\{color:red;\}

③p\[id\]\[class\]\{color:red;\}                          ④input\[type=text\]\{color:red;\}

⑤div\[class~=heavy\]\{color:red;\}                     ⑥\[class^=”col-”\]\{color:red;\}

⑦\[class\*=”col-”\]\{color:red;\}                        ⑧\[class$=”col-”\]\{color:red;\}

3、目标伪类target使用

html  <a href="\#dd">点我跳转到div</a> <br/><div id="dd">字体颜色发生变化</div>

css   \#dd:target\{ color:red;\}

4、元素状态伪类 ①enable  ②disable  ③checked

5、结构伪类       li:first-child\{color: red;\}与li\{color: red;\} 区别

li:last-child\{color: red;\}

li:nth-child(2)\{color: purple;\}

6、否定伪类       li:not(:first-child)\{color:red;\}

7、伪元素选择器  p:first-line

p:first-letter

p.article:first-letter\{color: \#FF0000;\}

<p class="article">This is a paragraph in an article。</p>

8、使用伪元素选择器实现内容生成

标签内容区域前插入文字：标签:before\{content:"插入的内容";\}

标签内容区域前插入图片：标签:before\{content:url(...);\}

标签内容区域后插入文字：标签:after\{content:"插入的内容";\}

标签内容区域后插入图片：标签:after\{content:url(...);\}

9、使用选择器插入项目编号

元素:before\{content:counter(计数器);\}

元素\{counter-increment:content属性值中所指定的计数器名称\}

使用计数器来计算编号，计数器可以任意命名，除了使用计数器还需要在元素的样式中追加对元素的(counter-increment)属性指定为content属性值中所指定的计数器名称。  
 p:before\{content: "第"counter(number)"章、";\}

p\{counter-increment: number;\}

10、CSS  Hack 针对不同浏览器编写不同的CSS文件

①CSS类内部hack：在样式属性名或值前后增加前后缀识别不同浏览器

用法   ：div\{color:red\\9\\0;\}     div\{-color:red;\}

\-:IE 6           +:IE 6,7            \\0:IE 8,9,10         \\9\\0:IE 9,10

②头部引用Hack

③主流浏览器内核及属性前缀

<table style="width:339px;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:155px;"> <p style="margin-left:0pt;">浏览器</p> </td> 
   <td style="vertical-align:top;width:86px;"> <p style="margin-left:0pt;">内核</p> </td> 
   <td style="vertical-align:top;width:98px;"> <p style="margin-left:0pt;">属性前缀</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:155px;"> <p style="margin-left:0pt;">Chrome/safari(苹果)</p> </td> 
   <td style="vertical-align:top;width:86px;"> <p style="margin-left:0pt;">webkit</p> </td> 
   <td style="vertical-align:top;width:98px;"> <p style="margin-left:0pt;">-webkit</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:155px;"> <p style="margin-left:0pt;">Firefox</p> </td> 
   <td style="vertical-align:top;width:86px;"> <p style="margin-left:0pt;">Gecko</p> </td> 
   <td style="vertical-align:top;width:98px;"> <p style="margin-left:0pt;">-moz</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:155px;"> <p style="margin-left:0pt;">IE/国内各浏览器</p> </td> 
   <td style="vertical-align:top;width:86px;"> <p style="margin-left:0pt;">trident</p> </td> 
   <td style="vertical-align:top;width:98px;"> <p style="margin-left:0pt;">-ms</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:155px;"> <p style="margin-left:0pt;">Opera</p> </td> 
   <td style="vertical-align:top;width:86px;"> <p style="margin-left:0pt;">opera</p> </td> 
   <td style="vertical-align:top;width:98px;"> <p style="margin-left:0pt;">-o</p> </td> 
  </tr> 
 </tbody> 
</table>

CSS3中的属性大多需要加这些前缀，否则无法出现效果，

11、webkit内核的Chrome和Safari使用CSS3属性大都需要加上-webkit-前缀，最好把其余前缀的都重写一遍

12、转换：改变元素在页面中的大小，位置，形状，角度的一种方式

①2D转换

移动    transform:translate(50px,50px);/\*translateX(),translateY()\*/

缩放    transform:scale(2); /\*scaleX(),scaleY()\*/

旋转    transform:rotate(45deg);

旋转原点transform-origin:left top; /\*也可以用百分比transform-origin:20% 40%;\*/

倾斜    transform:skew(45deg); /\*skewX(),skewY()\*/

多种效果同时实现transform:translate(100px,100px) scale(2) rotate(5deg) skewY(45deg);

transform-origin:right top;

②3D转换