CSS 属性选择器和输入标签的伪元素之间的区别-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

CSS 属性选择器和输入标签的伪元素之间的区别

P粉988025835 2023-09-10 15:43:12

[CSS3讨论组]

576

**CSS 文件内部：**

input[type="text"]{
border: 2px solid red;
}

input::placeholder{

color:green;
}

input[title="google"]{
background-color:black;
color:white;
}

为什么类型、占位符和标题的写入过程不同？尽管标签内的文字看起来相同。如何理解哪些是属性，哪些是元素？

P粉988025835

全部回复(1)

P粉8091101292023-09-11 09:14:41 1楼

input::placeholder 选择的占位符，而 input[attribute="value"] 选择 > 其属性值为 value。它们做不同的事情。

可视化示例：

/* Selects an <input> with a 'placeholder' attribute */
input[placeholder] {
  color: #2ab7ca;
}

/* Selects the placeholder itself */
input::placeholder {
  color: #ff6b6b;
}


/* Ignore these */

body {
  margin: 0;
  padding: 2em;
}

input {
  display: block;
  margin: 1em 0;
  height: 2em;
  width: 100%;
  padding: 0.5em;
}

<input
  type="text"
  placeholder="This placeholder is red and not editable."
>

<input
  type="text" placeholder=""
  value="...whereas the input content itself is blue and editable."
>

注意：此答案是从评论转换而来的，因为我找不到任何重复的目标。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>