Igor Bueno

Boa noite, Sou novo aqui no fórum e logo de cara estou pedindo ajuda. O meu problema é o seguinte: Tenho duas folhas de estilos: exemplo1.css exemplo2.css Porém, as duas contém as mesmas classes (com estilos diferentes), por exemplo: thead td th Porém, uma das tabelas fica defeituosa, pelo conflito entre os estilos. Como faço para arrumar isso? (Desculpe pela ignorância, sou muito novo em HTML e CSS). Segue as folhas que estão dando conflito: exemplo1.css table { border:none; background-color:#F3F3F3; border-collapse:collapse; margin:10px 0; font:normal 11px/20px "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif; } td,th { border-collapse:collapse; border-bottom:0px solid #cacaca; padding:10px 15px; text-align:center; } table th { border-left:0px solid #cacaca; color:#ccc; } table td { border-left:0px solid #cacaca; } table td:first-child, table th:first-child { text-align:left; border-left:none; font-weight:bold; width:190px; } .first { border-left:none; text-align:left; color:#F30;} .first2 { border-left:none; text-align:left; } .td2 { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; } th { background:url(../images/table-head-mid.gif) repeat-x 0 0; padding-left:20px; text-align:right; font-size:12px; } th.lefthead { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; } th.righthead { background:url(../images/table-head-right.gif) no-repeat right top; text-align:left; } th.lefthead2 { background:url(../images/table-head-left.gif) no-repeat 0 0; padding-left:20px; text-align:left; } table a { text-decoration:none; } thead th { color: #309; height:5px; padding:10px 15px; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-align:center; } exemplo2.css .pricing-table { min-width: 670px; } td.planocloud { position: relative; display: inline-block; margin: 0 5px; vertical-align: text-top; } /* Plan Title */ thead .plan td { width: 210px; height: 42px; padding: 15px 0; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } thead .plan h2 { font-family: 'Arial Black', Arial, Helvetica, sans-serif; font-weight: bold; font-size: 22px; text-transform: uppercase; line-height: 24px; } thead .plan em { font-family: Georgia, Arial, Helvetica, sans-serif; font-style: italic; font-size: 14px; line-height: 16px; } thead .plan .green { color: #36611e; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: url(../images/green_pattern.png) repeat-x 0 0; } thead .plan .orange { color: #fafafa; text-shadow: 1px 1px 2px rgba(0,0,0, .4); background: url(../images/orange_pattern.png) repeat-x 0 0; } /* Plan Price Section */ thead .price td { position: relative; width: 210px; padding: 25px 0; font-family: 'Arial Black', Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; text-align: center; color: #b6b07c; background: #f9f8f1; background: -moz-linear-gradient(top, #f9f8f1 0%, #f4f2e2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f8f1), color-stop(100%,#f4f2e2)); background: -webkit-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%); background: -o-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%); background: -ms-linear-gradient(top, #f9f8f1 0%,#f4f2e2 100%); background: linear-gradient(to bottom, #f9f8f1 0%,#f4f2e2 100%); } thead .price p { display: table; margin: 0 auto; font-size: 50px; line-height: 60px; } thead .price p span { font-size: 0.5em; display: table-cell; vertical-align: middle; } thead .price span { font-size: 14px; } thead .price a { display: block; position: absolute; top: 41px; right: -5px; height: 32px; padding: 0 10px; line-height: 32px; font-size: 12px; text-decoration: none; } thead .price .green a { color: #37621f; text-shadow: 1px 1px 0px rgba(255,255,255, .2); background: #82d344; background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#51af34)); background: -webkit-linear-gradient(top, #82d344 0%,#51af34 100%); background: -o-linear-gradient(top, #82d344 0%,#51af34 100%); background: -ms-linear-gradient(top, #82d344 0%,#51af34 100%); background: linear-gradient(to bottom, #82d344 0%,#51af34 100%); } thead .price .orange a { color: #fafafa; text-shadow: 1px 1px 2px rgba(0,0,0, .3); background: #ff8042; background: -moz-linear-gradient(top, #ff8042 0%, #f55a0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8042), color-stop(100%,#f55a0e)); background: -webkit-linear-gradient(top, #ff8042 0%,#f55a0e 100%); background: -o-linear-gradient(top, #ff8042 0%,#f55a0e 100%); background: -ms-linear-gradient(top, #ff8042 0%,#f55a0e 100%); background: linear-gradient(to bottom, #ff8042 0%,#f55a0e 100%); } thead .price .green a:before, thead .price .orange a:before, thead .price .green a:after, thead .price .orange a:after { display: block; position: absolute; content: ''; } thead .price .green a:before, thead .price .orange a:before { width: 8px; height: 32px; top: 0; left: -8px; background: url(../images/badge.png) no-repeat; } thead .price .green a:after, thead .price .orange a:after { width: 0; height: 0; bottom: -5px; right: 0; border-bottom: 5px solid transparent; } thead .price .green a:before { background-position: 0 0; } thead .price .orange a:before { background-position: 0 -32px; } thead .price .green a:after { border-left: 5px solid #1c5d40; } thead .price .orange a:after { border-left: 5px solid #88330a; } /* Plan Features Section */ tbody tr:first-child td:before { position: absolute; display: block; content: ''; width: 100%; height: 5px; top: -25px; left: 0; background: url(../images/stripe.png) repeat-x 0 0; } tbody td { width: 170px; padding-left: 40px; line-height: 30px; border-top: 1px solid #f2f2f2; font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #828282; } tbody tr:first-child td { border-top: 20px solid #ffffff; } .clock-icon td, .basket-icon td, .star-icon td, .heart-icon td { background: #ffffff url(../images/icons.png) no-repeat 0 0; } .clock-icon td { background-position: 0 0; } .basket-icon td { background-position: 0 -30px; } .star-icon td { background-position: 0 -60px; } .heart-icon td { background-position: 0 -90px; } /* Plan Description Section */ tfoot td { width: 190px; padding: 20px 10px; text-align: center; line-height: 18px; background: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #828282; -webkit-border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; -webkit-box-shadow: 0px 2px 0px #e4e4e4; -moz-box-shadow: 0px 2px 0px #e4e4e4; box-shadow: 0px 2px 0px #e4e4e4; } /* Float Text Section */ @font-face { font-family: 'Lobster13Regular'; src: url('font/Lobster_1.3-webfont.eot'); src: url('font/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'), url('font/Lobster_1.3-webfont.woff') format('woff'), url('font/Lobster_1.3-webfont.ttf') format('truetype'), url('font/Lobster_1.3-webfont.svg#Lobster13Regular') format('svg'); font-weight: normal; font-style: normal; } .table-float { display: block; position: absolute; width: 300px; padding: 80px 0 0 0; top: 85%; left: 130px; } .table-float p { font-family: Lobster13Regular, sans-serif; font-size: 16px; color: #858585; line-height: 20px; } .table-float p.big { font-size: 65px; color: #f76117; text-align: right; line-height: 65px; } .table-float .arrow { display: block; position: absolute; top: 0; left: 50px; width: 68px; height: 77px; background: url(../images/arrow2.png) no-repeat 0 0; } Caso alguém tenha a boa vontade de arrumar isso para mim, favor entrar em contato para combinarmos valores.