wordpress投稿ページにてｃｓｓがすべてに適応されてしまう

wordpress投稿ページにて下記HTMLとcssを記入したところ
spanタグのcssとulタグのcssがすべてに適応されてしまいます。
やりたい事はhtml①はcss①の中のみの処理
html②はcss②の中のみの処理にしたいのですが、実際はhtml①のcss①の処理がhtml②css②、html③css③にも同じ処理をして動いてしまっている状態です

HTML①

html
1
2<ul>
3  <li><span><img src="https://coosy.co.jp/assets/img/service/service_planning.png" alt=""></span></li>
4  <li><span><img src="https://coosy.co.jp/assets/img/service/service_markting.png" alt=""></span></li>
5  <li><span><img src="https://coosy.co.jp/assets/img/service/service_system.png" alt=""></span></li>
6</ul>

CSS①

css
1li {
2  display: inline-block;
3}
4li:nth-child(odd) {
5  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
6}
7li:nth-child(even) {
8  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
9}
10 
11span {
12  display: block;
13  text-align: center;
14  -webkit-animation: vertical 1s ease-in-out infinite alternate;
15}
16span img{
17  width: 100px;
18  height: auto;
19}
20li:nth-child(1) span {
21  -webkit-animation-duration: 1.1s;
22}
23li:nth-child(2) span {
24  -webkit-animation-duration: 1.3s;
25}
26li:nth-child(3) span {
27  -webkit-animation-duration: 1.5s;
28}
29@-webkit-keyframes horizontal1 {
30  0% { -webkit-transform:translateX( -12px); }
31  100% { -webkit-transform:translateX(  0px); }
32}
33@-webkit-keyframes horizontal2 {
34  0% { -webkit-transform:translateX(  12px); }
35  100% { -webkit-transform:translateX(  0px); }
36}
37@-webkit-keyframes vertical {
38  0% { -webkit-transform:translateY(-40px); }
39  100% { -webkit-transform:translateY(  0px); }
40}

HTML②

html
1<div class="box26">
2    <span class="box-title">コース</span>
3    <p>〇月〇日（〇）am11:00〜〇月〇日（〇）<span class="font_test"><font style="border-bottom:3px double #ff0000;">申込終了</font></span></p>
4</div>

CSS②

css
1.box26 {
2    position: relative;
3    margin: 2em 0;
4    padding: 0.5em 1em;
5    border: solid 3px #95ccff;
6    border-radius: 8px;
7}
8.box26 .box-title {
9    position: absolute;
10    display: inline-block;
11    top: -13px;
12    left: 10px;
13    padding: 0 9px;
14    line-height: 1;
15    font-size: 19px;
16    background: #FFF;
17    color: #95ccff;
18    font-weight: bold;
19}
20.box26 p {
21    margin: 0; 
22    padding: 0;
23}

HTML③

html
1<ul class="pricecards">
2               <li class="pricecard free">
3                   <h3>〇〇</h3>
4                   <h4>０</h4>
5                   <div>yen/税込</div>
6                   <p>〇〇の方</p>
7                   <a href="#######">詳細はこちら</a>
8               </li>
9               <li class="pricecard premium">
10                   <h3>〇〇〇</h3>
11                   <h4>０</h4>
12                   <div>yen/税込</div>
13                   <p>〇〇〇の方</p>
14                   <a href="#######">詳細はこちら</a>
15               </li>
16               <li class="pricecard standard">
17                   <h3>〇〇〇</h3>
18                   <h4>０</h4>
19                   <div>yen/税込</div>
20                   <p>〇〇〇方</p>
21                   <a href="#####">詳細はこちら</a>
22               </li>
23           </ul>

css③

css
1ul {
2    list-style: none;
3    margin: 0;
4    padding: 0;
5}
6.pricecards{
7  display: flex;
8  display: -webkit-flex;
9  flex-wrap: wrap;
10  -webkit-flex-wrap: wrap;
11  align-items: center;
12  -webkit-align-items: center;
13  justify-content: center;
14  -webkit-justify-content: center;
15        }
16.pricecard{
17  flex: 0 0 33%;
18  text-align: center;
19  border: 1px solid #eee;
20  padding-bottom: 1rem;
21  box-sizing: border-box;
22  margin:0 auto 3em;
23        }
24        .pricecard h3{
25            background: #a2bc10;
26            color: #fff;
27            padding: 10px;
28            margin: 0;
29        }
30        .pricecard.premium{
31            border: 3px solid #06c7ea;
32            padding-bottom: 3rem
33        }
34        .pricecard.premium h3{
35            background: #06c7ea;
36            color: #fff;
37            padding: 10px;
38            margin: 0;
39        }
40        .pricecard h4{
41            font-size: 200%;
42            margin: 0 auto;
43            padding: 1rem 0 0;
44        }
45        .pricecard.premium h4 {
46            padding: 20px;
47        }
48        .pricecard p{
49            margin: 0;
50            padding: 1rem;
51            text-align: left;
52        }
53        .pricecard a{
54            padding: 10px 40px;
55            background: #fb5859;
56            color: #fff;
57            text-decoration: none;
58            border-radius: 3px;
59            display: inline-block;
60        }
61@media screen and (max-width: 600px){
62.profile_card, .pricecards, .profile_cards {
63    flex-direction: column;
64    -webkit-flex-direction: column;
65}
66  .pricecard, .card_photo {
67    flex: 0 0 auto;
68    -webkit-flex: 0 0 auto;
69}
70  .pricecard.premium {
71    order: 1;
72    -webkit-order: 1;
73}
74}