fix(docs-infra): separate vendor-specific CSS selectors (#31252)

In #31118, some vendor-specific selectors were combined in one rule-set.
As pointed out in [this comment][1], this would result in the whole
rule-set being ignored by all browsers, since one invalid/unrecognized
selector invalidates the declaration block.

This commit fixes it by defining a separate rule-set per selector. The
list of vendor-specific selectors is also adjusted to better target the
currently supported browsers.

[1]: https://github.com/angular/angular/pull/31118/files#r296923652

PR Close #31252

aio/src/styles/2-modules/_api-list.scss

@@ -78,15 +78,21 @@ aio-api-list {
     transition: all .2s;
 
     // PLACEHOLDER TEXT
-    &::-webkit-input-placeholder,
-    &::-moz-placeholder,
-    &::-ms-input-placeholder,
-    &:-moz-placeholder {
-      /* Chrome/Opera/Safari */
-      /* Firefox 19+ */
-      /* IE 10+ */
-      /* Firefox 18- */
-
+    // NOTE: Vendor-prefixed selectors must be on separate blocks, because one invalid/unknown
+    //       selector will invalidate the whole block.
+    &::placeholder {  // Chrome/Firefox/Safari
+      color: $blue-grey-100;
+      @include font-size(14);
+    }
+    &::-webkit-input-placeholder {  // QQ Browser
+      color: $blue-grey-100;
+      @include font-size(14);
+    }
+    &::-ms-input-placeholder {  // Edge
+      color: $blue-grey-100;
+      @include font-size(14);
+    }
+    &:-ms-input-placeholder {  // IE
       color: $blue-grey-100;
       @include font-size(14);
     }