如何限制datepicker继承与表相关的CSS？

Question

我有两个与Table相关的CSS文件和一个用于datepicker的CSS。但是，捣蛋鬼正在接受表css的属性。所以我的问题是如何限制datepicker访问表CSS。

Answer 1

In your table file use :not Selector to select all table elements except for de Datepiker tab

exp:

 table:not(.Datepiker) {
    //table style here excep Datepiker
    }
 table:not(.Datepiker) tr {
    //table style here excep Datepiker
    }

  tablestyle.css ------------------ @charset "utf-8"; table:not(.ui-datepicker) { font-family: Arial,sans-serif; font-size: 8pt; border: 1px solid black; border-collapse:collapse; border-spacing:5px; } table:not(.ui-datepicker-calendar) tr:nth-child(odd){ //background:#b8d1f3; background:rgb(233,237,244); } table:not(.ui-datepicker-calendar) tr:nth-child(even){ //background:#dae5f4; background:rgb(211,220,232) } table:not(.ui-datepicker-calendar) th{ //background:#666; background:rgb(92,133,179); color:white; font-weight: bold; text-decoration: underline; } table:not(.ui-datepicker-calendar) td { padding: 5px; font-size: 9pt; border: 1px solid green; } table:not(.ui-datepicker-calendar):hover { //outline: 2px dashed #0090D2;} table:not(.ui-datepicker) input[type='text']{ width:120px; } } tablestyleresponsive.css ---------------------------------- @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ table:not(.ui-datepicker-calendar) thead tr, th { position: absolute; top: -9999px; left: -9999px; } table:not(.ui-datepicker-calendar) tr { border: 1px solid #ccc; } table:not(.ui-datepicker-calendar) td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } table:not(.ui-datepicker-calendar) td:before { position: absolute; //top: 4px; left: 4px; //width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data*/ #Phone td:nth-of-type(1):before { content: "Type"; } #Phone td:nth-of-type(2):before { content: "Country"; } #Phone td:nth-of-type(3):before { content: "Phone"; } #Phone td:nth-of-type(4):before { content: "Preferred"; } #Phone td:nth-of-type(4):before { content: "Add/Delete"; } #Major td:nth-of-type(1):before { content: "Preferred"; } #Major td:nth-of-type(2):before { content: "Major"; } #Major td:nth-of-type(3):before { content: "Concentration"; } #Major td:nth-of-type(4):before { content: "Status"; } #Education thead:nth-of-type(1):before { content: "#Educational Information"; } #Education td:nth-of-type(1):before { content: "School Code"; } #Education td:nth-of-type(2):before { content: "School Name"; } #Education td:nth-of-type(3):before { content: "High school Average"; } #Education td:nth-of-type(4):before { content: "GPA Type"; } #Education td:nth-of-type(5):before { content: "CGPA"; } #Education td:nth-of-type(6):before { content: "Accdemic Level"; } #Education td:nth-of-type(7):before { content: "Degree"; } #Education td:nth-of-type(8):before { content: "Degree Date"; } #Education td:nth-of-type(9):before { content: "Transcript Date"; } #Education td:nth-of-type(10):before { content: "Add/Delete"; } #Test td:nth-of-type(1):before { content: "Preference"; } #Test td:nth-of-type(2):before { content: "Major"; } #Test td:nth-of-type(3):before { content: "Concentration"; } #Test td:nth-of-type(4):before { content: "Status"; } #Test td:nth-of-type(5):before { content: "Add/Delete"; } #Employee td:nth-of-type(1):before { content: "Job_title"; } #Employee td:nth-of-type(2):before { content: "Employer"; } #Employee td:nth-of-type(3):before { content: "From"; } #Employee td:nth-of-type(4):before { content: "To"; } #Employee td:nth-of-type(5):before { content: "Add/Delete"; } #Emergency_Contact td:nth-of-type(1):before { content: "Relationship"; } #Emergency_Contact td:nth-of-type(2):before { content: "First Name"; } #Emergency_Contact td:nth-of-type(3):before { content: "Last Name"; } #Emergency_Contact td:nth-of-type(4):before { content: "Phone"; } #Emergency_Contact td:nth-of-type(5):before { content: "Email Id"; } #Emergency_Contact td:nth-of-type(6):before { content: "Consent"; } #Emergency_Contact td:nth-of-type(7):before { content: "Working/Student"; } #Emergency_Contact td:nth-of-type(8):before { content: "Employee/Student ID"; } #Emergency_Contact td:nth-of-type(9):before { content: "Add/Delete"; } #Personal_document td:nth-of-type(1):before { content: "Attachment type"; } #Personal_document td:nth-of-type(2):before { content: "Attached File"; } #Personal_document td:nth-of-type(3):before { content: "View"; } #Personal_document td:nth-of-type(4):before { content: "Add Attachment"; } #Personal_document td:nth-of-type(5):before { content: "Accepted"; } #Personal_document td:nth-of-type(6):before { content: "Rejection Reason"; } #Accademic_Transcripts td:nth-of-type(1):before { content: "Attached File"; } #Accademic_Transcripts td:nth-of-type(2):before { content: "View"; } #Accademic_Transcripts td:nth-of-type(3):before { content: "Add Attachment"; } #Accademic_Transcripts td:nth-of-type(4):before { content: "Accepted"; } #Accademic_Transcripts td:nth-of-type(5):before { content: "Rejection Reason"; } #Accademic_Transcripts td:nth-of-type(6):before { content: "Add/Delete"; } #Accademic_Documents td:nth-of-type(1):before { content: "Attached File"; } #Accademic_Documents td:nth-of-type(2):before { content: "View"; } #Accademic_Documents td:nth-of-type(3):before { content: "Add Attachment"; } #Accademic_Documents td:nth-of-type(4):before { content: "Accepted"; } #Accademic_Documents td:nth-of-type(5):before { content: "Rejection Reason"; } #Accademic_Documents td:nth-of-type(6):before { content: "Add/Delete"; } #Other_Document td:nth-of-type(1):before { content: "Attached File"; } #Other_Document td:nth-of-type(2):before { content: "View"; } #Other_Document td:nth-of-type(3):before { content: "Add Attachment"; } #Other_Document td:nth-of-type(4):before { content: "Accepted"; } #Other_Document td:nth-of-type(5):before { content: "Rejection Reason"; } #Other_Document td:nth-of-type(6):before { content: "Add/Delete"; } } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { body { padding: 0; margin: 0; width: 320px; } } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { body { //width: 495px; } } #content { width: auto; float: left; } #middle { width: auto; /* Account for margins + border values */ float: left; } #sidebar { width: auto; float: left; } 

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Website</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="CSS/custom_style.css"> <link rel="stylesheet" type="text/css" href="CSS/tableStyle.css"> <link rel="stylesheet" type="text/css" href="CSS/tableStyleResponsive.css"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <!-- Required For date picker --> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <!-- Required For Validation--> <script src="JS/Basic.validation.js"></script> <!-- Required For Table Responsive--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- Date Picker --> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <!-- Date Picker JS And CSS --> <style> #ui-datepicker-div { font-size: 12px; } #datepicker{} </style> <script> $(function() { $("#dob").datepicker({ //showOn: both - datepicker will appear clicking the input box as well as the calendar icon //showOn: button - datepicker will appear only on clicking the calendar icon showOn: 'button', //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png' buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png', buttonImageOnly: true, changeMonth: true, changeYear: true, duration: 'fast', dateFormat: 'dd-mm-yy' }); $("#Issue_date").datepicker({ //showOn: both - datepicker will appear clicking the input box as well as the calendar icon //showOn: button - datepicker will appear only on clicking the calendar icon showOn: 'button', //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png' buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png', buttonImageOnly: true, changeMonth: true, changeYear: true, duration: 'fast', dateFormat: 'dd-mm-yy' }); $("#Passport_expiry_date").datepicker({ //showOn: both - datepicker will appear clicking the input box as well as the calendar icon //showOn: button - datepicker will appear only on clicking the calendar icon showOn: 'button', //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png' buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png', buttonImageOnly: true, changeMonth: true, changeYear: true, duration: 'fast', dateFormat: 'dd-mm-yy' }); }); </script> <!--<script> $(document).ready(function() { $("input.add").live('click', function() { var $tr = $(this).closest('tr'); var $clone = $tr.clone(); $clone.find(':text').val(''); $tr.after($clone); }); $("input.delete").live('click',function(){ if(document.getElementById('phone').getElementsByTagName("tr").length!=3);{ var $tr = $(this).closest('tr'); $tr.remove(); return false; } }); }); </script> --> </head> <!-- Body Started--> <body> <form name="Basicinfo" id="Basicinfo" method="post" action="Basic.html"> <!-- Start Header --> <p><strong>Admission Application - Basic Info</strong></p> <div width="100%" height="5%" name="Applnbr" name="Applnbr">Application Nbr &nbsp;&nbsp;&nbsp;<span id="Application_Id">#NEW</span> <input type="hidden" name="Appnbr" id="Appnbr" value=""/> </div> <!-- End Header--> <!-- Strat of First Div--> <div class="columnsContainer"> <!-- Left Div Start--> <!-- Other Information Field Starts--> <div class="leftColumn"> <div> <label id="doblbl" style="margin-left:10px;">Date Of Birth:<label style="margin-left:50px;"></label> <input id="dob" name="dob" type="text" value=""> </label> </div></br> <div> <label id="MMFnamelbl" style="margin-left:10px;">Mother's Maiden Name:</br> <label style="margin-left:10px;">*First name:</label><label style="margin-left:50px;"></label> <input id="MMFname" name="MMFname" type="text" value="" style="margin-left:10px;" > </label> </div></br> <div> <label id="MMLnamelbl" style="margin-left:10px;">*Last name:<label style="margin-left:50px;"></label> <input id="MMLname" name="MMLname" type="text" value="" style="margin-left:10px;" > </label> </div></br> <div> <label id="passport_numberlbl" style="margin-left:10px;">*Passport Number:<label style="margin-left:10px;"></label> <input id="passport_number" name="passport_number" type="text" value="" style="margin-left:10px;" > </label> </div></br> <div> <label id="Place_of_Issuelbl" style="margin-left:10px;">*Place of issue:<label style="margin-left:30px;"></label> <input id="Place_of_Issue" name="Place_of_Issue" type="text" value="" style="margin-left:10px;" > </label> </div></br> <div> <label id="Issue_datelbl" style="margin-left:10px;">*Issue Date:<label style="margin-left:50px;"></label> <input id="Issue_date" name="Issue_date" type="text" value="" style="margin-left:10px;margin-top:10px;"> </label> </div></br> <div> <label id="Passport_expiry_datelbl" style="margin-left:10px;">*Expiry:<label style="margin-left:70px;"></label> <input id="Passport_expiry_date" name="Passport_expiry_date" type="text" value="" style="margin-left:10px;"> </label> </div> </div> <div class="rightColumn" style="width:50%">*Gender: <input checked="checked" name="Gender" type="radio" value="M" />Male <input name="Gender" type="radio" value="F" />Female </br> </br>*Nationality: <select name="Nationality" id="Nationality"> <option value="UAE">UAE</option> <option value="ARE" selected>ARE</option> <option value="USA">USA</option> <option value="IND">IND</option> </select> </br></br>*Country Of Residency: <select name="Residency_country" id="Residency_country" onclick ="disableNational_ID();"> <option selected="selected" value="UAE">UAE</option> <option value="ARE">ARE</option> <option value="USA">USA</option> <option value="IND">IND</option> </select> </br></br>*National Id: <!-- <label id="Emirateslbl" style="margin-left:70px;">*National Id:</label> --> <input id="Emirates_Id" name="Emirates_Id" type="text" value="" style="margin-left:10px;" > </br></br>*Marital Status: <select name="marital_status" id="marital_status"> <!-- Dropdown will be filled from Xlatitem table --> :%bind(:3); </select> </br> </br> *Regional Preference: <select name="religious" id="religious"> <!-- Dropdown will be filled from Religious table --> :%bind(:4); </select> </div> <!-- Phone Entry table ends--> <table id="phone" width="100%" name="phone"> <tr> <td colspan="5" bgcolor="#5C85B3">Phone</td> </tr> <tr> <th>Type</td> <th>Country Code</th> <th>*Phone</th> <th>Preferred</th> <th>Add/Delete</th> </tr> <tr> <td> <select name="phntype" id="phntype" style="width:50%"> <!-- Phone Types --> %bind(:6); </select> </td> <td> <input type="text" name="cntrycde" id="cntrycde" value=""> </td> <td> <input type="text" name="phone_no" id="phone_no" value=""> </td> <td> <input type="hidden" name="prefferd" value="NO"> <input type="checkbox" name="preferred" id="preferred" value="N" onchange ="changeCheckBox();"> </td> <td> <input type="button" value="+" class="add"> <input type="button" value="-" class="delete"> </td> </tr> </table> <p></p> <!-- Phone Entry table ends--> <!-- Footer Of The Page--> <footer>*How do you Learn about side:</label> <select name="source" id="source"> <option selected="selected" value="internet">Internet</option> <option value="Media">Media</option> <option value="Newspaper">Newspaper</option> </select> <input type="Submit" value="Submit And Next" style="float:right"> </footer> <!-- Footer Ends--> </form> </body> </html> 

Answer 2

Why don't you use table with ID selector.

table#phone {
    /* your css styling code here */
}