当前位置：Gxlcms > css > CSS3复杂选择器的详解

CSS3复杂选择器的详解

时间：2021-07-01 10:21:17 帮助过：173人阅读

今天把视频里的CSS3复杂选择器部分看完了，来整理一下学到的知识点。

1、兄弟选择器：同一位置级别，可称为兄弟元素

a、相邻兄弟选择器：next
紧紧跟在【当前元素之后的】(一个)，指定选择器的元素
　　　　　 语法：通过“+”作为结合符
eg: p+p ->紧跟在p后面的p元素

  1. <!-- demo.html -->
  2. <html>
  3.     <head>
  4.         <title></title>
  5.     </head>
  6.     <body>
  7.         <p>这是第一个段落</p>
  8. 　　  <div id="d1">这是一个div</div>
  9. 　　  <span>这是一个span</span>
  10.         <p class="p1">这是第二个段落</p>
  11. 　　  <b>Hello World</b>
  12. 　　  <p class="p2">这是第三个段落</p>
  13.     </body>
  14. </html>
  15. /*demo.css*/
  16. div+p{
  17.     background: yellow;
  18. }
  19. #d1+p{
  20.     background: red;
  21. }
  22. span+.p1{
  23.     background: blue;
  24. }

b、通用兄弟选择器：next_all
匹配某元素【后面所有】的满足指定选择器的兄弟元素
语法：使用“~”作为结合符
eg：p~p{} ->匹配p后面所有的p

2、属性选择器：使用元素所附带的属性，用于选择器当中，作为选择元素的条件
语法：[属性相关内容]
eg：[id] ->具备id属性的所有元素
p[id] ->具备id属性的p元素
a、[id],p[id]
b、p[id][class] ->既具备id又具备class的p元素
c、p[id="p1"] ->id值为"p1"的p元素
d、p[class~="value"]
e、p[class^="b"] ->匹配class属性值以b开始的p标记
f、p[class*="b"] ->匹配class属性值中包含b的p标记
g、p[class$="b"] ->匹配class属性值以b结尾的p标记

  1. <!-- demo.html -->　　　　　
  2.  <html>
  3.      <head>
  4.          <title></title>
  5.      </head>
  6.      <body>
  7.         <p class="clear p1 myself">
  8.         这是第四个段落
  9.         </p>
  10.         <div class="userContent">
  11.         文本内容
  12.         </div>
  13.      </body>
  14. </html>
  15. /*demo.css*/
  16. p[class]{
  17. color: #e4393c;
  18. }
  19. p[class~='p1']{
  20. background-color: #cd2c2d;
  21. color: #fff;
  22. }
  23. div[class ^= "us"]{
  24. background-color: #bfb;
  25. }
  26. div[class$="t"]{
  27. background-color: #bfb;
  28. color: #333;
  29. }

3、伪类选择器
a、目标伪类：突出显示活动的HTML锚点
语法：:target
b、元素状态伪类：多数用在表单元素上
1、:enabled ->匹配每个已启用的元素
2、:disabled ->匹配每个已被禁用的元素
3、:checked ->匹配已被选中的表单元素(只适用于checkbox,radio)
c、结构伪类
1、:first-child ->匹配属于其父元素中的第一个子元素
2、:last-child ->匹配属于其父元素中的最后一个子元素
3、:empty ->匹配没有子元素的元素(文本内容或空格也算作子元素)
4、:only-child ->匹配属于其父元素中的唯一子元素
d、否定伪类：匹配非指定选择器的元素
语法：:not(selector)

  1. <!-- demo01.html 目标伪类 -->
  2.  <html>
  3.      <head>
  4.          <title></title>
  5.      </head>
  6.      <body>
  7.     <a href="#Tom">猫和老鼠(Tom and Jerry)</a>
  8.     <a href="#Atongmu">铁臂阿童木</a>
  9.     <a href="#BlackCat">黑猫警长</a>
  10.     <br>
  11.     <a name="Tom">第一部：Tom and Jerry</a>
  12.     <p style="height: 500px;">Tom and Jerry</p>
  13.     <div id="Atongmu" style="height: 500px;">我是阿童木</div>
  14.     <div id="BlackCat" style="height: 500px;">I am Mr Black Cat</div>    
  15.      </body>
  16. </html>
  17. /*demo01.css*/
  18. a:target,div:target{
  19.     background-color: #bfb;
  20.     font-size: 20pt;
  21. }
  1. <!-- demo02.html 结构伪类 -->　　　　　
  2.  <html>
  3.      <head>
  4.          <title></title>
  5.      </head>
  6.      <body>
  7.     <div id="d1"></div>
  8.     <div id="d2">
  9.         <p>This is a p</p>
  10.     </div>
  11.     <div id="d3">
  12.         This id d3
  13.     </div>
  14.     <div id="d4">
  15.         <b>first</b>
  16.         <b>second</b>
  17.         <b>third</b>
  18.         <b>last</b>
  19.     </div>    
  20.      </body>
  21. </html>
  22. /*demo02.css*/
  23. div{
  24.     width: 100px;
  25.     height: 100px;
  26. }
  27. b{
  28.     display: block;
  29. }
  30. div:empty{
  31.     background-color: #bfb;
  32. }
  33. p:only-child{
  34.     background-color: #fbf;
  35. }
  36. b:first-child{
  37.     font-size: 2em;
  38.     color: #fbb;
  39. }
  40. b:last-child{
  41.     font-size: 3em;
  42.     font-weight: normal;
  43.     color: #bbf;
  44. }
  1. <!-- demo03.html 伪元素状态伪类 -->
  2.   <html>
  3.       <head>
  4.           <title></title>
  5.       </head>
  6.       <body>
  7.          用户名称：<input type="text"><br>
  8.     用户昵称：<input type="text" disabled value="请输入您的昵称">
  9.     <br>
  10.     性别：<input type="radio" name="rdoGender">男
  11.               <input type="radio" name="rdoGender">女 
  12.       </body>
  13.  </html>
  14.  
  15.  /*demo03.css*/
  16.  input:enabled{
  17.     color: red;
  18. }
  19. input:disabled{
  20.     border: 1px solid #f00;
  21. }
  22. input[name=rdoGender]:checked{
  23.     background-color: #bfb;
  24. }
  1. <!-- demo04.html 否定伪类 -->
  2.   <html>
  3.       <head>
  4.           <title></title>
  5.       </head>
  6.       <body>
  7.          <div>
  8.         用户名称：<input type="text"><br>
  9.         用户密码：<input type="password"><br>
  10.         <input type="submit" value="提交">
  11.         <input type="button" value="按钮">
  12.     </div>
  13.       </body>
  14.  </html>
  15.  
  16.  /*demo04.css*/
  17. input:not(:last-child){
  18.     border: 1px solid #f00;
  19. }

4、伪元素选择器：匹配出来的都是文本内容
a、:first-letter ->匹配首字符
b、:first-line -> 匹配首行
以上两个选择器，行内元素无效，行内块、块级可以
c、::selection ->用于欧赔用户选中的文本样式(火狐貌似不兼容)

  1. <!-- demo.html 为元素选择器 -->
  2.   <html>
  3.       <head>
  4.           <title></title>
  5.       </head>
  6.       <body>
  7.          <p>
  8.         风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。
  9.     </p>
  10.     <span>
  11.         风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。
  12.     </span>
  13.       </body>
  14.  </html>
  15.  
  16.  /*demo.css*/
  17. p{
  18.     width: 200px;
  19.     border: 1px solid #bfb;
  20.     margin: 10% auto;
  21.     text-indent: 5px;
  22. }
  23. span{
  24.     /*float: right;*/
  25.     /*display: inline-block;*/
  26.     position: absolute;
  27.     top: 300px;
  28.     left: 500px;
  29.     
  30. }
  31. p:first-letter{
  32.     font-size: 20pt;
  33.     color: #fbb;
  34. }
  35. p:first-line{
  36.     font-style: italic;
  37. }
  38. span:first-line{
  39.     font-style: italic;
  40.     background-color: #ffb;
  41. }
  42. p::selection{
  43.     background-color: #bbf;
  44.     color: #fbf;
  45. }

以上就是我在视频中学到的所有内容，若有错误或不足，希望浏览者提出，及时指正。。

今天是我开通博客的第二天，这是我写的第一篇文章，在这里发表完全是当做自己的学习笔记，希望可以记录自己的成长。

以上就是CSS3复杂选择器的详解的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！