css td 问题

html-css013

css td 问题,第1张

没什么区别,TD一定是TABLE的子元素,所以即使不在CSS声明中标出父子关系,也改变不了这个事实.

但如果父对象是类或ID就有意义了.比如

table.table td{}

#table td{}

.td{}class为“td”的元素。

<div class="td"></div>

#td{} id为“td”的元素。

<div id="td"></div>

td{} 指td标签。

<td>你好，世界</td>

直接使用css的标签选择器就可以实现

td input[type='text'] {.../*设置需要的样式*/}

举个例子：

创建Html元素

<table>

<tr>

<td>name</td>

<td><input type="text"></td>

<td>sex</td>

<td><input type="radio" name="sex" checked>男<input type="radio" name="sex">女</td>

</tr>

<tr>

<td>tel.</td>

<td><input type="text"></td>

<td>addr.</td>

<td><input type="text"></td>

</tr>

</table

设置css样式

table{border-collapse: collapse}

td{border:1px solid #cccpadding:5px}

/*设置单元格中文本框的样式*/

td input[type='text']{border:1px solid greenborder-radius:3pxheight:30px}

观察显示效果