Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS引入方式及Css选择器
Blogger Information
Blog 18
fans 0
comment 0
visits 16005
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS引入方式及Css选择器
沉寂的博客
Original
597 people have browsed it

CSS引入方式及Css选择器

css引入方式

1.如果只是用在本页面的css样式，写入style标签中（内部样式）

  1.  <style>
  2.       /* 类选择器 */
  3.       .Yanzheng {
  4.         background-color: chocolate;
  5.       }
  6.       /* id选择器 */
  7.       #two {
  8.         background-color: darkgoldenrod;
  9.       }

2.如果需要可以直接写在标签中style属性中（内联样式）
<li style="background-color: yellow">item1</li>
3.用link引入（外部样式）
<link rel="stylesheet" href="../CSS/css选择器1.css" />

Css选择器

1.class选择器
.Yanzheng li { background-color: lightblue; }
2.id 选择器
#two{ background-color:#ccc; }
3.伪类选择器
匹配任意位置的元素
写法：:nth-of-type(an+p)
an是起始位置，p是偏移量。
具体代码如下：

  1.  /* 结构伪类选择器 */
  2.       /* 陪陪任意位置的元素 :nth-of-type(an + P)  an是起点 p是偏移量
  3.       如果是选择从第三个元素开始到最后一个元素:nth-of-type(n + 3);
  4.       选择第一个元素:nth-of-type(1)也可以写成:first-of-type
  5.       选择最后一个元素:nth-of-type(10) 也可以写成:last-of-type
  6.       选择奇数元素:nth-of-type(2n+1/2n-1)也可以写成:nth-of-type(add)
  7.       选择偶数元素:nth-of-type(2n)也可以写成:nth-of-type(even)
  8.       元素倒着选择:nth-last-of-type(3)这个是选择倒数第三个元素
  9.       如果是选择从倒数第三个元素开始到最后一个元素:nth-of-type(-n + 3);
  10.       */
  11.       /* 选择第第三个元素 */
  12.       /* ul li:nth-of-type(3) {
  13.         background-color: darkgoldenrod;
  14.       } */
  15.       /* ul li:first-of-type{
  16.             background-color: darkgreen;
  17.         } */
  18.       /* 选择奇数 */
  19.       /* ul li:nth-of-type(2n + 1) {
  20.         background-color: blue;
  21.       } */
  22.       /* ul li {
  23.         color: white;
  24.         text-align: center;
  25.         width: 300px;
  26.       } */
  27.       ul li:nth-of-type(odd) {
  28.         background-color: blue;
  29.       }
  30.       /* 选择偶数元素 */
  31.       ul li:nth-of-type(even) {
  32.         background-color: darkred;
  33.       }
  34.       /* ul li:nth-of-type(2n){
  35.           background-color: darkred;
  36.       } */
  37.       /* 选择最后一个元素 */
  38.       /* ul li:last-of-type {
  39.         background-color: violet; */
  40.       /* } */
  41.       /* 倒着选择元素 */
  42.       /* ul li:nth-last-of-type(-n + 3) {
  43.         background-color: yellow;
  44.       } */
  1.  <body>
  2.     <ul>
  3.       <li>1</li>
  4.       <li>2</li>
  5.       <li>3</li>
  6.       <li>4</li>
  7.       <li>5</li>
  8.       <li>6</li>
  9.       <li>7</li>
  10.       <li>8</li>
  11.       <li>9</li>
  12.       <li>10</li>
  13.     </ul>
  14.   </body>

执行结果如下所示：
奇偶数

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post