Summary of new content in HTML5+CSS3

Speaking of H5+C3, do you think there are too many things? Today I compiled a summary.

What are the CSS3 selectors?
Attribute selector, pseudo-class selector, pseudo-element selector.

What are the new features of CSS3?
1. Color: Added RGBA, HSLA mode
2. Text shadow (text-shadow,)
3. Border: Rounded corners (border-radius) Border shadow: box-shadow
4. Box model: box-sizing
5. Background: background-size Set the size of the background image background-origin Set the origin of the background image
background-clip Set the cropping area of ​​the background image to ", "Separation can be set with multiple backgrounds for adaptive layout
6. Gradient: linear-gradient, radial-gradient
7. Transition: transition, animation can be realized
8. Custom animation
9 . The only pseudo-element introduced in CSS3 is: selection.
10. Media queries, multi-column layout
11. border-image
12.2D transformation: transform: translate(x, y) rotate( x, y) skew(x, y) scale(x, y)
13. 3D conversion

What are the new pseudo-classes in CSS3?
:first-child selects the first child element of an element;
:last-child selects the last child element of an element;
:nth-child(n) selects an element One or more specific child elements of an element;
Example: p:nth-child(3): The third one must be a p element otherwise it will be invalid

:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n从0开始计算*/ 
:nth-child(n*length)/*n的倍数选择，n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
//上面length为整数
:nth-child(n) //就是所有选择的元素
“n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的。

:nth-last-child() Select one or more specific sub-elements of an element, starting from the last sub-element of this element;
:nth-of-type() selects the specified element;
For example: p:nth- of-child(3) selects the third p element

:nth-last-of-type() selects the specified element, counting from the last element;
:first-of-type Select the first similar child element under a superior element;
:last-of-type selects the last similar child element of a superior element
:only-child The selected element is the only one of its parent element element;
: only-of-type selects an element that is the only child element of the same type as its superior element
: empty There is no content in the selected element
: not() does not match the The elements of the selector are all elements except a certain element.
:enabled, :disabled control the disabled state of the form control.
:checked, the radio button or check box is selected.
::first-line selects the first line of the element
::first-letter selects the first letter of the text block
::before and ::after are mainly used to give the front of the element Or insert content later. These two commonly used "content" are used together. The most written one is to clear the float.
::selection is used to change the default effect of selecting text when browsing web pages.

What are the new features of html5? What elements were removed? How to deal with browser compatibility issues with HTML5 new tags? How to differentiate between HTML and HTML5?

New features:
1. Drag and drop API
2. Content tags with better semantics (header, nav, footer , aside, article, section)
3. Audio, video API (audio, video)
4. Canvas API
5. Geolocation API
6. Local offline storage localStorage Long-term storage of data, the data will not be lost after the browser is closed;
7. SessionStorage data will be automatically deleted after the browser is closed
8. Form controls, calendar, date, time, email, url, search
9 . New technologies webworker, websocket, Geolocation

Support HTML5 new tags:
* IE8/IE7/IE6 supports tags generated by the document.createElement method,
You can use this feature to make these browsers support HTML5 new tags,
After the browser supports the new tag, you need to add the default style of the tag:
* Of course, the best way is to directly use a mature framework, and the most used one is the html5shim framework

The above is the detailed content of Summary of new content in HTML5+CSS3. For more information, please follow other related articles on the PHP Chinese website!