- <! DOCTYPE html>
- <meta charset= "gb2312" >
- <TITLE>CSS3 Daily One practice selector-Structural pseudo-class selector [IV] | Front End Development Network (w3cfuns.com)!</title>
- <style type= "Text/css" >
- *{margin:0; padding:0;}
- #list {font-family: "Microsoft Yahei"; font-size:14px;}
- #list DT, #list dd{height:30px; line-height:30px; text-align:center; color: #000; list-style:none;}
- #list Dt:nth-child (odd) {color: #fff; background: #900;} /* The odd number of sub-elements of the current DL list if it is a dt child element, it will be selected */
- #list Dt:nth-child (even) {background: #090;} /* The sub-element of the current DL list if it is a DT child, it will be selected */
- </style>
- <body>
- <DL id= "List" >
- <dt> Front-end Development Network (w3cfuns.com)!</dt>
- <dd>web front-end development take-off area, web front-end development experts gathered, tutorials, resources completely FREE! </dd>
- <dt> Front-end Development Network (w3cfuns.com)!</dt>
- <dd>web front-end development take-off area, web front-end development experts gathered, tutorials, resources completely FREE! </dd>
- <dt> Front-end Development Network (w3cfuns.com)!</dt>
- <dd>web front-end development take-off area, web front-end development experts gathered, tutorials, resources completely FREE! </dd>
- <dt> Front-end Development Network (w3cfuns.com)!</dt>
- <dd>web front-end development take-off area, web front-end development experts gathered, tutorials, resources completely FREE! </dd>
- <dt> Front-end Development Network (w3cfuns.com)!</dt>
- <dd>web front-end development take-off area, web front-end development experts gathered, tutorials, resources completely FREE! </dd>
- </dl>
- </body>
Copy the code from the above code, we can find that clearly set the odd and even lines of the DT, according to the truth, it should be as if the effect of this operation is:
<ignore_js_op>
This is because Nth-child and nth-last-child are calculated with all child elements in the connected parent element when calculating whether the child element is an odd or even line, in other words, the meaning of Dt:nth-child (odd) does not mean " The current DL list of the odd number of DT sub-elements to calculate, but that "the current DL list of the odd number of sub-elements if it is a dt sub-element, then it will be selected", then this calculation and we "understand" the need for this calculation?
Nth-of-type selector and Nth-last-of-type selector
These two selectors can avoid the above problem, CSS3 is calculated only for the same type of child element when calculating whether the child element is the odd number or the odd number of elements, and the two selectors are used as follows:
- <! DOCTYPE html>
- <meta charset= "gb2312" >
- <TITLE>CSS3 Daily One practice selector-Structural pseudo-class selector [IV] | Front End Development Network (w3cfuns.com)!</title>
- <style type= "Text/css" >
- *{margin:0; padding:0;}
- #list {font-family: "Microsoft Yahei"; font-size:14px;}
- #list DT, #list dd{height:30px; line-height:30px; text-align:center; list-style:none; color: #fff;}
- #list dd{color: #000;}
- #list Dt:nth-of-type (odd) {background: #900;} /* Odd Line */
- #list Dt:nth-of-type (even) {background: #090;} /* Even lines */
- </style>
- <body>
- <DL id= "List" >
- <dt> Front-end Development Network (w3cfuns.com)!</dt>
- <dd>web front-end development take-off area, web front-end development experts gathered, tutorials, resources completely FREE! </dd>
- <dt> Front-end Development Network (w3cfuns.com)!</dt>
- <dd>web front-end development take-off area, web front-end development experts gathered, tutorials, resources completely FREE! </dd>
- <dt> Front-end Development Network (w3cfuns.com)!</dt>
- <dd>web front-end development take-off area, web front-end development experts gathered, tutorials, resources completely FREE! </dd>
- <dt> Front-end Development Network (w3cfuns.com)!</dt>
- <dd>web front-end development take-off area, web front-end development experts gathered, tutorials, resources completely FREE! </dd>
- <dt> Front-end Development Network (w3cfuns.com)!</dt>
- <dd>web front-end development take-off area, web front-end development experts gathered, tutorials, resources completely FREE! </dd>
- </dl>
- </body>
Copy Code