CSS3
CSS3 is an upgraded version of CSS (Cascading Style Sheet) technology. It was formulated in 1999. On May 23, 2001, W3C completed the working draft of CSS3, which mainly includes box model, list module, hyperlink method, language module, background and Modules such as borders, text effects, and multi-column layouts.
Browser kernel and its prefix
Each attribute in the CSS standard has to go through the process from draft to recommendation. The progress of the attributes in css3 is different. There is a risk for browser manufacturers to support early support when the standard is not clear, and browser manufacturers’ support for new attributes is also different. , So the vendor prefix will be added to distinguish. If a certain attribute has changed from the draft to or is close to the recommended scheme, and the manufacturer has fully realized the recommended attribute, then there is no need to add the manufacturer prefix. If border-radius is already mature, no prefix is needed.
What is the browser kernel
The so-called browser kernel refers to the most important or core part of the browser, "Rendering Engine", which is translated as "Rendering Engine". Responsible for parsing web page grammar, such as HTML, JavaScript, and rendering it on the web page. Therefore, the browser kernel is the rendering engine used by the browser, and the rendering engine determines how the browser displays the content of the page and the format information of the page. Different browser cores have different interpretations of grammar, so the same webpage will have different effects in browsers with different cores. This is the reason why web page authors test web page display effects in browsers with different cores.
According to different browser kernels, the css prefix will be different. There are four basic browser kernels as follows, and other kernels are re-developed based on these four.
-
Gecko kernel prefix is -moz- Firefox browser
-
The Webkit kernel prefix is -webkit- also called Google kernel. Chrome browser was first developed and used, and Safari browser also uses this kernel. Many domestic browsers also use the webkit kernel, such as 360 Speed, Window of the World, Cheetah and so on.
3. The Trident kernel prefix is -ms- also known as the IE kernel
- Presto kernel prefix -o- currently only used by opera
In most cases, when you need to use the attributes in the CSS3 specification and need to use a prefix, just add the above prefix for the browser you are using. For example: if you want to add a CSS transition effect, use the transition attribute and add the following prefix first:
-webkit-transition:background 0.5s ease;
-moz-transition:background 0.5s ease;
-o-transition:background 0.5s ease;
transition:background 0.5s ease;
The user's browser will respond to the version of the transition function it understands, and ignore other versions. At present, browser vendors are doing their best to fully implement all CSS3 functions, and for most modern browsers, the number of attributes that need to be prefixed is rapidly decreasing.
For those functions that need to add a prefix, you can browse: http://shouldiprefix.com/ To add a prefix, you
can use a plug-in (autoprefix), sometimes you need to write in css
CSS3 new
Selector
CSS3 has added many new methods to find elements flexibly, which greatly improves the efficiency and accuracy of finding elements. CSS3 selectors are compatible with most of the selectors provided in jQuery.
Child selector
div > pSelect divthe sub-element ptag (must be pro-son, does not skip a generation)
Sibling selector
+ Select the next (next to) sibling element that meets the criteria
Universal Brother Selector
~ Select all the sibling elements that meet the conditions
Attribute selector
Select elements by attributes
E[attr]Select all elements contained attr attribute
E[attr=mydemo]selection value attributes attr equal mydemo characters all elements
E[attr*=mydemo]selected attributes attr arbitrary value location containing mydemo characters all the elements
E[attr^=mydemo]selected attributes attr start position value comprises mydemo characters of all elements
E[attr$=mydemo]to select the value of attributes attr end All elements where the position contains the characters of mydemo
Example:
<style>
*{
margin: 0;
padding: 0;
}
p[title]{
color: red;
}
p[title="hello"]{
color: green;
}
p[class*=e]{
color: orange;
}
p[class$=o]{
color: #0000FF;
}
p[class^=w]{
color: purple;
}
p[data-name]{
font-size: 25px;
}
</style>
<body>
<p title="hello">今天天气真好啊</p>
<p title="nice">今天天气真好啊</p>
<p class="word">今天天气真好啊</p>
<p class="text">今天天气真好啊</p>
<p class="texa">今天天气真好啊</p>
<p class="ao">今天天气真好啊</p>
<p data-name="today">今天天气真好啊</p>
</body>
Pseudo-class selector
In addition to what you have learned before,
:linkwhen the link is not accessed, when the
:activelink is clicked (for a moment),
:visitedafter the link is accessed, when the
:hovermouse is hovering
CSS3 adds other pseudo-class selectors
Form related pseudo-classes
:checkedMatch the selected option
:focusMatch the input box of the focus
Structural pseudo-classes
Focus on determining the parent element of the element through E.
E:first-childThe first subelement
E:last-childlast child element of
E:nth-child(n)the n th element
E:nth-last-child(n)with the E:nth-child(n)similar, but backwards calculation
Note
- n supports simple expressions
- n is a natural number starting from 1 E: nth-child(0) is invalid
- Best child elements are the same element
Target pseudo-class
E:target Used in combination with anchor points, the element at the current anchor point will be selected
<style>
li:target{
font-size: 30px;
color: blue;
}
<style>
<body>
<a href="#li3">点我</a>
<li id="li3">li3</li>
</body>
Pseudo-element
E::before , the E::aftercontent attribute of the default in-line element must write
E::first-letterthe first letter or word of the
E::first-linetext. The first line
E::selectionof the text is the selected text
":" and "::" are used to distinguish pseudo-classes and pseudo-elements