**Inside CSS file:**
input[type="text"]{
border: 2px solid red;
}
input::placeholder{
color:green;
}
input[title="google"]{
background-color:black;
color:white;
}
Why are the writing procedures for Type, Placeholder and Title different? Even though the text inside the tag looks the same. How to understand which are attributes and which are elements?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
input::placeholderselects the placeholder for, whileinput[attribute="value"]selects>Its attribute value is value. They do different things.Visualization example:
/* 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; }NOTE: This answer was converted from a comment because I couldn't find any duplicate targets.