高级选择器及伪类

作者: 心存美好 | 来源:发表于2022-04-13 10:10 被阅读0次

高级选择器及伪类

1. 回顾基础选择器

ID选择器 #id
类名选择器 .class
标签选择器 tagname
通配符选择器 *
.组合(多元素)选择器 .class,#id
后代选择器 .class #id
子元素选择器 .class>#id
毗邻选择器 .class+#id (同层级)
关联后选择器 .class~#id (同层级)

10.多选择器 div.aa.bb#cc(之间并且的关系)

2. 属性选择器

E[attr]匹配具有attr属性的E元素

a[href]{ color:red; }

[href]{border:1px sold blue}/*只要具有href属性的元素*/

E[attr=val匹配所有attr属性等于“val”的E元素

a[href=”www.baidu.com”]{ color:red; }

~= 就是某个属性包含或者等于属性值

E[attr~=val]匹配所有attr属性包含“val”或者等于“val”的E元素

img[src ~= “images aa”]{ margin:10px;}

  <style>
    [class~=box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box aa">
    BOX
  </div>
</body>

|= 就是属性以‘val’整个开头或'val-'的元素

E[attr|=val]匹配所有attr属性以“val”整个开头或'val-'的E元素

img[alt |= buy]{width:300px; }

  <style>
    [class|= box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box-1">
    BOX
  </div>
</body>

  <style>
    [class|= box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box-daa ee">
    BOX
  </div>
</body>

E[attr1][att2=val]匹配所有拥有attr1属性同时具有attr2等于'val'的元素

a[href][title='图片']{text-decoration:underline;}

^=就是以什么字符开头

E[attr^=val]匹配所有attr属性以“val”开头E元素

img[src^='image'] {width:300px; }

  <style>
    [class^= box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="boxdaa">
    BOX
  </div>
</body>

$=就是以什么字符结尾

E[attr$=val] 匹配所有attr属性以“val”结尾E元素

img[src$='image'] {width:300px; }

  <style>
    [class$= e] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box-daa ee">
    BOX
  </div>
</body>

  <style>
    [src$= jpg] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
 <img src="img/1.jpg" alt="">
 <img src="img/2.png" alt="">
</body>

E[attr*=val] 匹配所有attr属性包含“val”E元素

img[src*='image'] {width:300px; }

  <style>
    [src*= mg] {
      width: 100px;
      height: 100px;
      border: 10px solid blue;
    }
  </style>
</head>

<body>
 <img src="img/1.jpg" alt="">
 <img src="img/2.png" alt="">
</body>

3. CSS3新增的结构伪类选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒阴影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:last-child {
      background-color: skyblue;
      /*结构伪类选择器  父级中最后一个元素*/
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">box1
      <p>p11</p>
      <p>p12</p>
      <p>p13</p>
    </div>
    <div class="box2">box2
      <p>p21</p>
      <p>p22</p>
      <p>p23</p>
    </div>
  </div>
</body>

</html>

p:first-of-type

选择p，这些p必须为它们各自父级的所有p子元素的第1个
p:last-of-type
选择p，这些p必须为它们各自父级的所有p子元素的最后1个
p:only-of-type
选择p，这些p必须为它们各自父级的唯一的p（父级中还有其他类型元素）
p:first-child
选择p，这些p必须为它们各自父级的第一个子元素
p:last-child
选择p，这些p必须为它们各自父级的最后一个子元素
p:only-child
选择p，这些p必须为它们各自父级的唯一子元素 (父级中再无其他元素)
p:nth-child(2)
选择p，这些p必须为它们各自父级的第2个子元素（
p:nth-last-child(2)
选择p，这些p必须为它们各自父级的倒数第2个子元素没有其他标签用找所有孩子
p:nth-of-type(2)
选择p，这些p必须为它们各自父级的所有p子元素的第2个有其他标签用只找p
p:nth-last-of-type(2)
选择p，这些p必须为它们各自父级的所有p子元素的倒数第2个
E：first-line
表示E元素中的第一行
E：first-letter
表示E元素中的第一个字符
p:empty

选择没有内容的p
p:target

选择当前被锚点激活的p，（点击就被激活）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒阴影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:target {
      background-color: purple;
      /*点击锚点激活p标签*/
    }
  </style>
</head>

<body>
  <a href="#bb">点击</a> <!--  锚点点击激活 -->
  <div class="box">
    <div class="box1">
      <span>box1</span>
      <p>p11</p>
      <p>p12</p>
      <p>p13</p>
    </div>
    <div class="box2">
      <span>box2</span>
      <span>box2</span>
      <p>p21</p>
      <p>p22</p>
      <p id="bb">p23</p> <!--  锚点点击激活 -->
    </div>
  </div>
</body>

</html>

p:not(.on)

选择除了.on的p，括号中选选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒阴影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:not(.aa){
      background-color:pink
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">
      <span>box1</span>
      <p>p11</p>
      <p class="aa"></p>
      <p>p13</p>
    </div>
    <div class="box2">
      <span>box2</span>
      <span>box2</span>
      <p>p21</p>
      <p>p22</p>
      <p>p23</p> 
    </div>
  </div>
</body>

</html>

E:nth-child(odd)

匹配奇数行同p:nth-child(2n-1)

E:nth-child(even)

匹配偶数行同p:nth-child(2n)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒阴影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:nth-child(even){
      background-color:pink
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">
      <span>box1</span>
      <p>p11</p>
      <p class="aa"></p>
      <p>p13</p>
      <p>p14</p>
    </div>
    <div class="box2">
      <span>box2</span>
      <span>box2</span>
      <p>p21</p>
      <p>p22</p>
      <p>p23</p> 
      <p>p24</p> 
    </div>
  </div>
</body>

</html>

E:first-line 首行状态
E::selection 被选中的文本的样式被修改(两个冒号)

    .text::selection{
      color:red;
    }

和表单有关的伪类

:focus 处于被聚焦的状态

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input:focus {
      border: 2px solid red;
    }

    .info {
      display: none;
    }

    input:focus+.info {
      /*  获取焦点.info显示 */
      display: block;
    }
  </style>
</head>

<body>
  <input type="text">
  <div class="info">请输入内容</div>
</body>

</html>

:checked 表单被勾选的状态(几乎只有表单可以记录状态)
:disabled 选择不能被操作的input框
:enabled 选择能被操作的input框

4. 伪元素的使用

一个盒子(非单标签)有两个伪元素,叫before/after

正常的元素（标准的标签）是在标签的嵌套中使用添加内容，伪元素在content中添加内容，伪元素都是行内元素

4.1 伪元素的写法

E::before{
    content: "";  /* 激活伪元素 一定要有，内容可以为空“”*/
}
E::after{
    content:"";
}

  <style>
    div::before {
      content: "大";
      color: red;
      font-size: 26px;
    }

    div::after {
      content: "有点不容易";
      /* display:block;伪元素都是行内元素 */

      color: blue;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div>前端学习</div>
</body>

小三角
 <style>
    div::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: 30px solid transparent; 
      border-right-color: red;
    }
  </style>
</head>

<body>
  <div>前端学习</div>
</body>

content:（一定要加！！！）

content是伪元素的内容样式,必须写

string: 在节点之前插入文字

attr(attrname): 在节点中插入元素属性的值

url(媒体文件): 比如图片

content: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png);

4.2 伪元素和伪类的区别:

伪元素是元素,伪类是状态/条件

4.3 伪元素和普通元素的区别

锦上添花(本意是替换空标签,比如加小三角)

几乎没有区别

写法不一样,(css添加的)

需要css渲染完成才知道有无伪元素,不影响布局结构,

百度爬虫爬不到伪元素，百度对空标签不友好

4.4 伪元素性质:

行内元素
before在标签正文内容前,可以理解为标签开始内容的前面的元素
after在标签的结尾之前,可以理解为正文内容之后
具有文本属性,
CSS创建的抽象元素,是个虚拟的容器
多用于清除浮动

伪元素清除浮动
  <style>
    div {
      width: 500px;
      border: 3px solid red;
    }

    p {
      float: left;
      width: 100px;
      height: 50px;
      background-color: skyblue;
      font-size: 30px;
      margin: 0 20px;
      text-align: center;
    }

    /* span{  
      display:block;
      clear:both;
    } */
    div::after {
      /* 伪元素解决高度塌陷 清除浮动*/
      content: '';
      display: block;
      clear: both
    }
  </style>
</head>

<body>
  <div>
    <p></p>
    <p></p>
    <p></p>
    <!--   <span></span>之前解决高度塌陷在元素最后加一个块元素 ，这里把span变成块了 -->
  </div>

</body>

背景及圆角

1. 复习元素背景

背景属性background

1.1. 背景颜色 `background-color`

属性值:

颜色单词 red
十六进制 #f00
rgb r:red g:green b:blue取值范围都是0-255
rgba a:Alpha取值范围0-1,(透明度)
HSL H:Hue色调取值范围0-360 S:Saturation饱和度取值范围0%-100% L:Lightness亮度取值范围0%-100% .HSLA` Alpha透明度。取值0~1之间。
transparent: 默认,透明,不继承
currentcolor: 当前色, currentcolor等于当前的color值

background-color:currentcolor;

1.2. 背景图片 `background-image`

属性值:

url(“图片路径“)
none 不使用背景图片(初始默认值)

多背景写法:

多个背景以“，”隔开，不限个数

background-image: url(“1”) , url(“2”) ;

图片格式:

.jpg 不支持动画,不支持透明,渐进显示,颜色丰富,有损
.png 不支持动画,支持透明度, 颜色更丰富,无损
.gif 支持动画,256种颜色,2种透明度,渐进显示
.webp支持动画,高压缩率,高加载速率,点个赞

background-image:url('图片路径');

1.3. 背景图片平铺 `background-repeat`

属性值:

no-repeat不平铺,背景图片只显示一次
repeat-x水平方向平铺
repeat-y垂直方向平铺
repeat默认值(水平垂直方向都平铺)

可以分解成两个属性:

background-repeat-x
. background-repeat-y

background-repeat: repeat-x;

1.4. 背景图片位置 `background-position`

可以设置两个值,如果只设置一个值,另一个默认为center

属性值:

关键词 top / right / bottom / right / center
属性值是两个关键词,一个的话第二个就是默认center
百分数 (水平% 竖直%) 百分比相对于父级容器

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为50%
像素值 (水平px 竖直px)

可以分解成两个属性:

background-position-x
background-position-y

background-position:20px 30px;

1.5. 背景图片大小 `background-size`

属性值:

像素值,有两个,如果写一个,第二个就默认auto
百分数,按原始比例缩放; 百分比相对于父级容器
cover 图片缩放,直到整个背景图片占满背景框

保持宽高比不变，保证占满盒子，但是不一定能看到全部图
contain 图片缩放,直到背景图片有一边触碰到背景边框就停止缩放

保持宽高比不变，保证看清全图，但是不一定占满盒子

数值可以写一个可以写两个,如果只有一个第二个就是默认

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      height: 40px;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
    }

    .main div:nth-of-type(2) {
      background-size: 100px 50px;
    }

    .main div:nth-of-type(3) {
      background-size: 50% 50%;
    }

    .main div:nth-of-type(4) {
      background-size: cover;
    }
  </style>
</head>

<body>
  <div class="main">
    <p>默认背景图片</p>
    <div></div>
    <p>background-size:100px 50px 的背景</p>
    <div></div>
    <p>background-size:50% 50% 的背景</p>
    <div></div>
    <p>background-size:cover的背景</p>
    <div></div>
  </div>
</body>

1.6. 背景图片关联 background-attachment

属性值:

scroll 默认值,背景图片随着页面滚动而滚动,背景图片附着在容器里
fixed 固定值,背景图片不随着页面滚动而滚动,背景图片附着在浏览器窗口里

  <style>
    body {
      padding-left: 180px;
      background: url('http://www.hshkyl.com/uploads/allimg/20/1-20091H01623638.jpg') no-repeat 0 0/contain;
      background-attachment: fixed;    /* 背景图片固定 */
    }
  </style>
</head>

<body>
  <div>
    <p>这是p标签1</p>
    <p>这是p标签2</p>
    <p>这是p标签3</p>
    <p>这是p标签4</p>
    <p>这是p标签5</p>
    <p>这是p标签6</p>
    <p>这是p标签100</p>
  </div>

1.7. 背景图片显示基点(起始域) `background-origin`

属性值:

padding-box 默认值，从padding区域起始
content-box 从内容部分起始
border-box 从border区域起始

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
      border: 30px dashed deeppink;
      padding: 20px;
    }

    .main div:nth-of-type(2) {
      background-origin: content-box;
      background-size: 100% 100%;
    }

    .main div:nth-of-type(3) {
      background-origin: border-box;
    }

    .main div:nth-of-type(4) {
      background-size: cover;
    }
  </style>
</head>

<body>
  <div class="main">
    <p>background-origin默认背景图片的起始域为padding-box</p>
    <div></div>
    <p>background-origin从内容区content-box显示背景</p>
    <div></div>
    <p>background-origin从内容区border-box显示背景</p>
    <div></div>
  </div>
</body>

1.8. 背景图片裁剪区域 `background-clip`

属性值:

border-box 默认值，从border区域开始显示背景,背景被裁剪到盒子边框
content-box 从内部区域开始显示背景.背景被裁剪到内容区域
padding-box 从padding区域开始显示背景,背景被裁剪到内边距
text 相对于文本

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
      border: 30px dashed deeppink;
      padding: 20px;
    }

    .main div {
      background-origin: border-box;
      background-size: 80% 80%;
    }

    .main div:nth-of-type(1) {
      background-clip: border-box;
    }

    .main div:nth-of-type(2) {
      background-clip: padding-box;
    }

    .main div:nth-of-type(3) {
      background-clip: content-box;
    }
  </style>
</head>

<body>
  <div class="main">

    <p>background-clip从border默认</p>
    <div></div>
    <p>background-clip从padding</p>
    <div></div>
    <p>background-clip从content</p>
    <div></div>
  </div>
</body>

/*text相对于文本*/
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
      border: 30px dashed deeppink;
      padding: 20px;
    }

    .main div {
      background-origin: border-box;
      background-size: 80% 80%;
    }

    .main div:nth-of-type(1) {
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      font-size: 100px;
      text-align: center;
      font-weight: bolder;
      /* transition: 3s; */
      animation: run 3s infinite alternate;
    }

    /* .main div:nth-of-type(1):hover{
      background-position: -30px 0;
    } */
    @keyframes run {
      0% {
        background-position: 20px 0;
      }

      100% {
        background-position: -30px 0;
      }
    }
  </style>
</head>
<body>
  <div class="main">
    <p>background-clip从border默认</p>
    <div>你好</div>
  </div>
</body>

1.9. 背景的综合样式

background:color image repeat position/size attachment origin clip;

省略部分会被默认值替代,
position和size之间要用/分割

高级选择器及伪类