One, the number of different lists, different layouts
This is a question asked by someone in the group, and maybe other people have similar needs, so I shared it with everyone.
The group avatar in chat software, or the grouping of some books, often uses a composite avatar as a big avatar.
As you can see, the number of avatars is different, and the layout is also different.
Normal operation
Generally, everyone will achieve layout effects similar to the following methods:
<ul class="box" data-number="1"></ul> <ul class="box" data-number="2"></ul> <ul class="box" data-number="3"></ul> …
.box[data-number="1"] li {}
.box[data-number="2"] li {}
.box[data-number="3"] li {}
It is a good method that can meet our development needs. The only shortcoming is that when the number of sub-avatars changes, data-numberthe attribute values need to be modified at the same time . The development cost is slightly troublesome.
In fact, there is a more clever way to implement it, which is to use pseudo-classes to automatically determine the number of items in our list to achieve the layout we want.
2. Pseudo-class implementation techniques you may not know
In this method, you don't need to set the number of the current list on the parent element, so the HTML looks unremarkable:
<ul class="box"> <li></li> <li></li> <li></li> … </ul>
The key lies in CSS. We can use pseudo-classes to determine the number of current lists, as shown below:
li:only-child { /* 1个 */ }
li:first-child:nth-last-child(2) { /* 2个 */ }
li:first-child:nth-last-child(3) { /* 3个 */ }
…
In CSS, pseudo-classes can be used in cascade. Therefore, if the list can match, :first-child:nth-last-child(2)it means that the current <li>element is the first child element and the second child element from back to front. Therefore, we can judge the current total of two a <li>sub-elements, we will be able to achieve precise layout we want, and only need to meet the adjacent sibling selectors plus +and brothers selectors curved ~. For example:
/* The first list item of the 3 li items*/
li:first-child:nth-last-child(3) {}
/* The second list item of the first list item of the 3 li items Item style*/
li:first-child:nth-last-child(3) + li {}
/* The first list item of the 3 li items and the two list items after the first list item, that is, item 2 and item 3 The style of */
li:first-child:nth-last-child(3) ~ li {}
Seeing is believing, you can click here fiercely: Pure CSS automatically recognizes the number of different lists and different layouts demo
For example, if there are only two <li>:
<ul> <li></li> <li></li> </ul>
The effect is as follows:
If three <li>:
<ul> <li></li> <li></li> <li></li> </ul>
The layout effect is as follows:
The complete 9 layout effects are as follows: MP4 video (please click if you don't move):
3. Extension and Expansion: The text size becomes smaller automatically when the text is multi-font
Similar to the above principle, we can achieve the effect of more text content and automatic font size reduction, but we need to wrap all the characters with a label, and the rest will be left to CSS.
You can click here: the font-size of the text changes automatically according to the number of demo
As you can see, when the number of texts is different, the font size also changes, as shown in the following GIF screenshot:
The core CSS is as follows:
.box span {
font-size: 40px;
}
.box span:first-child:nth-last-child(n+13),
.box span:first-child:nth-last-child(n+13) ~ span {
font-size: 30px;
}
.box span:first-child:nth-last-child(n+17),
.box span:first-child:nth-last-child(n+17) ~ span {
font-size: 20px;
}
.box span:first-child:nth-last-child(n+25),
.box span:first-child:nth-last-child(n+25) ~ span {
font-size: 14px;
}
Indicates the style when the number of characters is greater than 13, greater than 17, and greater than 25.
In addition, with the " Cicada Principle ", we can also achieve a more random style effect for the list (the zebra crossing of the table is controlled by law, in fact, you can use compound pseudo-classes to achieve randomness). There is a chance to expand this later.
To start with, this technique in this article is very suitable for occasions where HTML cannot be modified. Although there are some geeks, it may be a godly operation at the critical moment.
This method is supported by IE9+, so use it with confidence.
Thanks for reading and welcome to communicate!