高级选择器及伪类

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

高级选择器及伪类
CSS高级选择器
前端零基础课程--第八节课
CSS3选择器
CSS3 积累（2）之结构伪类选择器
CSS选择器（2）
CSS-常用选择器
jQuery之选择器
C3选择器
css3-新增选择器

高级选择器及伪类

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之间要用/分割

高级选择器及伪类
高级选择器及伪类 1. 回顾基础选择器 ID选择器 #id 类名选择器 .class 标签选择器 tagna...
CSS高级选择器
CSS高级选择器一.伪类选择器对于之前的类选择器的补充类再定义一个别名举例常用的两个伪类选择器伪类选择器...
前端零基础课程--第八节课
CSS3高级复杂选择器：兄弟选择器、属性选择器、伪类选择器、伪元素选择器兄弟选择器相邻兄弟选择器（+）：选出...
CSS3选择器
1CSS选择器的分类基本选择器层次选择器伪类选择器动态伪类选择器目标伪类选择器语言伪类选择器 UI元素...
CSS3 积累（2）之结构伪类选择器
介绍伪类选择器主要有动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器和伪元素等，这篇主要讲讲什么是结构伪类...
CSS选择器（2）
伪类选择器伪类选择器实例
CSS-常用选择器
常用选择器子代和父代选择器伪类选择器伪元素属性选择器孩子选择器兄弟选择器否定伪类优先选择器 a的伪类
jQuery之选择器
基本选择器层级选择器简单伪类选择器与内容相关的伪类选择器与元素状态相关的伪类选择器匹配子元素的伪类选择器...
C3选择器
属性选择器兄弟选择器伪类选择器伪类target 伪元素before,after 其他伪元素
css3-新增选择器
本文目录 1.属性选择器 2.伪类选择器（普通伪类、目标伪类、链接伪类） 3.伪元素选择器 1.属性选择器 E[a...

高级选择器及伪类