12 CSS advanced skills and 12 CSS skills

12 CSS advanced skills and 12 CSS skills

1. Use: not () to apply/cancel the border on the menu
2. Add Row Height to the body
3. Everything is vertically centered
4. comma-separated list
5. Select a project using negative nth-child
6. Use SVG for icons
7. Optimize display text
8. Use max-height for the pure CSS Slider
9. inherit box-sizing
10. Table cell width
11. Use Flexbox to get rid of various hack on the margin
12. Use the property selector for empty links

Use: not () to apply/cancel the border on the menu

Add a border for each menu item

/* add border */.nav li {  border-right: 1px solid #666;}

...... And then remove the last element ......

// * Remove border */

.nav li:last-child {  border-right: none;}

...... You can directly use the: not () pseudo class to apply elements:

.nav li:not(:last-child) {  border-right: 1px solid #666;}

In this way, the code is clean, easy to read, and easy to understand.

Of course, if your new element has a sibling element, you can also use the common sibling selector (~) :

.. Nav li: first-child ~ Li {

  border-left: 1px solid #666;}

Add Row Height to the body

You do not need to add line-height to each<p>，. Just add it to the body:

body {  line-height: 1;}

In this way, text elements can be easily inherited from the body.

Center everything vertically

It's too easy to vertically center all elements:

html, body {  height: 100%;  margin: 0;}body {  -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;  display: -webkit-flex;  display: flex;}

Check whether it is easy.

Note: Be careful with flexbox in IE11.

Comma-separated list

Make the HTML list items look like a real list separated by commas:

ul > li:not(:last-child)::after {  content: ",";}

Use the not () pseudo class for the last list item.

Use negative nth-child to select a project

Use negative nth-child in CSS to select project 1 to Project n.

li {  display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) {  display: block;}

It is so easy.

Use SVG for icons

We have no reason not to use SVG for the icon:

.logo {  background: url("logo.svg");}

SVG provides excellent scalability for all resolution types and supports returning all browsers to IE9. In this case, you can avoid the. pngw..jpg or. GIF file.

Optimize display text

Sometimes, the font cannot display the best on all devices, so you can use the device browser to help you:

html {  -moz-osx-font-smoothing: grayscale;  -webkit-font-smoothing: antialiased;  text-rendering: optimizeLegibility;}

Note: Please use optimizeLegibility responsibly. In addition, IE/Edge does not support text-rendering.

Use max-height for the pure CSS Slider

Use max-height and overflow hiding to implement the CSS slider only:

.slider ul {  max-height: 0;  overlow: hidden;}.slider:hover ul {  max-height: 1000px;  transition: .3s ease;}

Inherit box-sizing

Let box-sizing inherit html:

html {  box-sizing: border-box;}*, *:before, *:after {  box-sizing: inherit;}

In this way, the box-sizing can be changed more easily in the plug-in or other components that leverage other behaviors.

Table cell width

Table is very troublesome to work, so try to use table-layout: fixed to keep the cell width equal:

.calendar {  table-layout: fixed;}

Use Flexbox to get rid of various hack on the margin

When Column delimiters are used, you can get rid of the space-between attribute of flexbox.nth-，first-, AndLast-childHack:

.list {  display: flex;  justify-content: space-between;}.list .person {  flex-basis: 23%;}

Now, the list separator will appear at the even interval.

Use the property selector for empty links

When the <a> element has no text value but the href attribute has a link, the link is displayed:

a[href^="http"]:empty::before {  content: attr(href);}

It is quite convenient.