Zasłanianie atrybutów z class przez style

Mam wygląd mocno określony przez class (pracuje zewnętrzny plik CSS) elementy (dla uściślenia: elementy menu, jakaś ich seria)
<a class="submenu" ...

ale chciałbym w jednym z nich, nie pozbawiając go klasy CSS, wymusić np kolor (oczywiście klasa określa jakiś kolor)
<a class="submenu" style="color:green" ...

Ale widocznie myślę jak programista, a nie jak frontman, to tak nie działa

Na ile się orientuję, atrybut HTML color to jest bardzo stare i deprecated
<a class="submenu" color="green" ...

Miałem mocny romans z CSS i Erikiem Meyerem, ale dość dawno temu.

Najlepszym sposobem byłoby wykorzystanie zmiennych CSS, żeby móc zmienić wygląd bez modyfikacji html'a

https://developer.mozilla.org/pl/docs/Web/CSS/Using_CSS_custom_properties

.link {
  font-size: var(--link-font-size, 20px);
  color: var(--link-color, blue);
}

.navigation {
  --link-font-size: 15px;
  --link-color: green;
}

.content {
  --link-font-size: 30px;
  --link-color: yellow;
}

<a class="link" href="#">
  Niebieski link z właściwością font-size ustawioną na 20px;
</a>

<nav class="navigation">
  <a class="link" href="#">
    Zielony link z właściwością font-size ustawioną na 15px;
  </a>
</nav>

<section class="content">
  <a class="link" href="#">
    Żółty link z właściwością font-size ustawioną na 30px;
  </a>
</section>

ZrobieDobrze napisał(a):

ale chciałbym w jednym z nich, nie pozbawiając go klasy CSS, wymusić np kolor (oczywiście klasa określa jakiś kolor)
<a class="submenu" style="color:green" ...

To powinno działać, pod warunkiem że klasa nie ustala color z !important.

Ogólnie, jak style są ustalane:

1. Style z !important biorą górę nad wszystkim
2. Potem style ustalone z atrybutem style=""
3. Potem style ustalone poprzez styl na id, tzn. #submenu
4. Potem style ustalone przez klasy, tzn. .submenu
5. Jeśli są równe, to brane jest pod uwagę "specificity" klas, np styl div.submenu weźmie górę nad .submenu, bo jest bardziej specific.
6. Jeśli nadal są równe, to brana jest pod uwagę kolejność dodania styli w arkuszu.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Zrób sobie drugą klasę jak

.submenu.submenu--green {
  color: green;
}

wtedy dajesz:

<a class="submenu submenu--green"> 

i bangla

Riddle napisał(a):

ZrobieDobrze napisał(a):

ale chciałbym w jednym z nich, nie pozbawiając go klasy CSS, wymusić np kolor (oczywiście klasa określa jakiś kolor)
<a class="submenu" style="color:green" ...

To powinno działać, pod warunkiem że klasa nie ustala color z !important.

Ogólnie, jak style są ustalane:

1. Style z !important biorą górę nad wszystkim
2. Potem style ustalone z atrybutem style=""
3. Potem style ustalone poprzez styl na id, tzn. #submenu
4. Potem style ustalone przez klasy, tzn. .submenu
5. Jeśli są równe, to brane jest pod uwagę "specificity" klas, np styl div.submenu weźmie górę nad .submenu, bo jest bardziej specific.
6. Jeśli nadal są równe, to brana jest pod uwagę kolejność dodania styli w arkuszu.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Nie ma ani jednego (jak na razie) !important nigdzie w projekcie.
Znaczne fragmenty tego sa moje własne, i bardzo poprawnie edukacyjnie sobie szedłem Meyerem, bez nadmiaru, małymi kroczkami

Wakacje z duchami odc 2.

Co mi daje do myślenia, to kod jest od pierwszego załadowania z serwera

<li class="submenu topnav-right"  ><a wicket:id="loginPlease" style="background-color:gray;" href="#" id="loginPlease7">Zaloguj</a></li>

Natomiast w/w szarość tła się ujawnia po kliknięciu. Wiem, że dokładnie to pracuje, bo skutkuje tak samo inny wpisany tam kolor (magenta, whatever)
Broni tego jakaś pseudoklasa ? Jakieś przeczenie visited (jakkolwiek by się nazywało, skądinąd jak sie nazywa ) ???
Skądinąd prawie nie ma visited, a jednak odwiedzone linki sie nie zmieniają (fakt, to Wicket, więc w 90% kroczy numer wersji w url)

Nie mam na temat a wiele grzechów, ot:

div#nav li a {
	display: block;
	padding: 0.25em 0 0.25em 0.5em;
	text-decoration: none;
	width: 8.5em;
}

Jeszcze inna przyczyna awarii, nie istniejący obrazek??? Zaprzestaliśmy maksymalnego bajerowania, ale ten styl został

div#nav li.submenu li.submenu {
	background: url(/images/submenu.gif) 95% 50% no-repeat;
}

(oczywiście całe menu jest 100% wolne od JS, tylko HTML+CSS)

WTF
Mówimy partia a myślimy Lenin.

W tym przykładzie w stosunku do postu powyżej przywróciłem inny etap eksperymentu, stylowanie nadrzędnego, a nie <a>. Zachowanie na front-endzie dokładnie takie same.

Źródło strony (czas przed kliknieciem)
<li style="background-color:magenta;" class="submenu topnav-right"><a wicket:id="loginPlease" href="#" id="loginPlease1">Zaloguj</a></li>

Ale inspektor Firefox widzi puste style="" - co by było zbieżne z działaniem strony.
Charakterystyczne jest, że widzi sam fakt style= , to jest odmiennie o wiersza powyżej gdzie nie było takiej ingerencji - tyle że pazurki ze stylem są puste.

Po kliknieciu w link, już w inspektorze już widać magentę (i w realu też)

WTF 2

Przegladarka Edge, inspektor widzi magentę, ale przeglądarka tego nie realizuje

Na chrome generalnie tak samo: inspektor widzi, ale nie jest skuteczne

Zachowanie na wszystkich trzech takie samo: magenta skutkuje po kliknieciu, choć ten fragment HTMLa w najmniejszym stopniu się nie zmienia.
Regularnie. Przyjmijmy, u mnie jakiś błąd, ale na czym polega?