html - 输入CSS不起作用

Question

我使用 JSF 2.0 创建了一个页面。以下是我所拥有的

<h:dataTable id="patentDetailsList" value="#{PersonalInformationDataBean.getAllPatentInfo()}"
             var="patentInfo" bgcolor="#F1F1F1" border="8" cellpadding="5"
             cellspacing="3" width="100%">
    <f:facet name="header">
        <h:outputText value="Patent Information" />
    </f:facet>

    <h:column>
        <f:facet name="header">
            <h:outputText value="ID" />
        </f:facet>
        <h:outputText value="#{patentInfo.personalInfoId}"/>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Name" />
        </f:facet>
        <h:commandLink value="#{patentInfo.fullName}" action="#{PersonalInformationDataBean.takeMeToAnotherPage('patentss')}">
            <f:setPropertyActionListener target="#{PersonalInformationDataBean.personalInfoId}" value="#{patentInfo.personalInfoId}" />
        </h:commandLink>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Email ID" />
        </f:facet>
        <h:outputText value="#{patentInfo.emailID}"/>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Mobile Number" />
        </f:facet>
        <h:outputText value="#{patentInfo.mobileNumber}"/>
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Action" />
        </f:facet>
        <h:commandButton value="Edit" action="#{PersonalInformationDataBean.setEditPersonalInfo()}" onclick="return confirm('Are you sure you want to edit?')">
            <f:setPropertyActionListener target="#{PersonalInformationDataBean.personalInfoId}" value="#{patentInfo.personalInfoId}" />
        </h:commandButton>
        <h:commandButton value="Delete" action="#{PersonalInformationDataBean.deletePersonalInfo()}" onclick="return confirm('Are you sure you want to delete?')">
            <f:setPropertyActionListener target="#{PersonalInformationDataBean.personalInfoId}" value="#{patentInfo.personalInfoId}" />
        </h:commandButton>
    </h:column>
</dataTable>

在CSS中，我有

body {
    font-family: verdana, 'Times New Roman';
    font-size: 15px;
}

a {
    font-family: verdana, 'Times New Roman';
    font-size: 15px;
}

input {
    font-family: verdana, 'Times New Roman';
    font-size: 15px;
}

令人疯狂的是，字体和大小被应用于所有文本和链接除了按钮。编辑和删除按钮不会像其他按钮一样出现。

知道我做错了什么吗？

我知道使用styleClass我可以做到这一点，但是如果我使用styleClass我会这样做必须在每个地方都写，这是更多的工作。

更新 1

生成的 HTML 为

<table id="patentDetailsList" bgcolor="#F1F1F1" border="8" cellpadding="5" cellspacing="3" width="100%">
    <thead>
    <tr><th colspan="5" scope="colgroup">Patent Information</th></tr>
    <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Email ID</th>
        <th scope="col">Mobile Number</th>
        <th scope="col">Action</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td><a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt65'),{'patentDetailsList:0:j_idt71':'patentDetailsList:0:j_idt71'},'');return false">Fahim Parkar</a></td>
        <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85f5e4f7eee4f7e3e4edece8b7b7c5fce4edeaeaabe6eaabeceb" rel="noreferrer noopener nofollow">[email protected]</a></td>
        <td>66991234</td>
        <td><input type="submit" name="patentDetailsList:0:j_idt75" value="Edit" onclick="return confirm('Are you sure you want to edit?')" /><input type="submit" name="patentDetailsList:0:j_idt76" value="Delete" onclick="return confirm('Are you sure you want to delete?')" /></td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt65'),{'patentDetailsList:1:j_idt71':'patentDetailsList:1:j_idt71'},'');return false">Fahad Parkar</a></td>
        <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e898899a83899a8e8980898cdfa88f85898184c68b8785" rel="noreferrer noopener nofollow">[email protected]</a></td>
        <td>88888888</td>
        <td><input type="submit" name="patentDetailsList:1:j_idt75" value="Edit" onclick="return confirm('Are you sure you want to edit?')" /><input type="submit" name="patentDetailsList:1:j_idt76" value="Delete" onclick="return confirm('Are you sure you want to delete?')" /></td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt65'),{'patentDetailsList:2:j_idt71':'patentDetailsList:2:j_idt71'},'');return false">Patent First</a></td>
        <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a6a7b6e7f746e5a637b72757534797577" rel="noreferrer noopener nofollow">[email protected]</a></td>
        <td>66991234</td>
        <td><input type="submit" name="patentDetailsList:2:j_idt75" value="Edit" onclick="return confirm('Are you sure you want to edit?')" /><input type="submit" name="patentDetailsList:2:j_idt76" value="Delete" onclick="return confirm('Are you sure you want to delete?')" /></td>
    </tr>
    </tbody>
</table>

Answer 1

试试这个

input[type=submit] {
/*Your CSS Goes Here*/
}

/*For text+submit*/
input[type=submit], input[type=text] {
/*Your CSS Goes Here*/
}

/*For Textarea*/

textarea {  /*For All Text Area*/
/* CSS Goes Here */
}

textarea.only_one_textarea {  /*This will apply to thextarea with class .only_one_textarea. See ref 1*/
/* CSS Goes Here */
}

<!--Ref 1-->
<textarea class="only_one_textarea"></textarea>