摸鱼少学习多

day33 -选择器完

层次选择器

选择全部

*p{}所有该属性标签都会改变样式

 
1 p{
2      background: #15f50c;
3  }

 

后代选择器

选择某一项的后代所有的该元素都改变样式

 
1 后代选择器
2  body p{
3      background: aqua;
4  }

 

子选择器

只选择子代，子代之后的不做选择

1  /*子选择器*/
2  body>p{
3      background: blue;
4  }

 

相邻兄弟选择器

选择向下的相邻的兄弟标签改变样式，只有一个标签

1  /*相邻兄弟选择器*/
2  .active + p{
3      background: antiquewhite;
4  ​
5  }

 

通用选择器

向下的兄弟标签改变样式，只有同一层的兄弟标签改变

 
1 /*通用选择器*/
2  .active~p{
3      background: blue;
4  }

 

总代码

复制代码
 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <style>
 7          /*p{*/
 8          /*    background: #15f50c;*/
 9          /*}*/
10  ​
11          /*后代选择器*/
12          /*body p{*/
13          /*    background: aqua;*/
14          /*}*/
15  ​
16          /*!*子选择器*!*/
17          /*body>p{*/
18          /*    background: blue;*/
19          /*}*/
20  ​
21          /*!*相邻兄弟选择器*!*/
22          /*.active + p{*/
23          /*    background: antiquewhite;*/
24  ​
25          /*}*/
26  ​
27          /*!*通用选择器*!*/
28          /*.active~p{*/
29          /*    background: blue;*/
30          /*}*/
31  ​
32          li>p{
33              background: bisque;
34          }
35          #nice >p +p{
36              background: aqua;
37          }
38  ​
39      </style>
40  </head>
41  <body>
42      <p>p0</p>
43      <p class="active">p1</p>
44      <p>p2</p>
45      <p>p3</p>
46      <ul>
47          <li>
48              <p>p4</p>
49          </li>
50          <li id="nice">
51              <p>p5</p>
52              <p>6666</p>
53          </li>
54          <li>
55              <p>p6</p>
56          </li>
57      </ul>
58      <p>p7</p>
59      <p>p8</p>
60      <p>p9</p>
61  </body>
62  </html>
复制代码

 

总结

 层次选择器：
 1. 后代选择器：在某个元素的后面的所有
1 1  body p{
2 2              background: aqua;
3 3          }

 


 2. 子选择器: 只选择一代
 
1 body>p{
2              background: blue;
3          }

 


 3. 相邻兄弟选择器: 选择同辈(只选择最近的下方的一个元素)
 
1 .active + p{
2              background: antiquewhite;
3  ​
4          }

 


 4. 通用选择器:选择当前选中元素下面的所有同级元素
1  .active~p{
2              background: bisque;
3          }

 

 

结构伪类选择器

不创建类而对各标签进行选择

  1. 选择第一个元素：

 
1 /*ul的第一个子元素*/
2  ul li:first-child{
3      background: bisque;
4  }

 

  1. 选择最后一个元素：

 
1 /*ul的最后一个子元素*/
2  ul li:last-child{
3      background: rosybrown;
4  }

 

  1. 1 选中p1：定位到父元素，选择父元素下第几个元素，必须和类型匹配才可以使用.

 
1 <body>
2      <a href="http://www.baidu.com">haha</a>
3      <h1>121</h1>
4      <p>p0</p>
5      <p>p1</p>
6      <p>p2</p>
7      <p>p3</p>

 


     
   
1  p:nth-child(4){
2              background: aquamarine;
3          }

 

如果是child（123）则不会改变p1

 

3.2 根据类型选择：

选择父元素下p标签中的第二个p标签

1  p:nth-of-type(2){
2      background: red;
3  }

 

属性选择器

首先创建10个a标签

复制代码
 1  <p class="demo">
 2      <a href="http://www.baidu.com" class="link item first" id="first">1</a>
 3      <a href="" class="link item 2" target="_blank" title="test 2">2</a>
 4      <a href="test/123.html" class="link item 3">3</a>
 5      <a href="test/123.png" class="link item 4">4</a>
 6      <a href="test/123.jpg" class="link item 5">5</a>
 7      <a href="abc" class="link item ">6</a>
 8      <a href="/a.pdf" class="link item ">7</a>
 9      <a href="/abc.pdf" class="link item ">8</a>
10      <a href="abc.doc" class="link item ">9</a>
11      <a href="aabb.doc" class="link item last">10</a>
12  </p>
复制代码

 

设计a标签的样式

复制代码
 1  .demo a{
 2      float: left;
 3      display: block;
 4      height: 50px;
 5      width: 50px;
 6      border-radius: 10px;
 7      background: bisque;
 8      text-align: center;
 9      color: gray;
10      text-decoration: none;
11      margin-right: 5px;
12      font: bold 20px/50px Arial;
13  }
复制代码

 

利用各种属性选择对应标签进行样式的修改

a[]{}:

a是修改的标签类型

[]中写选定的特定值可以用正则表达式

1  =  是绝对等于
2  *= 是包含这个元素
3  ^= 以这个开头
4  $= 以这个结尾

 

{}对标签的修改

  1. 存在id的属性：

1  a[id]{
2      background: yellow;
3  }

 

  1. id=first的标签

 
a[id=first]{
     background: #15f50c;
 }

 

  1. class中有link的元素

 a[class*=link]{
     background: yellow;
 }

 

  1. href以http开头

 a[href^=http]{
     background: bisque;
 }

 

  1. href以pdf结尾

 a[href$=pdf]{
     background: red;
 }

 

 

成效图

posted @   北海之上  阅读(21)  评论(0)  编辑  收藏  举报
相关博文：
·  day32- 基本选择器
·  day45-jquery
·  层次选择器
·  day40--webday02
·  Day02
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· AI Agent开发，如何调用三方的API Function，是通过提示词来发起调用的吗
/* 粒子吸附*/
点击右上角即可分享
微信分享提示