Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 权重和结构伪类的认知
Blogger Information
Blog 15
fans 0
comment 0
visits 6308
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
权重和结构伪类的认知
啊℃。㏄
Original
369 people have browsed it

权重

id class tag
百 十 个

备注：id能不用就不用，权重太大




  1. /* 权重
  2. id：百位
  3. class：十位
  4. tag：个位
  5. 例如：（0，0，0）第一个0就是id，第二个是class，最后才是tag */
  7. /* 演示： */
  10. /* 他的权重就是（0，0，1） */
  11. h1{
  12.     color: blanchedalmond;
  13. }
  17. .one{
  18.     color: aqua;
  19. }
  20. /* 他的权重就是（0，1，0） */
  24. #two{
  25.     color: aquamarine;
  26. }
  27. /* 权重应当就是（1，0，0） */
  28. /* 
  29. （1，0，0）> (0,1,0) >(0,0,1) */
  30. /* 还有一个是忽略任何权重的，最高指示的
  31. !important */
  32. h1{
  33.     color: blue !important;
  34. }

伪类

结构伪类

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>伪类</title>
  8.     <link rel="stylesheet" href="demo2.css">
  9. </head>
  10. <body>
  11.     <!-- 结构伪类 -->
  12.     <ul class="list">
  13.         <li>item1</li>
  14.         <li>item2</li>
  15.         <li>item3</li>
  16.         <li>item4</li>
  17.         <li>item5</li>
  18.         <li>item6</li>
  19.         <li>item7</li>
  20.         <li>item8</li>
  21.     </ul>
  22. </body>
  23. </html>
  1. 如何让第一个元素添加样式，有两种方式：
  2. 1.:nth-of-type()
  3. 2.:first-of-type
  1. .list >li:nth-of-type(1){
  2.     background-color:aqua;
  3. }
  4. .list >li:first-of-type{
  5.     background-color:aqua;
  6. }

效果如下：

" class="reference-link">

  1. 如何让最后一个元素添加样式
  2. :last-of-type
  1. .list >li:last-of-type{
  2.     background-color:rgb(5, 56, 56);
  3. }

效果如下：

" class="reference-link">

  1. 如何让倒数某某元素添加样式
  2. :nth-last-of-type()
  1. .list >li:nth-last-of-type(6){
  2.     background-color: rgb(75, 13, 13);
  3. }

效果如下：

结构伪类的参数

  1. :nth-of-type(an+b)
  2. 1.a:系数，[0,1,2,...]
  3. 2.n:[0,1,2,3,...]
  4. 3.b:偏移量，从0开始
  5. 注：计算出来的索引，必须是有效的，从1开始
  1. 匹配单个元素来设置样式
  2. /* 1.匹配一个 */
  3. .list>:nth-of-type(0n+3){
  4.     background-color: rgb(57, 36, 148);
  5. }

效果如下：

" class="reference-link">

  1. 如何匹配一组元素改变样式
  2. /* 2.匹配一组 */
  3. .list>:nth-of-type(n){
  4.     background-color: blueviolet;
  5. }

效果如下：

" class="reference-link">

  1. /* 匹配第三元素后面的所有兄弟元素 */
  2. .list > :nth-of-type(n+3){
  3.     background-color: blueviolet;
  4. }

效果如下：

" class="reference-link">

  1. /* 匹配第三个元素前面的兄弟元素 */
  2. .list > :nth-of-type(-n+3){
  3.     background-color: chartreuse;
  4. }

效果如下：

" class="reference-link">

  1. /* 匹配倒数三位元素的兄弟元素 */
  2. .list > :nth-last-of-type(-n+3){
  3.     background-color: darkgoldenrod;
  4. }

效果如下：

" class="reference-link">

  1. /* 如何让偶数元素添加样式    2种方式*/
  2. .list > :nth-of-type(2n){
  3.     background-color: darkgreen;
  4. }
  5. .list > :nth-of-type(even){
  6.     background-color: darkgreen;
  7. }

效果如下：

" class="reference-link">

  1. /* 如何让奇数元素添加样式  3种方式*/
  2. .list > :nth-of-type(2n-1){
  3.     background-color: darkseagreen;
  4. }
  5. .list > :nth-of-type(2n+1){
  6.     background-color: darkseagreen;
  7. }
  8. .list > :nth-of-type(odd){
  9.     background-color: darkseagreen;
  10. }

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post