Проблемы с CSS по умолчанию, использующие мой код

Question

Я работаю над своим сайтом пожертвования, и я пришел, чтобы найти проблему, когда по умолчанию buycraft css берет на себя CSS, который я пишу. Я чрезвычайно новичок в css, и я не планирую делать это много в будущем, но сейчас мне нужна помощь.

Когда я проверяю элемент на моем навигаторе, он дает мне несколько переменных для .navbar .nav > li > a, таких как цвет и тень текста. Я попытался переписать код для текста, и это бесполезно. Я скопировал его точно так же, как то, что проверил элемент, и я дал переменные! Важно, но ничего не меняется. Если кто-нибудь скажет мне, что случилось с текстом кнопки на панели навигации, пожалуйста, помогите мне.

My website.

Код:

@import "http://fonts.googleapis.com/css?family=Oswald:400,300"; 

body { 
    background:url(http://i.imgur.com/tYtIxao.jpg?1); 
    background-size:cover; 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    padding:0; 
    margin:0; 
    height:100% 
} 

.navbar { 
    background:#11CFD9; 
    position:fixed; 
    font-family:"Oswald"; 
    top:0; 
    left:-5px; 
    right:-5px; 
    background-color:#11CFD9; 
    color:#000!important; 
    box-shadow:0 2px 2px 0 rgba(50,50,50,0.24); 
    text-align:center; 
    height:80px; 
    display:block; 
    padding-left:5%; 
    padding-right:20%; 
    z-index:10 
} 

.navbar-inner { 
    background:#11CFD9; 
    position:fixed; 
    font-family:"Oswald"; 
    top:0; 
    left:-5px; 
    right:-5px; 
    background-color:#11CFD9; 
    font-size:x-large; 
    text-align:center; 
    display:block; 
    padding-top:30px; 
    padding-bottom:30px; 
    padding-left:5%; 
    padding-right:20%; 
    z-index:10 
} 

.navbar .nav>li>a { 
    float:none; 
    padding:10px 15px; 
    color:#000!important; 
    text-decoration:none; 
    text-shadow:0 0 0 #fff!important 
} 

.nav > li > a { 
    display:block; 
    color:#000!important 
} 

a { 
    color:#08c; 
    text-decoration:none 
} 

.navbar .nav > .active > a,.navbar .nav > .active > a:hover { 
    color:#fff; 
    height:auto; 
    text-decoration:none; 
    background-color:#11CFD9; 
    -webkit-box-shadow:inset 0 0 0; 
    -moz-box-shadow:inset 0 0 0; 
    box-shadow:inset 0 0 0 
} 

ul.nav a:hover { 
    color:#fff!important; 
    background:#1CDBE6 
} 

.box-container .basket-dropdown { 
    padding:20px; 
    margin-left:-145px; 
    margin-top:2px 
} 

.basket-dropdown .checkout { 
    float:right 
} 

.checkout { 
    z-index:9999; 
    font-family:Oswald; 
    font-weight:300 
} 

.row { 
    margin-left:20px; 
    margin-right:20px 
} 

.box-container .checkout { 
    width:98%!important; 
    float:none!important 
} 

.span11 { 
    width:98%; 
    float:none!important 
} 

.box { 
    background:url(); 
    border:0!important; 
    margin-top:130px; 
    position:relative; 
    padding-right:25px; 
    padding-left:25px; 
    width:100% 
} 

.box-container { 
    font-family:Oswald; 
    font-weight:300; 
    margin-right:5px; 
    margin-left:5px 
} 

.box-container .checkout { 
    width:90%; 
    position:relative; 
    float:left; 
    z-index:0; 
    top:0 
} 

.box-container .header { 
    background-image:url(http://i.imgur.com/PzVJZ4V.png); 
    background-color:#fff; 
    border-top-left-radius:1px; 
    border-top-right-radius:1px; 
    -webkit-border-radius-topright:5px; 
    -webkit-border-radius-topleft:5px; 
    -border-radius-topright:5px; 
    -border-radius-topleft:5px; 
    height:33px; 
    text-align:left; 
    text-transform:uppercase; 
    font-size:25px; 
    padding-top:20px; 
    font-family:Oswald; 
    font-weight:300; 
    border-radius:5px 5px 0 0 
} 

.box-container .content { 
    opacity:.9!important 
} 

.span7 { 
    width:60%; 
    margin-left:20px; 
    border-radius:10px 
} 

.span4 { 
    width:25%; 
    height:15% 
} 

.clear-fix { 
    z-index:9999; 
    top:0; 
    opacity:.9 
} 

.logo { 
    background:url(); 
    background-repeat:no-repeat; 
    float:none; 
    z-index:9999; 
    position:fixed; 
    left:25%; 
    height:0!important; 
    width:0!important 
} 

.logo span { 
    opacity:0; 
    color:#fff; 
    font-size:0 
} 

em { 
    color:red; 
    font-weight:700; 
    font-style:normal 
} 

/*Spinny Heads*/ 
.image { 
    display:block; 
    text-decoration:none; 
    -webkit-transition:.5s all ease-in-out; 
    -moz-transition:.5s all ease-in-out; 
    -o-transition:.5s all ease-in-out; 
    transition:.5s all ease-in-out 
} 

.image:hover { 
    -webkit-transform:rotate(720deg) scale(1.5); 
    -ms-transform:rotate(720deg) scale(1.5); 
    -moz-transform:rotate(720deg) scale(1.5); 
    -o-transform:rotate(720deg) scale(1.5); 
    transform:rotate(720deg) scale(1.5) 
} 

.footer { 
    height:60px; 
    border-top:1px solid #000; 
    background:orange; 
    bottom:0; 
    margin-right:0; 
    margin-bottom:0; 
    width:100%; 
    z-index:99999; 
    position:static; 
    font-family:"Oswald"; 
    left:-5px; 
    right:-5px; 
    background-color:#11CFD9; 
    color:#000!important; 
    box-shadow:0 2px 2px 0 rgba(50,50,50,0.24); 
    text-align:center; 
    display:block 
} 

Answer 1

браузер решает, какой CSS селектор применяется над другими в зависимости от его веса . Обычно вы найдете термин Специфика CSS, описывающая это.

В вашем случае .nav > li > a имеет очень низкий вес и поэтому переопределяется вашей таблицей стилей по умолчанию. Если вы удаляете символы > в этих селекторах, все равно должен быть тот же результат - так как нет вложенных элементов a в панели навигации, которую вы хотите исключить, не так ли?

Селектор .nav li a имеет больший вес и поэтому должен иметь преимущество. Если это все еще не помогает, включите css-селектор из вашего файла css Buycraft, который переопределяет ваш селектор. Поэтому мы можем посмотреть на удельный вес обоих в сравнении.

Посмотрите на пример this answer here.

---

Немного предыстории: CSS-специфичность существует для того, чтобы сделать такие вещи, как следующее возможно: Представьте себе, что ссылки на ваш сайт всегда должен отображаться синим цветом. Но в вашей навигации они должны быть черными.

a { color: blue; } 
.navbar a { color: black; } 

Поскольку второй селектор является более специфичным, он имеет приоритет над общими ссылками, является-синим селектор и ваши навигационные ссылки черные.