css - th :first-child not working

标签 css border css-selectors

<分区>

我有这个 CSS:

    .table1 thead th:first-child{

  -webkit-border-bottom-right-radius:8px;
    -webkit-border-top-right-radius:8px;
    -moz-border-radius:8px 0px 8px 0px;
    border-bottom-right-radius:8px;
    border-top-right-radius:8px;
}
.table1 thead th:last-child{

  -webkit-border-bottom-left-radius:8px;
    -webkit-border-top-left-radius:8px;
    -moz-border-radius:0px 8px 0px 8px;
    border-bottom-left-radius:8px;
    border-top-left-radius:8px;
}

出于某种原因，最后一个 child 的边界，但第一个没有 知道为什么吗？ (在 chrome 中检查)

这是完整的 css:

/* CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body{
 width:730px;
}
.wrapper {  
    width: 100%;  
    position: relative;  
    margin-bottom: 30px;  
    text-align:center;
}  




#settings_link{
background: url(../images/settings.png) no-repeat center bottom; 
position:relative;
}
#profile_link{
background: url(../images/profile.png) no-repeat center bottom; 
position:relative;
}
#search_link{
background: url(../images/search.png) no-repeat center bottom; 
position:relative;
}
#add_link{
background: url(../images/add.png) no-repeat center bottom; 
position:relative;
}
#notification_link{
background: url(../images/notification.png) no-repeat center bottom; 
position:relative;
}
.profile_menu_item {
 height:50px;
 width: 70px;
 text-align:center;
 position: relative;
 padding: 2em 1.5em;
 color: rgba(0,0,0, .8);
 text-shadow: 0 1px 0 #fff;
}

.profile_menu_ul li{
list-style-type: none;
float:right;
text-align:center;
padding : 10px;
}
.profile_menu_ul ul {
text-align:center;
 width: 99%;
 margin: auto;
 display: inline-block;
}
.profile_main_ul li {
list-style-type: none;
text-align:center;
padding : 10px;
}
.profile_menu_ul {
text-align:center;
}
.profile_menu_item  a:hover{
text-decoration:none;
}
.profile_menu_item  a{

font:normal 20px Arial;
color: #254F73 ;
text-shadow: 0px 2px 3px #555;
text-decoration:none;
position:absolute; 
width:100%;
height:100%;
top: 20px;
left: 0;
text-align:center;
}
.profile_menu_item  span{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
}
.profile_menu_item :hover{
text-shadow: 0px 5px 6px #555;
 -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 cursor:pointer;
}
.profile_menu_item:before, .profile_menu_item:after
{
  z-index: -1;
  position: absolute;
  content: "";
  max-width:300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.profile_menu_item:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;

}


/* End of links menu */
label {
  float:right;
  width:15%;
  margin-left:0.3em;
  padding-top:0.2em;
  text-align:right;
  direction:rtl;

}

/* search table*/
table.table1{
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4em;
    font-style: normal;
    direction:rtl;


}
.table1 thead th{
    padding:15px;

    color:#fff;
    text-shadow:2px 2px 2px #000;

background: #191970; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE5MTk3MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYTM0YmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #191970 0%, #207cca 47%, #2989d8 52%, #2a34ba 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#191970), color-stop(47%,#207cca), color-stop(52%,#2989d8), color-stop(100%,#2a34ba)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #191970 0%,#207cca 47%,#2989d8 52%,#2a34ba 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #191970 0%,#207cca 47%,#2989d8 52%,#2a34ba 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #191970 0%,#207cca 47%,#2989d8 52%,#2a34ba 100%); /* IE10+ */
background: linear-gradient(top,  #191970 0%,#207cca 47%,#2989d8 52%,#2a34ba 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191970', endColorstr='#2a34ba',GradientType=0 ); /* IE6-8 */
}
.table1 thead th:first-child{

  -webkit-border-bottom-right-radius:8px;
    -webkit-border-top-right-radius:8px;
    -moz-border-radius:8px 0px 8px 0px;
    border-bottom-right-radius:8px;
    border-top-right-radius:8px;
    background-color:red;
}
.table1 thead th:last-child{

  -webkit-border-bottom-left-radius:8px;
    -webkit-border-top-left-radius:8px;
    -moz-border-radius:0px 8px 0px 8px;
    border-bottom-left-radius:8px;
    border-top-left-radius:8px;
}
.table1 thead th:empty{
    background:transparent;
    border:none;
}
.table1 tfoot td{
    color: #9CD009;
    font-size:32px;
    text-align:center;
    padding:10px 0px;
    text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
    color:#666;
}
.table1 tbody td{
    padding:10px;
    text-align:center;
    background-color:#DEF3CA;
    border: 2px solid #E7EFE0;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

这是 HTML :

<table class="table1">
    <thead>
        <tr>
            <th></th>
            <th scope="col" abbr="Starter">שם המציע</th>
            <th scope="col" abbr="Medium">כותרת</th>
            <th scope="col" abbr="Business">סוג משרה</th>
            <th scope="col" abbr="Deluxe">משכורת</th>
        </tr>
    </thead>
    <tbody>
        <tr>

            <td>512 MB</td>
            <td>1 GB</td>
            <td>2 GB</td>
            <td>4 GB</td>
        </tr>
        <tr>

            <td>50 GB</td>
            <td>100 GB</td>
            <td>150 GB</td>
            <td>Unlimited</td>
        </tr>
        <tr>

            <td>Unlimited</td>
            <td>Unlimited</td>
            <td>Unlimited</td>
            <td>Unlimited</td>
        </tr>
        <tr>

            <td>19.90 $</td>
            <td>12.90 $</td>
            <td>free</td>
            <td>free</td>
        </tr>

    </tbody>
</table>

正如有人提到的那样，必须有一些干扰，我已经把它全部说出来了。 有人知道吗？

编辑: 发现了问题。 在 HTML 中有一个空元素。

最佳答案

您的代码中一定有其他问题:

我试过了，很有效

http://jsbin.com/utusiz/10/edit

编辑

你在开玩笑吗？

那里有空标签!

enter image description here

enter image description here

关于css - th :first-child not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9141460/

上一篇：asp.net - 未应用外部文件中的 CSS

下一篇：asp.net - 将 background-url css 属性设置为 .net 中的内存图像

相关文章：

html - 边框底部小于文本

javascript - 有没有办法在 HTML 中搜索以某个字符串开头的属性

html - CSS 选择器中的类名区分大小写吗？

css - 在 CSS 中组合伪类？

css - 如何从 SASS 生成常规 CSS 文件？

css - 如何在 Bootstrap 3 中使用语义标记创建多行？

html - Chrome 边框下方的空白区域

border - CSS 缩放边框图像

html - 什么是cufon和canvas以及如何覆盖它们

html - 为什么只是将 css 样式复制为新样式并引用新样式会导致图像不显示

©2024 IT工具网  联系我们