Примените CSS ко всем элементам внутри тега TH
Я хотел бы проверить, есть ли какой-нибудь самый простой способ выполнить приведенную ниже задачу.
Я хочу применить размер шрифта: 10 пикселей к тегу TD таблицы, но он также должен переопределить все элементы внутри размера шрифта TH на 10 пикселей, независимо от того, какой тег у него есть, или или или что-то еще.
Ваша помощь будет оценена по достоинству Пожалуйста, проверьте код ниже для справки
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.table_tr td {
font-size: 12px;
}
.table_span span {
font-size: 14px;
}
.table_div div {
font-size: 18px;
}<!DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>HTML Table with Inputs, Span, and Div</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.table_tr td {
font-size: 12px;
}
.table_span span {
font-size: 14px;
}
.table_div div {
font-size: 18px;
}
</style>
</head>
<body>
<table>
<head>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<body>
<tr class = "table_tr">
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
<tr>
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
<tr>
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
</tbody>
</table>Какой еще тег вы хотите использовать внутри этого тега?
@Leothelion - вопрос в том, что я хочу применить CSS к тегу TD, который также должен применяться к внутренним DIV и SPAN или, если присутствуют какие-либо другие теги, по сути, он должен переопределить стиль дочерних элементов на основе TD
В своем вопросе вы сказали под th, а теперь говорите td, но ребенок, о котором вы говорите, находится под тегом body? извините, но вы хотите изменить размер шрифта всех тегов в разделе body или td?
Обновил аск с ТД, sorry but you want to change the font size of all the tag under body section or td section? - Да
Тогда просто сделай body { font-size: 12px; }?
На самом деле неясно, что вы на самом деле хотите знать, пожалуйста, отредактируйте вопрос и уточните его там. Если вы хотите перезаписать размер шрифта для любых дочерних элементов внутри TH, для которых может быть установлен другой размер шрифта, тогда вам может понадобиться что-то вроде th * { font-size: 12px !important; }.
th * { размер шрифта: 12 пикселей ! важно; } это не работает, если внутри тега span или div указан разный размер шрифта
th или td это действительно важно, вся суть в том, что внутри th/td есть какие-либо теги span, div или любые другие теги, которые имеют разные размеры шрифта, он должен принимать только размер шрифта th/td, а не дочерние элементы .
Почему он отмечен как -1
Хорошо, я понял вашу точку зрения. Пожалуйста, проверьте эту скрипку. Это то, что вы хотите? jsfiddle.net/h1jbuqyv
@Leothelion Огромное спасибо, да, это то, что я ищу... К сожалению, я не могу проголосовать за это, но ты сделал мой день
Хорошо. Если это поможет вам, я публикую ответ в качестве ответа, тогда вы можете принять это, чтобы это могло помочь другому пользователю с той же проблемой.
«th * {font-size: 12px !important; } это не работает, если внутри th span или тега div указан разный размер шрифта» — о чем вы говорите? Замена body * в предложенном Лео решении на th *, td * дает тот же результат. (Да, конечно, вам нужно добавить часть для td, если вы хотите, чтобы она работала и в них, а не только внутри th.)
@CBroe, я думаю, она хочет изменить цвет шрифта всех тегов под телом, таких как div,span,td,th, поэтому я поставил это вместо того, чтобы помещать все CSS с разными тегами.
Ответы 2
Прежде всего, есть опечатка в открывающем теге. Во-вторых, если вы хотите применить определенный CSS ко всем дочерним элементам вашей скрипты/кода, вы можете просто использовать этот CSS на body *. так
body *{
font-size:10px !important;
}
Вы также можете проверить рабочий код здесь, где размер шрифта применяется ко всем тегам, таким как td,th,div,span и т.д.
Кодепан:
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.table_tr td {
font-size: 12px;
}
.table_span span {
font-size: 14px;
}
.table_div div {
font-size: 18px;
}
body *{
font-size:10px !important;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<body>
<tr class = "table_tr">
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
<tr>
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
<tr>
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
</tbody>Как уже отмечалось ранее, у вашего HTML и CSS есть несколько проблем.
Убедитесь, что все элементы правильно закрыты/вложены:
Нравится <thead> но также <tbody>
Прежде чем переопределить какие-либо правила стиля, вам также следует проверить более общие правила (наследуемые дочерними/потомочными элементами) — возможно, вы можете удалить некоторые:
.table_span span {
font-size: 14px;
}
.table_div div {
font-size: 18px;
}
ничего не выбирайте – эти правила переводятся следующим образом:
найдите элемент с классом .table_span и выберите внутри дочерний элемент span. Но используемые элементы span имеют этот класс. Итак, должно быть:
.table_span{
font-size: 14px;
}
или (не рекомендуется – поскольку излишне конкретно)
span.table_span{
font-size: 14px;
}
Судя по вашему описанию, вы хотите, чтобы размер шрифта таблицы был нормализован до 10 пикселей.
Поэтому просто удалите эти правила и установите общий размер шрифта для вашей таблицы.
/* general rule for all tables */
table{
border-collapse: collapse;
width: 100%;
font-size: 10px;
line-height:1.2em;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
/* table cell child/decendant elements */
th *,
td *{
font-family:inherit;
font-size: inherit;
}<table class = "table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class = "table_tr">
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
<tr>
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
<tr>
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
</tbody>
</table>Эмпирическое правило: определите свои стили от общего правила до исключения.
Если вам нужно слишком много переопределяющих правил (т. е. исключений, требующих !important или вложенных селекторов), вам следует подумать об упрощении основных правил.
На вашей странице также может быть множество других таблиц или элементов, поэтому будьте осторожны с правилами глобального стиля.
Если вы не уверены, могут ли вам понадобиться некоторые стили, просто отключите их с помощью комментариев, например:
body {
font-family: Georgia;
font-size: 18px, line-height:1.4em;
}
/* general rule for all tables */
table {
font-family: sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 10px;
line-height: 1.2em;
}
th,
td {
font-family: inherit;
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
/* table cell child/decendant elements */
th *,
td * {
font-family: inherit;
font-size: inherit;
}
/* we don't need these class selctor - do we? */
/*
.table_tr td{
font-size: 12px;
}
.table_span {
font-size: 14px;
}
.table_div {
font-size: 18px;
}
*/<h1>Font size not inherited to table</h1>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
<p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
<table class = "table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class = "table_tr">
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
<tr>
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
<tr>
<td><input type = "text" placeholder = "Enter name"></td>
<td><input type = "email" placeholder = "Enter email"></td>
<td>
<span class = "table_span">Some text</span>
<div class = "table_div">Some content</div>
</td>
</tr>
</tbody>
</table>
В вашем коде отсутствует открывающий тег, поэтому проверьте эту скрипту. jsfiddle.net/cx7tmyvj ты этого хочешь?