почему стиль не применяется к тексту в html

Question

Я применил стиль к элементу. Но так или иначе это применяется для первой перезагрузки. Когда go на другую страницу и возвращается тот же стиль, который не применяется.

Для первой загрузки страницы выше стиль был применен к элементу. Когда я захожу на ту же страницу после посещения другой страницы, указанный выше стиль не применяется к тому же элементу.

Я не понимаю, что пошло не так.

Я могу видеть стиль для элемента, но не отражается в интерфейсе пользователя.

что пошло не так. Пожалуйста, предложите.

мои HTML и CSS ниже

<div style=display:block;width:100%;height:350px;overflow:scroll;overflow-x:hidden;>
    <div class=abc>
        <div style=padding-top:10px;font-size:12px;font-family:SegoeUI;margin-left:10px;width:302px;height:38px;padding-top:8px>Text 1
        </div>
        <table style=margin-left:10px;margin-top:30px;>
            <tbody>
            <tr style=width:360px;height:23px;padding-top:9px>
                <td style=font-size:12px; font-family:Segoe UI Semibold>Header 1</td>
                <td style=width:15px;background:#FDFFFF;></td>
                <td style=font-size:12px;font-family:Segoe UI Semibold>Header 2</td>
            </tr>
            <tr style=width:360px;height:23px>
                <td style=padding-left:10px;font-size:12px;font-family:SegoeUI;background:#EAFBFB;>Text 2</td>
                <td style=width:15px;background:#FDFFFF;></td>
                <td style=font-size:12px;font-family:Segoe UI;>Text 3</td>
            </tr>
            <tr style=Height:4px;background:white></tr>
            <tr style=Height:4px;background:white></tr>
            <tr style=width:360px;height:56px>
                <td style=padding-left:10px;font-size:12px;font-family:SegoeUI;background:#EAFBFB;>Text 4</td>
                <td style=width:15px;background:#FDFFFF;></td>
                <td style=width:177px;height:51px;font-size:12px;font-family:Segoe UI>Text 5</td>
            </tr>
            <tr style=Height:4px;background:white></tr>
            <tr style=width:360px;height:45px>
                <td style=padding-left:10px;font-size:12px;font-family:SegoeUI;background:#EAFBFB;width:134px;height:32px>
                    Text 6
                </td>
                <td style=width:15px;background:#FDFFFF;></td>
                <td style=width:166px;height:35px;font-size:12px;font-family:Segoe UI;width:166px;height:35px>Text 7
                </td>
            </tr>
            <tr style=Height:4px;background:white></tr>
            <tr style=Height:4px;background:white></tr>
            <tr style=width:360px;height:44.29px>
                <td style=padding-left:10px;font-size:12px;font-family:SegoeUI;background:#EAFBFB;>Text 8</td>
                <td style=width:15px;background:#FDFFFF;></td>
                <td style=height:33.84px;width:173px;font-size:12px;font-family:Segoe UI>Text 9</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

пробовал !important, но все еще не работает.

Answer 1

Попробуйте использовать правильный формат для встроенных правил CSS. EX: style = "font-size: 10px, font-family: 'Segoe UI'"

<div style="display:block;width:100%;height:350px;overflow:scroll;overflow-x:hidden;">
	<div class=abc><div style="padding-top:10px;font-size:12px;font-family:'Segoe UI';margin-left:10px;width:302px;height:38px;padding-top:8px">Text 1</div>
	<table style="margin-left:10px;margin-top:30px;">
		<tbody>
			<tr style="width:360px;height:23px;padding-top:9px">
				<td style="font-size:12px; font-family:'Segoe UI Semibold';">Header 1</td>
				<td style=width:15px;background:#FDFFFF;></td>
				<td style="font-size:12px;font-family:'Segoe UI Semibold'">Header 2</td>
			</tr>
			<tr style=width:360px;height:23px>
				<td style="padding-left:10px;font-size:12px;font-family:'SegoeUI';background:#EAFBFB;">Text 2</td>
				<td style=width:15px;background:#FDFFFF;></td>
				<td style="font-size:12px;font-family:'Segoe UI';">Text 3</td>
			</tr>
			<tr style=Height:4px;background:white></tr>
			<tr style=Height:4px;background:white></tr>
			<tr style=width:360px;height:56px>
				<td style="padding-left:10px;font-size:12px;font-family:'SegoeUI';background:#EAFBFB;">Text 4</td>
				<td style=width:15px;background:#FDFFFF;></td>
				<td style="width:177px;height:51px;font-size:12px;font-family:'Segoe UI';">Text 5</td>
			</tr>
			<tr style=Height:4px;background:white></tr>
			<tr style=width:360px;height:45px>
				<td style="padding-left:10px;font-size:12px;font-family:'SegoeUI';background:#EAFBFB;width:134px;height:32px">Text 6</td>
				<td style=width:15px;background:#FDFFFF;></td>
				<td style="width:166px;height:35px;font-size:12px;font-family:'Segoe UI';width:166px;height:35px">Text 7</td>
			</tr>
			<tr style=Height:4px;background:white></tr>
			<tr style=Height:4px;background:white></tr>
			<tr style=width:360px;height:44.29px>
				<td style="padding-left:10px;font-size:12px;font-family:'SegoeUI';background:#EAFBFB;">Text 8</td>
				<td style=width:15px;background:#FDFFFF;></td>
				<td style="height:33.84px;width:173px;font-size:12px;font-family:'Segoe UI';">Text 9</td>
			</tr>
		</tbody>
	</table>
</div>
</div>

Answer 2

Это потому, что применяется какой-то другой css. Вы должны сказать как ! важный в конце css.

.custom-class{
    font-size: 22px !important;
}