CSS这句代码什么意思

陽陽陽 · 发表于 2023-2-10 08:42:17

.input-field > label:not(.label-icon).active {
  -webkit-transform: translateY(-14px) scale(0.8);
      transform: translateY(-14px) scale(0.8);
  -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
}

.input-field > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
.input-field > input[type=date]:not(.browser-default) + label,
.input-field > input[type=time]:not(.browser-default) + label {
  -webkit-transform: translateY(-14px) scale(0.8);
      transform: translateY(-14px) scale(0.8);
  -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
}

尤其是加粗的那里

还有一点就是假如我想获取一个div,  class="test" 里面的元素（p class="indiv"）这种该怎么写

afu45 · 发表于 2023-2-10 08:42:18

本帖最后由 afu45 于 2023-2-10 09:08 编辑

class=input-field 的子元素(> 只能是子元素后代不行) 标签为 label class=active 但是没有label-icon

匹配
<div class="input-field">
   <label id="a1" class="label-icon active"></label>
   <label id="a2" class="active"></label>
</div>
中的 a2元素

input[type] 的意思是  标签为input 并且包含type属性比如
<input type="text" value="123"/>
<input value="123" />

transform-origin  设置旋转、缩放等等元素的基点位置
https://www.runoob.com/cssref/css3-pr-transform-origin.html

div.test p.indiv

afu45 · 发表于 2023-2-10 09:18:55

效果就是往上平移14px 并且缩放到80%

第2个样式里面的 , 就是或者的意思只是3个样式效果一样，写一起了

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh-CN"><head>
    <title>test</title>
        <style>
label{ background:#f00;margin: 5px; display: inline-block; }


.input-field > label:not(.label-icon).active {
  -webkit-transform: translateY(-14px) scale(0.8);
          transform: translateY(-14px) scale(0.8);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}


.input-field > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label,
.input-field > input[type=date]:not(.browser-default) + label,
.input-field > input[type=time]:not(.browser-default) + label {
  -webkit-transform: translateY(-14px) scale(0.8);
          transform: translateY(-14px) scale(0.8);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}

        </style>
</head>
<body>

<div class="input-field">
        <label class="label-icon">
                123
        </label>
        <label class="label-icon">
                456
        </label>
        <label class="">
                我是正常的没有被平移， 也没有缩小
        </label>
    <label class="active">
                我被往上平移了14px 并且缩小了 80%
        </label>
</div>


</body>
</html>

陽陽陽 · 发表于 2023-2-10 09:19:58

afu45 发表于 2023-2-10 09:04
class=input-field 的子元素(> 只能是子元素后代不行) 标签为 label class=active 但是没有label-icon

...

大佬那这个是什么意思
.input-field > input[type=date]:not(.browser-default) + label,

感觉你怎么是万能的。。

afu45 · 发表于 2023-2-10 09:25:46

陽陽陽发表于 2023-2-10 09:19
大佬那这个是什么意思
.input-field > input[type=date]:not(.browser-default) + label,

class=input-field的子元素标签为input 且包含type属性且 type=date 且 class里没有browser-default

+ label 是上面input的兄弟元素，也就是紧跟在input后面的那个弟弟

		自动登录	找回密码
密码			注册

[已解决] CSS这句代码什么意思

最佳答案

评分