Home >Web Front-end >CSS Tutorial >Can I Apply CSS Rules to a Specific Div Only in Google Chrome?

Can I Apply CSS Rules to a Specific Div Only in Google Chrome?

DDD
DDDOriginal
2024-12-10 21:59:17926browse

Can I Apply CSS Rules to a Specific Div Only in Google Chrome?

Applying CSS rules exclusively to Google Chrome

Query: Can specific CSS rules be applied to a specific div only in Google Chrome? Here's the example:

position: relative;
top: -2px;

Response: Yes, this is possible, and there are two approaches:

CSS Solution

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  div{top:10;} 
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    div{top:0;} 
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

JavaScript Solution

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // modify button 
}

The above is the detailed content of Can I Apply CSS Rules to a Specific Div Only in Google Chrome?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn