/ / Странно CSS Class Name, някой ми обясни какво става? - html, css

Странно име на CSS класа, някой ми обясни какво става? - html, css

Опитвам се да направя малко копие на този уебсайт но аз "имам проблеми с част от галерията, моите изображения просто няма да се държат по същия начин, както се опитва да копира уебсайта." Очевидно се сменят след завършване.

Тук е JSFiddle на моя код, ако това помага.

Ето моята CSS за секцията:

/* Gallery Start */
.box.style2 header {
display:inline-block;
background:#FFF;
padding:2em 3em;
margin:0px;
}
.box.style2 .inner {
position:relative;
padding:40px 0 0px 0;
}
.box.style2 {
text-align:center;
}
.box.style2 .inner:after {
content: "";
display:block;
position:absolute;
top:0;
left:50%;
height:100%;
border-left:solid 1px #FFF;
}
.box.style2 .inner .row {
position:relative;
}
.row {
border-bottom:solid 1px transparent;
box-sizing:border-box;
}
.row:after, .row:before {
content: "";
display:block;
clear:both;
height:0;
}
.row > * {
float:left;
}
.box.style2 .inner .image {
position:relative;
z-index:1;
padding:20px;
}
.image.fit {
display:block;
width:100%;
}
.gallery-image {
width:25%;
margin-left:0px;
}
/* Gallery END */

И тук е моят HTML:

<!-- Start of gallery -->
<article class="container box style2">
<header>
<h2>Recent Work</h2>
<p>Below are images of our recent completed work</p>
</header>
<div class="inner gallery">
<!-- Gallery Images -->
<div class="row">
<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="/images/images/01.jpg" />
</a>
</div>
<!-- Image END -->

<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="/images/images/01.jpg" />
</a>
</div>
<!-- Image END -->

<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="/images/images/01.jpg" />
</a>
</div>
<!-- Image END -->

<!-- Image -->
<div class="gallery-image">
<a href class="image fit" style="outline: 0px;">
<img src="/images/images/01.jpg" />
</a>
</div>
<!-- Image END -->
</div>
</div>
<!-- Gallery Images END -->
</article>
<!-- End of gallery -->

Ето скрийншот на това как изглеждат изображенията ми, както виждате, те не се държат изобщо.

Мисля, че това е така, защото нямам тези стилове, но не мога да разбера какво означават, всичко, което мога да разбера от Google е, че те са класове, направени от числа:

.row.30 25 > * {
padding: 0px 0 0 0px;
}
/* Inherited from: @media screen and (max-width: 1680px}*/
.row > * {
padding: 40px 0 0 40px;
}
.33 u, .33 u24 {
width: 25%;
clear: none;
margin-left: 0;
}

edit: така че след като подготвя отговора на wero, разбирам ли това правилно?

.row.30 25 > * би насочило основно към клас с името 0 в рамките на row клас, а след това елементът вътре 30 с клас 25 и след това стил следващия елемент в това?

Отговори:

4 за отговор № 1

Най- nn<space> синтаксис е символна последователност за изход за Unicode знак U + 00nn.

Това статия описва темата много добре.

Използвайки изходните последователности, които изграждат валиден CSS идентификатори на класове.

Защо правят това? Може само да се спекулира: За краткост, за генериране на уникални имена?


EDIT за отговор на разширения въпрос:

.row.30 25 > * е селектор за всички елементи (*) чийто родителски елемент (>) има CSS клас row и CSS клас, състоящ се от два знака U + 0030 и U + 0025.


Свързани въпроси


Коментари (0)

Добави коментар