New features of CSS3
Status of CSS3:
- The new CSS3 feature has compatibility problems, which is only supported by ie9 +
- The support of mobile terminal is better than that of PC terminal
- Continuous improvement
- It is widely used
1, CSS3 new selector
New selectors in CSS3:
CSS3 has added some selectors to make it easier and more free to select target elements.
1. Attribute selector
2. Structure pseudo class selector
3. Pseudo class selector
1. Attribute selector:
Syntax:
E[att] Select the E element with ATT attribute
E[att="val"] Select the E element with ATT attribute and attribute value equal to val
E[att^="val"] Match the E element with ATT attribute and value starting with val
E[att$="val"] Match the E element with ATT attribute and value ending with val
E[att*="val"] Match the E element with ATT attribute and val in the value
advantage:
1. Using attribute selectors can eliminate the need for class or id selectors
2. The attribute selector can also select certain elements of attribute = value (key points)
3. The attribute selector can select some elements at the beginning of the attribute value
4. The attribute selector can select certain elements at the end of the attribute value
<style> /* input[value] { color: aqua; } */ input[type=text] { color: blanchedalmond; } div[class^="icon"] { color: blueviolet; } section[class$="data"] { color: brown; } </style> </head> <body> <!-- 1,Using attribute selectors can eliminate the need for classes or id selector --> <!-- <input type="text" name="" id="" value="enter one user name"> <input type="text" name="" id=""> --> <!-- 2,The attribute selector can also select attributes=Some elements of value (emphasis) --> <input type="text"> <input type="password"> <!-- 3,The attribute selector can select some elements at the beginning of the attribute value --> <div class="icon1">Small icon 1</div> <div class="icon2">Small icon 2</div> <div class="icon3">Small icon 3</div> <div class="icon4">Small icon 4</div> <div>hhhhhh</div> <!-- 4,The attribute selector can select certain elements at the end of the attribute value --> <section class="icon1-data">1234</section> <section class="icon2-data">5678</section> <section class="icon3-ico">345678</section> </body>
be careful:
The weight of class selector, attribute selector and pseudo class selector is 10.
2. Structure pseudo class selector:
The structure pseudo class selector mainly selects elements according to the document structure, and the common phrase is changed according to the child elements in the parent selector
Syntax:
E:first-child Matches the first child element E in the parent element
E:last-child Matches the last child element E in the parent element
E:nth-child(n) Matches the nth child element E in the parent element
E:first-of-type Specifies the first of type E
E:last-of-type Specifies the last of type E
E:nth-of-type(n) Specifies the nth of type E
Of which:
Nth child (n) selects one or more specific child elements of a parent element.
n can be numbers, keywords and formulas;
If n is a number, select the nth sub element, where the number starts from 1;
n can be Keywords: even, odd;
N can be a formula: the common formula is as follows (if n is a formula, it will be calculated from 0, but the 0th element or the number exceeding the element will be ignored).
Formula:
2n even numbers
2n+1 Odd number
5n Multiple of 5 "5" can be other values
n+5 From the fifth (including the fifth) to the last "5" can be other values
- n+5 The first five (including the fifth) "5" can be other values
<style> /* 1.Choose the first child in ul li */ ul li:first-child { background-color: coral; } ul li:last-child { background-color: cornflowerblue; } ul li:nth-child(2) { background-color: sandybrown; } /* Pick out all the even numbered children */ /* ul li:nth-child(even) { background-color: sandybrown; } */ /* Pick out all the odd children */ /* ul li:nth-child(odd) { background-color: sandybrown; } */ ul li:nth-child(6) { background-color: lightgreen; } </style> </head> <body> <ul> <li>I am the first child</li> <li>I'm the second child</li> <li>I'm the third child</li> <li>I'm the fourth child</li> <li>I'm the fifth child</li> <li>I'm the sixth child</li> <li>I'm the seventh child</li> <li>I'm the eighth child</li> </ul> </body>
The difference between nth of type (n) and Nth child (n):
- Nth child sorts and selects all children in the parent element (the sequence number is fixed). First find the nth child, and then see if it matches E;
- Nth of type sorts and selects the specified child elements in the parent element, matches e first, and then finds the nth child according to E.
<style> /* nth-child(n) Start from 0, add 1 each time, and calculate from the back. The side here must be n, not other letters, which is equivalent to selecting all children*/ /* ol li:nth-child(n) { background-color: pink; } */ /* nth-child(2n)All even children are selected, which is equivalent to even */ /* ol li:nth-child(n) { background-color: pink; } */ /* nth-child(n+5) Choose from the fifth to the last */ /* ol li:nth-child(n+5) { background-color: pink; } */ /* nth-of-type(n) */ ol li:nth-of-type(even) { background-color: purple; } /* nth-child Will sequence all the children When executing, he first looks at nth child (1), and then goes back to the div in front*/ section div:nth-child(1) { background-color: red; } /* nth-of-type The boxes of the specified elements are numbered When executing, first look at: div (specified element) and then go back to the nth of type (1) children */ section div:nth-of-type(1) { background-color: royalblue; } </style> </head> <body> <ol> <li>I am the first child</li> <li>I'm the second child</li> <li>I'm the third child</li> <li>I'm the fourth child</li> <li>I'm the fifth child</li> <li>I'm the sixth child</li> <li>I'm the seventh child</li> <li>I'm the eighth child</li> </ol> <section> <p>Bald head strength</p> <div>Xiong Da</div> <div>Xiong er</div> </section> </body>
Summary:
- The structure pseudo class selector is generally used to select the children in the parent;
- Nth child sorts and selects all children in parent element (sequence number is fixed). First find nth child, and then see if it matches E;
- Nth of type sorts and selects the specified child elements in the parent element. Match E first, and then find the nth child according to E;
- For nth child (n), we should know that n is calculated from 0 and remember the common formula;
- If it is an unordered list, we must use nth child more;
- The weight of class selector, attribute selector and pseudo class selector is 10.
3. Pseudo element selector:
Pseudo element selectors can help us create new tag elements using CSS without HTML tags, thus simplifying the HTML structure.
method:
:: before Insert content before the inside of the element
:: after Insert content after the inside of the element
<style> div { width: 200px; height: 200px; background-color: seagreen; } /* div::before The weight is 2 */ div::before { /* This content must be written */ content: 'Page'; } div::after { content: 'pig'; } </style> </head> <body> <div>yes</div> </body>
be careful:
before and after create an element, but it belongs to an inline element;
The newly created element cannot be found in the document tree, so we become a pseudo element;
Syntax: element::before {}
before and after must have content attribute
before creates an element in front of the parent element content, and after inserts an element after the parent element content;
The pseudo element selector is the same as the label selector, with a weight of 1;
2, CSS3 box model
In CSS3, you can specify the box model through box sizing, which has two values: content box and border box, so the way we calculate the box size changes.
It can be divided into two cases:
1. Box sizing: content box the box size is width+padding+border (previously the default);
2. Box sizing: the size of the border box is width.
If we change the box model to box sizing: border box, then padding and border will not support large boxes. (provided that padding and border do not exceed the width of width)
<style> div { width: 200px; height: 200px; background-color: pink; border: 20px solid red; padding: 15px; } p { width: 200px; height: 200px; background-color: pink; border: 20px solid red; padding: 15px; /* CSS3 The final size of the box model is width */ box-sizing: border-box; } </style> </head> <body> <div> Peppa Pig </div> <p>Peppa Pig</p> </body>
3, CSS3 new transition
Transition is one of the subversive features in CSS3. We can add effects to elements when they change from one form to another without using Flash animation or JavaScript.
Transition Animation: it is a gradual transition from one state to another.
It can make our page more beautiful and dynamic. Although the lower version browsers do not support (ie9 versions below), it will not affect the page layout.
We often use it with: hover now.
transition: when the motion curve starts when the attribute to be excessive takes time;
1. Attribute: the css attribute you want to change, width, height, background color, inner and outer margins. If you want all attributes to change too much, write an all.
2. Time spent: the unit is seconds (the unit must be written), such as 0.5s.
3. Motion curve: the default is ease.
Parameter: linear Uniform velocity Ease gradually slowed down Ease in acceleration ease-out Slow down ease-in-out Accelerate first and then decelerate. (can be omitted)
4. When to start: the unit is seconds (the unit must be written). The delay trigger time can be set The default is 0s (can be omitted).
<style> div { width: 200px; height: 100px; background-color: pink; } div:hover { transition: width 1s ease-in-out 0s,height 1s ease-in-out 1s; /* If you want to write multiple attributes, separate them with commas. If you want all attributes to change, write all */ /* transition: all 1s; */ width: 400px; height: 200px; } </style> </head> <body> <div></div> </body>
4, Other features of CSS3 (understand)
1. The picture becomes blurred
CSS3 filter:
The filter CSS property applies a graphic effect of blur or color offset to the element.
Filter: function (); for example: filter:blur(5px); Blur processing The larger the value, the more blurred it is
<style> img { /* blur Is a function. The larger the value in parentheses, the more blurred the picture. Note that the value should be added with px unit */ filter:blur(5px) } img:hover { filter: blur(0); } </style> </head> <body> <img src="images/bg.jpg" alt=""> </body>
2. Calculate box width:calc function
CSS3 calc function:
calc() this CSS3 function allows you to perform some calculations when declaring CSS property values.
width:calc(100%-80px);
+ - * / can be used in parentheses for calculation.
<style> .father { width: 200px; height: 200px; background-color: royalblue; } .son { /* width: calc(150px+100px); */ /* It is required that the width of our child box is always 30px smaller than that of the parent box */ width: calc(100%-30px); height: 30px; background-color: chartreuse; } </style> </head> <body> <!-- The width of our child box is always 30 smaller than that of the parent box px --> <div class="father"> <div class="son"> </div> </div> </body>