Bonjour,
J'utilise une feuille de style screen.css avec sélecteurs de tableau mais pour une application de calendrier développé par un tiers (jsSimpleDatePickr.2.1.js) , je veux que la feuille de style fournie pour le calendrier (default_blue.css) soit prioritaire sur la mienne. Je ne sais pas comment faire.
Voici un extrait de mon css:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Propriétés des tableaux */
table {
	border-collapse:collapse;
}
table tr:nth-child(odd) {
	background-color:#ddd;
}
table tr:nth-child(even) {
	background-color:#eee;
}
td, th {
	font-size:.9em;
	padding: 1px 7px;
}
th {
	border: solid black 1px;
	text-align:center;
	font-weight:bold;
	background-color:#ccc;
}
td {
	border: solid black 1px;
}
table caption {
	padding-bottom:3px;
	font-weight:bold;
}
et mon code html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
	<meta charset="utf-8" />
	<title>Titre</title>
	<link rel="stylesheet" media="all" type="text/css" href="_css/structure.css" /> <!-- Dimensions et positions -->
	<link rel="stylesheet" media="screen" type="text/css" href="_css/screen.css" /> <!-- apparence -->
	<link rel="stylesheet" type="text/css" href="_css/default_blue.css" /> <!-- calendrier -->
</head>
<!-- ... -->
	<div class="calMain">
		<div class="calChild">
			<label for="date_naissance" class="xL">Date naissance</label><input type="text"  name="date_naissance" id="date_naissance" /><br/>
		</div>
		<div id="calendarMain" class="calChild calendarMain"></div>
	</div>
Et la partie NON prise en compte du css fourni avec jsSimpleDatePicker:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* calendrier */
.jsCalendar{
	color: #fff;
	border-collapse: collapse;
}
.jsCalendar th{
	color: #8ba7bf;
	font-size: 16px;
	font-weight: normal;
	text-align: center;
}
.jsCalendar td{
	padding: 0;
	border: none;
	width: 30px;
	padding: 3px 0 3px 0;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
.jsCalendar .day:hover{
	background-color: #2673cb;
	border-color: #2673cb;
}
.jsCalendar .selectedDay{
	background-color: #c44d38;
	border-color: #c44d38;
}
Pour info, ce sont les deux sélecteurs 'table tr' qui me gêne le plus mais je voudrais céder la priorité pour toutes les propriétés de table.