0
0

前端：CSS选择器（级联/层叠样式单）--用作装饰

1.选择器：给谁加样式

三种样式如果对于不同的方面，效果叠加，如果是相同的方面，行内样式的优先级最高，外部样式和内部样式的优先级相等，谁在上面先用谁

2.css的语法规则：

  1. selector{  
  2.     property:value;
  3.     property:value;
  4. }
  1. /* 基本选择器*/
  2. /*1.元素选择器  根据元素名称做选择*/
  3. div{
  4.     background: red;
  5.     color: yellow;
  6.    } 
  7. /*特例： * 选择所有元素 */
  8. *{
  9.     background: red;
  10.     color: yellow; 
  11. }
  12. /*2.属性选择器  []属性*/
  13. div[id]{
  14.     background: red; /*有id属性*/
  15.     color: yellow; 
  16. }
  17. div[id=a]{
  18.     background: red;/*有id属性，并且id属性值等于a*/
  19.     color: yellow; 
  20. }
  21. div[id$=a]{
  22.     background: red;/*有id属性，并且id属性值以a结尾的div元素*/
  23.     color: yellow; 
  24. }
  25. div[id^=a]{
  26.     background: red;/*有id属性，并且id属性值以a开头的div元素*/
  27.     color: yellow; 
  28. }
  29. div[id*=a]{
  30.     background: red;/*有id属性，并且id属性值包含a的div元素*/
  31.     color: yellow; 
  32. }
  33. div[mm*=a]{
  34.     background: red;/*有mm属性，并且id属性值包含a的div元素 属性值可以自己创造*/
  35.     color: yellow; 
  36. }
  37. /*3.id选择器*/
  38. #ss{
  39.     background: red;
  40.     color: yellow; 
  41. }
  42. /*id最好唯一*/
  44. /*4.class选择器*/
  45.  .ss{
  46.     background: red;
  47.     color: yellow; 
  48.  }
  50.  /*特例，结合选择器*/
  51.  p.ss{
  52.     background: red;
  53.     color: yellow;   /*不要用空格，直接拼接*/
  54.  }
  55.  /*5.包含选择器  selector1 selector2*  空格只时强调包含关系，时候带就行*/
  56. div p{
  57.     background: red;
  58.     color: yellow; /*在第一个选择器所包含的元素里面，找第二个选择器满足的元素*/
  59. }
  60. /*6.子选择器  selector1>selector2   强调父子关系*/
  61. div>p{
  62.     background: red;
  63.     color: yellow; /*在第一个选择器所包含的元素里面，找第二个选择器满足的元素*/
  64. }
  66. /*7.兄弟选择器  selector1~selector2 同级往下找弟弟*/
  67. .php~.java{
  68.     background: red;
  69.     color: yellow; 
  70. }
  71.  
  72. .php~*{
  73.     background: red;
  74.     color: yellow; 
  75. }
  77. /*8.选择器组合  selector1,selector2,selector3   之间是或的关系*/
  79. p,
  80. span,
  81. div{
  82.     background: red;
  83.     color: yellow; 
  84. }
  85. /* 伪元素选择器*/
  87. /*1.首字母  只有块级元素（竖着布局的元素）可以使用*/
  88. div::first-letter{
  89.     font-size: 40px;
  90.     color: purple;
  91. }
  92. /*2.首行 只有块级元素（竖着布局的元素）可以使用*/
  93. div::first-line{
  94.     font-size: 40px;
  95.     color: purple;
  96. }
  97. /*像一串英文字母aaa会看做一行，浏览器认为中文可以随意换行，英文单词或者连字符可以换行，如果是连续的字母没有意义，不会换行，可以用下面的进行换行*/
  98. div{
  99.     word-break: break-all;
  100. }
  101. /*单词裂开*/
  103. /*3.特效追加  在前面追加*/
  104. div::before{
  105.     content: "111";
  106.     font-size: 40px;
  107.     color: purple;
  108. }
  110. /*4.在元素后面追加  after*/
  112. div::after{
  113.     content: "111";
  114.     font-size: 40px;
  115.     color: purple;
  116. }
  117. /*!!!!需要通过content开辟空间，进行追加*/
  118. /* 伪类选择器*/
  120. /*1.结构性伪类选择器*/
  121. /*括号里 n可以是数字，如果是数字 n从1开始
  122.           可以是单词  even偶数个  odd奇数个
  123.         可以是表达式 2n+1  3n+2 n从0开始  
  124. 找第一个  first-child
  125. 找最后一个 last-child
  126. 倒数  nth-last-child()
  127. 正数  nth-child()
  128. 只认数字，如果类型恰好符合，则找到*/
  129.   
  130. ul li:nth-child(2){
  131.     font-size: 40px;
  132.     color: purple;
  133. }
  134. ul li:nth-child(2){
  135.     font-size: 40px;
  136.     color: purple;
  137. }
  138. ul li:nth-child(odd){
  139.     font-size: 40px;
  140.     color: purple;
  141. }
  142. /*找同类型的 nth-of-type  既认数字，也认类型
  143. 括号里 n可以是数字，如果是数字 n从1开始
  144.           可以是单词  even偶数个  odd奇数个
  145.         可以是表达式 2n+1  3n+2 n从0开始  
  146. 找第一个  first-of-type
  147. 找最后一个 last-of-type
  148. 倒数  nth-last-of-type()
  149. 正数  nth-of-type()*/
  150. ul li:nth-of-type(1){
  151.     font-size: 40px;
  152.     color: purple;
  153. }
  155. /*2.UI状态伪类选择器*/
  156. /*hover鼠标悬停状态*/
  157. /*focus鼠标焦点状态*/
  158. /*checked鼠标选中状态*/
  159. ul li:hover{
  160.     font-size: 40px;
  161.     color: purple;
  162. }
  164. /*3.其他伪类选择器*/
  165. /*not() 排除 过滤掉某些元素  括号中可以写任何一个选择器*/
  167. ul li:not(.java){
  168.     font-size: 40px;
  169.     color: purple;
  170. }
  171. ul li:not(.java):not(.php){
  172.     font-size: 40px;
  173.     color: purple;
  174. }
  175. /*CSS选择器优先级*/
  177. /*1.选择器写得越长越准确，优先级越高*/
  178. /*2.优先级 id选择器>class选择器>元素选择器*/
  179. /*3.同级别选择器下，CSS按照代码顺序执行   后面代码会把前面的覆盖掉*/
  180. /*4.终极规则:以上规则适用于绝大部分场景，特殊场景不适用请自行调试*/

3.CSS选择器详细介绍

基本选择器

1.元素选择器 根据元素名称做选择
  1. <div>hello</div>
  2. <div>hello</div>
  3. <div>hello</div>
  4. <div>hello</div>
  5. <p>hello</p>
  7. div{
  8.     background: aqua;
  9.     color: black;
  10. }

特例： * 选择所有元素 body html也是元素

  1. *{
  2.     background: aqua;
  3.     color: black;
  4. }

2.属性选择器 []属性
  1. <div id="e">hello</div>
  2. <div id="ab">hello</div>
  3. <div id="ba">hello</div>
  4. <div id="daad">hello</div>
  5. <div mm="baab">hello</div>
  6. <p>hello</p> 
  8. div[id]{
  9.     color: rgb(55, 0, 255); 
  10. }
  11. div[id=e]{
  12.     background: red;
  13.     
  14. }
  15. div[id$=a]{
  16.     background: greenyellow;
  17.    
  18. }
  19. div[id^=a]{
  20.     background: rgb(249, 49, 219);
  21. }  
  22. div[id*=a]{
  23.     background: rgb(19, 178, 246);
  24.     color: yellow; 
  25. }
  26. div[mm*=a]{
  27.     background: rgb(166, 28, 212);
  28.     color: yellow; 
  29. }

3.id选择器
  1. #e{
  2.     background-color: aqua;
  3. }

id最好唯一

4.class选择器
  1. <div class="a">hello</div>
  2. <div>hello</div>
  3. <div id="ss" class="a">hello</div>
  4. <div>hello</div>
  5. <p>hello</p> 
  6. </body>
  8.   .a{
  9.     background-color: blueviolet;
  10.     
  11. }

特例，结合选择器

  1. div.a{
  2.     background-color: aquamarine;
  3. }
  4. #ss.a{
  5.     color: red;
  6. }

5.包含选择器 selector1 selector2* 空格只是强调包含关系
  1. <div>
  2.     <p>
  3.         hello
  4.     </p>
  5. </div>
  6.  <p>hello</p>
  7.  <p class="java">hello</p>
  8.  <p class="java ">hello</p>
  9.  <p class="php">hello</p>
  10.  <p class="java">hello</p>
  11.  <p class="java">hello</p>
  13. div p{
  14.     background-color: aqua;
  15. }

6.子选择器 selector1>selector2 强调父子关系
  1. div>p{
  2.     color: red;
  3. }
  4. <div>
  5.     <p>
  6.         hello
  7.         
  8.     </p>
  9. </div>
  10. <div>
  11.     <h1>
  12.         <p>
  13.         hello
  14.          </p>
  15.         
  16.     </h1>
  17. </div>
  18. <p>hello</p>
  19.  <p class="java">hello</p>
  20.  <p class="java ">hello</p>
  21.  <p class="php">hello</p>
  22.  <p class="java">hello</p>
  23.  <p class="java">hello</p>

7.兄弟选择器 selector1~selector2 同级往下找弟弟
  1. <p>hello</p>
  2.  <p class="java">hello</p>
  3.  <p class="java ">hello</p>
  4.  <p class="php">hello</p>
  5.  <p class="java">hello</p>
  6.  <p class="nn">hello</p>
  7.  
  9. .php~.java{
  10.     background-color: blueviolet;
  11. }
  12. .php~*{
  13.   background-color: chartreuse;
  14. }/*全选*/

8.选择器组合 selector1,selector2,selector3 选择器之间是或 的关系，只需要满足一个就可以使用该选择器给的样式
  1. <div>hello</div>
  2. <span>hello</span>
  3. <p>hello</p>
  4. <p>hello</p>
  6. div,
  7. p{
  8.     background-color: aqua;
  9. }
  10. div,
  11. span,
  12. p{
  13.     color: red;
  14. }

伪元素选择器

1.首字母 只有块级元素（竖着布局的元素）可以使用
  1. div::first-letter{
  2.     font-size: 40px;
  3.     color: purple;
  4. }

2.首行 只有块级元素（竖着布局的元素）可以使用
  1. <div>
  2.     
  3. <p>hello</p>
  4. <p>hello</p>
  5. </div>
  7. div::first-line{
  8.     font-size: 40px;
  9.     color: purple;
  10. }

像一串英文字母aaa会看做一行，浏览器认为中文可以随意换行，英文单词或者连字符可以换行，如果是连续的字母没有意义，不会换行，可以用下面的进行换行

  1. div{
  2.     word-break: break-all;
  3. }
  4. /*单词裂开*/
  6. <div>
  7. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  8. </div>
3.特效追加 在前面追加
  1. div::before{
  2.     content: "hello";
  3.     background-color: aqua;
  4.     color: purple;
  5. }
  6. <div>
  7. world
  8. </div>

4.在元素后面追加 after
  1. div::after{
  2.     content: "hello";
  3.     background-color: aqua;
  4.     color: purple;
  5. }

!!!需要通过content开辟空间，进行追加

伪类选择器

1.结构性伪类选择器

括号里 n可以是数字，如果是数字 n从1开始，可以是单词 even偶数个 odd奇数个 可以是表达式 2n+1 3n+2 n从0开始

找第一个 first-child

找最后一个 last-child

倒数 nth-last-child()

正数 nth-child()

只认数字，如果类型恰好符合，则找到

  1. ul li:nth-child(1){
  2.     
  3.     color: blue;
  4. }
  5. ul li:nth-child(2){
  6.     
  7.     color: red;
  8. }/*执行1次*/
  9. ul li:nth-child(2n+1){
  10.     font-size: 30px;
  11.     
  12. }
  13. ul li:nth-child(odd){
  14.     background-color:aqua ;
  15. }
  17. ul li:first-child{
  18.     background-color:pink ;
  19. }
  20. ul li:last-child{
  21.     background-color:rgb(126, 197, 245) ;
  22. }/*执行一次*/
  24. ul li:nth-last-child(even){
  25.     background-color: blueviolet;
  26. }/*执行一次*/
  28. <ul>
  29.    
  30.     <li>aaa</li>
  31.     <p>aaa</p>
  32.     <li>aaa</li>
  33.     <li>aaa</li>
  34.     <li>aaa</li>
  35.     <li>aaa</li>
  36. </ul>

找同类型的 nth-of-type 既认数字，也认类型

括号里 n可以是数字，如果是数字 n从1开始

  1.       可以是单词  even偶数个  odd奇数个
  3.     可以是表达式 2n+1  3n+2 n从0开始

找第一个 first-of-type

找最后一个 last-of-type

倒数 nth-last-of-type()

正数 nth-of-type()

  1. ul li:nth-of-type(1){
  2.     
  3.     color: blue;
  4. }
  5. ul li:nth-of-type(2){
  6.     
  7.     color: red;
  8. }/*执行1次*/
  9. ul li:nth-of-type(3n){
  10.     font-size: 30px;
  11.     
  12. }
  13. ul li:nth-of-type(odd){
  14.     background-color:aqua ;
  15. }
  17. ul li:first-of-type{
  18.     background-color:pink ;
  19. }
  20. ul li:last-of-type{
  21.     background-color:rgb(126, 197, 245) ;
  22. }/*执行一次*/
  24. ul li:nth-last-child(3){
  25.     background-color: blueviolet;
  26. }/*执行一次*/
  28. <ul>
  29.    
  30.     <li>aaa</li>
  31.     <p>aaa</p>
  32.     <li>aaa</li>
  33.     <li>aaa</li>
  34.     <li>aaa</li>
  35.     <li>aaa</li>
  36. </ul>

2.UI状态伪类选择器

hover鼠标悬停状态

focus鼠标焦点状态

checked鼠标选中状态

  1. /* focus(焦段状态)  hover(悬停状态) */
  2. /* 鼠标放上去之前 */
  3. ul li{
  4.     background: red;
  5. }
  6. ul li:hover{
  7.     background: blue;
  8. }
  9. /*  原本的原色 */
  10. input{
  11.     background: blue;
  12. }
  13. /* 开始输入数据 */
  14. input:focus{
  15.     background: red;
  16. }
  17. /* 鼠标悬停 */
  18. input:hover{
  19.     background: yellow;
  20. }
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>FLOAT</title>
  5.         <style>
  6.         ul li{
  7.             background-color: red;
  8.         }
  9.         ul li:hover{
  10.             background-color: blue;
  11.         }
  12.        
  13.         input{
  14.             background-color: blueviolet;
  15.         }
  16.         input:focus{
  17.             background-color: greenyellow;
  18.         }
  19.         input:hover{
  20.             background-color: yellow;
  21.         }
  22.         </style>
  23.     </head>
  24.     <body>
  25.       <ul>
  26.         <li>aaa</li>
  27.         <li>aaa</li>
  28.         <li>aaa</li>
  29.         <li>aaa</li>
  30.       </ul>
  31.       <input type="text">
  32.     </body>
  33. </html>

悬停状态

聚焦状态

3.其他伪类选择器

not() 排除 过滤掉某些元素 括号中可以写任何一个选择器*/

  1.  <ul>
  2.         <li>qcby</li>
  3.         <li class="java">qcby</li>
  4.         <li>qcby</li>
  5.         <li class="java">qcby</li>
  6.         <li>qcby</li>
  7.         <li class="java">qcby</li>
  8.         <li>qcby</li>
  9.         <li class="php">qcby</li>
  10.     </ul>
  11.     
  12.     /* 排除class是.java的 */
  13. li:not(.java){
  14.     background: red;
  15. }
  17. li:not(.java):not(.php){
  18.     background: red;
  19. }

欢迎大家，点击关注，加评论呦

标签： 前端 css
本文转载自: https://blog.csdn.net/weixin_63708006/article/details/141066927
版权归原作者 YY编程小白 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端：CSS选择器（级联/层叠样式单）--用作装饰”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。