javascript - 如何为同一个类定义的元素添加不同的样式？

Question

我希望每个按钮看起来都不同。

VIEW JSfiddle

我懂一点 HTML 和 CSS。我不了解 Javascript。以下代码摘 self 使用的支付网关。我正在尝试自定义以满足我的要求。

我试过 :nth-child() 和 :nth-of-type() 都没有成功。

HTML

    <a href="#" rel="im-checkout" data-behaviour="remote" data-text="ITEM 1"></a>

<a href="#" rel="im-checkout" data-behaviour="remote" data-text="ITEM 2"></a>

<a href="#" rel="im-checkout" data-behaviour="remote" data-style="light" data-text="ITEM 3"></a>

Javascript

(函数(){

function e(e) {
    var t = e.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
    return t && t[0] ? t[0] : "#"
}

function t(e, t) {
    var a, n;
    return a = document.getElementsByTagName("head")[0], n = document.createElement("script"), n.type = "text/javascript", n.src = e, n.onreadystatechange = t, n.onload = t, a.appendChild(n)
}

function a() {
    return c("head").append('<link rel="stylesheet" type="text/css" href="http://localhost/test/wp-content/themes/magazine-pro/style.css?ver=3.1' + m + '">')
}

function n(e) {
    var t = {
        link: c(e).prop("href"),
        style: c(e).attr("data-style"),
        verb: c(e).attr("data-text"),
        tab: c(e).attr("data-newtab"),
        behavior: c(e).attr("data-behavior") || c(e).attr("data-behaviour")

    };
    return t
}

function o(e) {
    c(e).parent(".im-checkout")
}

function r(t) {
    var a = c(t).prop("href"),
        n = a + (a.indexOf("?") > 0 ? "&" : "?") + "intent=buy&checkout=remote&iframe=1&embed=form",
        o = {
            modalClass: "immoral-modal-new-buy-flow",
            content: '<div class="im-embed-overlay"></div><div class="iframe-container loader"><div class="iframe-loader-wrapper"><div class="iframe-loader"></div></div><iframe class="iframe" src="' + n + '" seamless id="imojo-rc-iframe"></iframe></div>',
            modalCloseButton: "",
            modalStyle: {
                position: "relative",
                top: "0",
                left: "0",
                width: "100%",
                "max-width": "100%",
                height: "100%",
                transform: "none!important",
                margin: "0 auto",
                background: "transparent",
                "box-shadow": "none",
                "overflow-y": "visible"
            },
            modalContainerStyle: {
                position: "fixed",
                top: "0px",
                display: "block",
                left: "0px",
                height: "100%",
                width: "100%",
                background: "transparent",
                "backface-visibility": "hidden",
                "-webkit-overflow-scrolling": "touch",
                "overflow-y": "visible"
            }
        };
    /iPhone|iPad|iPod/i.test(navigator.userAgent) || (o.modalContentStyle = {
        position: "fixed",
        width: "100%",
        height: "100%"
    }), jQuery(t).immoral(o), c(t).on("click", function() {
        function t(e) {
            if (s.closest(".iframe-container").removeClass("loader"), e) try {
                u = c('meta[name="viewport"]').clone()[0], u && c('meta[name="viewport"]').remove();
                var t = document.createElement("meta");
                t.name = "viewport", t.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no", t.id = "im-embed-viewport", document.head.appendChild(t)
            } catch (a) {}
            window.innerWidth < 640 && (s.closest(".immoral-modal-container").css("position", "absolute"), window.scrollTo(0, 0)), m = !0
        }

        function n() {
            try {
                document.getElementById("im-embed-viewport").remove(), u && document.head.appendChild(u)
            } catch (e) {}
        }
        var o = e(a);
        if (h) {
            var r = window.open(o + "_blank/", null, "height=10,width=10,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no");
            r.blur()
        }
        var i = window.addEventListener ? "addEventListener" : "attachEvent",
            l = window[i],
            d = "attachEvent" === i ? "onmessage" : "message",
            s = c("#imojo-rc-iframe"),
            m = !1;
        l(d, function(e) {
            var a = e.message ? "message" : "data",
                o = e[a];
            m || "onRequestShow" === o && t(!0), "onRequestClose" === o && n()
        }, !1), s.load(function() {
            m || t(!1)
        })
    })
}

function i(e) {
    return jQuery.fn.immoral ? c(e).each(function() {
        return r(this)
    }) : jQuery.getScript("https://d2xwmjc4uy2hr5.cloudfront.net/im-embed/immoral.min.js", function() {
        return c(e).each(function() {
            return r(this)
        })
    })
}

function l(t, a) {
    var n, r, l, d, s;
    d = Math.floor(100 * Math.random() + 1), n = '<div class="im-checkout btn-' + d + '"><a href="' + a.link + '" class="im-checkout-btn"', n += "false" === a.tab ? ">" : ' target="_blank">', n += "" !== a.verb ? a.verb.replace(/[\u00A0-\u9999<>\&]/gim, function(e) {
        return "&#" + e.charCodeAt(0) + ";"
    }) : "Checkout with Instamojo", n += "</a></div>", c(t).replaceWith(n), r = c(".im-checkout.btn-" + d).find('a[href="' + a.link + '"].im-checkout-btn'), l = a.link.replace(/\/$/, "").split("/"), s = l[3], "@" === s.charAt(0) && (s = s.replace("@", ""));
    var m = e(a.link);
    return c.get(m + s + "/remote/auth.json", function(e) {
        var t = c.parseJSON(e);
        return t.im_branding && o(r), t.enable_remote_checkout === !0 && "link" !== a.behavior ? (c(r).attr("rel", "modal"), i(r)) : void 0
    }), r
}

function d() {
    return c = jQuery.noConflict(!0), window.jQuery = window.jQuery || c, c(document).ready(function() {
        c('a[rel="im-checkout"]').each(function(e, t) {
            var o = n(t);
            l(t, o), a()
        })
    })
}

function s(e) {
    var t = window.jQuery.fn.jquery,
        a = t.split(".").map(function(e) {
            return parseInt(e)
        }),
        n = e.split(".").map(function(e) {
            return parseInt(e)
        });
    return a[0] === n[0] ? a[1] === n[1] ? a[2] === n[2] ? !0 : a[2] != n[2] : a[1] != n[1] : a[0] != n[0]
}
var c, m = Math.floor(1e4 * Math.random() + 1),
    u = null,
    h = !1,
    f = navigator.userAgent.toLowerCase(); - 1 !== f.indexOf("safari") && -1 === f.indexOf("chrome") && (h = !0), window.Imbedify = window.Imbedify || {}, window.Imbedify.run = function() {
    return d()
};
var w = "1.11.1";
!window.jQuery || window.jQuery && s(w) ? t("https://cdnjs.cloudflare.com/ajax/libs/jquery/" + w + "/jquery.min.js", d) : d()

}).调用(这个);//# sourceMappingURL=im-embed.min.map

CSS

.im-checkout-btn:before {
    font-family: "fontawesome";
    content: "\f019";
    padding-right:5px;
 }

.im-checkout,
.btn_container {
    display: inline;
}

.im-checkout-btn {
    font-size: 11px;
    padding: .7em 1.4em;
    position: relative;
    display: inline-block;
    font-family: Georgia;
    color: #FFF !important;
    width: 20%;
    background:red;
}

View JSFIDDLE

我希望每个按钮看起来都不同。

Answer 1

(function() {
  
    function e(e) {
        var t = e.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
        return t && t[0] ? t[0] : "#"
    }

    function t(e, t) {
        var a, n;
        return a = document.getElementsByTagName("head")[0], n = document.createElement("script"), n.type = "text/javascript", n.src = e, n.onreadystatechange = t, n.onload = t, a.appendChild(n)
    }

    function a() {
        return c("head").append('<link rel="stylesheet" type="text/css" href="http://localhost/test/wp-content/themes/magazine-pro/style.css?ver=3.1' + m + '">')
    }

    function n(e) {
        var t = {
            link: c(e).prop("href"),
            style: c(e).attr("data-style"),
            verb: c(e).attr("data-text"),
            tab: c(e).attr("data-newtab"),
            behavior: c(e).attr("data-behavior") || c(e).attr("data-behaviour")
          
        };
        return t
    }

    function o(e) {
        c(e).parent(".im-checkout")
    }

    function r(t) {
        var a = c(t).prop("href"),
            n = a + (a.indexOf("?") > 0 ? "&" : "?") + "intent=buy&checkout=remote&iframe=1&embed=form",
            o = {
                modalClass: "immoral-modal-new-buy-flow",
                content: '<div class="im-embed-overlay"></div><div class="iframe-container loader"><div class="iframe-loader-wrapper"><div class="iframe-loader"></div></div><iframe class="iframe" src="' + n + '" seamless id="imojo-rc-iframe"></iframe></div>',
                modalCloseButton: "",
                modalStyle: {
                    position: "relative",
                    top: "0",
                    left: "0",
                    width: "100%",
                    "max-width": "100%",
                    height: "100%",
                    transform: "none!important",
                    margin: "0 auto",
                    background: "transparent",
                    "box-shadow": "none",
                    "overflow-y": "visible"
                },
                modalContainerStyle: {
                    position: "fixed",
                    top: "0px",
                    display: "block",
                    left: "0px",
                    height: "100%",
                    width: "100%",
                    background: "transparent",
                    "backface-visibility": "hidden",
                    "-webkit-overflow-scrolling": "touch",
                    "overflow-y": "visible"
                }
            };
        /iPhone|iPad|iPod/i.test(navigator.userAgent) || (o.modalContentStyle = {
            position: "fixed",
            width: "100%",
            height: "100%"
        }), jQuery(t).immoral(o), c(t).on("click", function() {
            function t(e) {
                if (s.closest(".iframe-container").removeClass("loader"), e) try {
                    u = c('meta[name="viewport"]').clone()[0], u && c('meta[name="viewport"]').remove();
                    var t = document.createElement("meta");
                    t.name = "viewport", t.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no", t.id = "im-embed-viewport", document.head.appendChild(t)
                } catch (a) {}
                window.innerWidth < 640 && (s.closest(".immoral-modal-container").css("position", "absolute"), window.scrollTo(0, 0)), m = !0
            }

            function n() {
                try {
                    document.getElementById("im-embed-viewport").remove(), u && document.head.appendChild(u)
                } catch (e) {}
            }
            var o = e(a);
            if (h) {
                var r = window.open(o + "_blank/", null, "height=10,width=10,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no");
                r.blur()
            }
            var i = window.addEventListener ? "addEventListener" : "attachEvent",
                l = window[i],
                d = "attachEvent" === i ? "onmessage" : "message",
                s = c("#imojo-rc-iframe"),
                m = !1;
            l(d, function(e) {
                var a = e.message ? "message" : "data",
                    o = e[a];
                m || "onRequestShow" === o && t(!0), "onRequestClose" === o && n()
            }, !1), s.load(function() {
                m || t(!1)
            })
        })
    }

    function i(e) {
        return jQuery.fn.immoral ? c(e).each(function() {
            return r(this)
        }) : jQuery.getScript("https://d2xwmjc4uy2hr5.cloudfront.net/im-embed/immoral.min.js", function() {
            return c(e).each(function() {
                return r(this)
            })
        })
    }

    function l(t, a) {
        var n, r, l, d, s;
        d = Math.floor(100 * Math.random() + 1), n = '<div class="im-checkout btn-' + d + '"><a href="' + a.link + '" class="im-checkout-btn"', n += "false" === a.tab ? ">" : ' target="_blank">', n += "" !== a.verb ? a.verb.replace(/[\u00A0-\u9999<>\&]/gim, function(e) {
            return "&#" + e.charCodeAt(0) + ";"
        }) : "Checkout with Instamojo", n += "</a></div>", c(t).replaceWith(n), r = c(".im-checkout.btn-" + d).find('a[href="' + a.link + '"].im-checkout-btn'), l = a.link.replace(/\/$/, "").split("/"), s = l[3], "@" === s.charAt(0) && (s = s.replace("@", ""));
        var m = e(a.link);
        return c.get(m + s + "/remote/auth.json", function(e) {
            var t = c.parseJSON(e);
            return t.im_branding && o(r), t.enable_remote_checkout === !0 && "link" !== a.behavior ? (c(r).attr("rel", "modal"), i(r)) : void 0
        }), r
    }

    function d() {
        return c = jQuery.noConflict(!0), window.jQuery = window.jQuery || c, c(document).ready(function() {
            c('a[rel="im-checkout"]').each(function(e, t) {
                var o = n(t);
                l(t, o), a()
            })
        })
    }

    function s(e) {
        var t = window.jQuery.fn.jquery,
            a = t.split(".").map(function(e) {
                return parseInt(e)
            }),
            n = e.split(".").map(function(e) {
                return parseInt(e)
            });
        return a[0] === n[0] ? a[1] === n[1] ? a[2] === n[2] ? !0 : a[2] != n[2] : a[1] != n[1] : a[0] != n[0]
    }
    var c, m = Math.floor(1e4 * Math.random() + 1),
        u = null,
        h = !1,
        f = navigator.userAgent.toLowerCase(); - 1 !== f.indexOf("safari") && -1 === f.indexOf("chrome") && (h = !0), window.Imbedify = window.Imbedify || {}, window.Imbedify.run = function() {
        return d()
    };
    var w = "1.11.1";
    !window.jQuery || window.jQuery && s(w) ? t("https://cdnjs.cloudflare.com/ajax/libs/jquery/" + w + "/jquery.min.js", d) : d()
}).call(this);
//# sourceMappingURL=im-embed.min.map

.im-checkout-btn:before {
    font-family: "fontawesome";
    content: "\f019";
    padding-right:5px;
 }

.im-checkout,
.btn_container {
    display: inline;
}

.im-checkout-btn {
    line-height: 1em;
    letter-spacing: 0.15em;
    -webkit-font-smoothing: antialiased !important;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    border-radius: 0.25em;
    font-size: 11px;
    padding: .7em 1.4em;
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
    border: none;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    text-transform: none;
    -webkit-font-smoothing: subpixel-antialiased !important;
    font-family: "Varela Round", Georgia;
    font-weight: 400;
    color: #FFF !important;
    text-decoration: none !important;
    -webkit-transition: 0;
    -moz-transition: 0;
    transition: 0;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    border-radius: 0.25em;
    cursor: pointer;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    width: 16.2%;
     background: linear-gradient(to bottom right,#C42B42 0%, #eb344f 50%, #e1314c 51%, #DF2C55 100%);
}
body > div:first-child a{
  background: green;
}

<a href="#" rel="im-checkout" data-behaviour="remote" data-text="ITEM 1"></a>

<a href="#" rel="im-checkout" data-behaviour="remote" data-text="ITEM 2"></a>

<a href="#" rel="im-checkout" data-behaviour="remote" data-style="light" data-text="ITEM 3"></a>

我试着编辑你的 css 并放了这个:

body > div:first-child a{
  background: green;
}

并且子选择器似乎可以正常工作。