Community Learn Tools Library Leisure
search
English
Home > List of blog posts > # 关于CSS的引入方式及选择器概述
Blogger Information
Blog 13
fans 0
comment 0
visits 9212
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的引入方式及选择器概述
我是贝壳
Original
558 people have browsed it

关于CSS的引入方式及选择器概述

1、CSS的引入方式

1.1 内部样式

说明：仅对当前文档的元素有效，使用style标签
示范代码

  1. <head>
  2. <style>
  3. h1{
  4. color:red;
  5. font_size:small;
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. <h1>php中文网</h1>
  11. </body>

1.2 外部样式

说明：适用于所以引入了这个CSS样式表的html文档，使用link标签
示范代码

  1. <head>
  2. <link type="stylesheet" href="css/style.css">
  3. </style>
  4. </head>
  5. <body>
  6. <h1>php中文网</h1>
  7. </body>

style.css中代码为：

  1. h1{
  2. color:red;
  3. font_size:small;
  4. }

1.3 行内样式

说明：仅适用于当前页面中指定的元素，使用style属性
示范代码

  1. <body>
  2. <h1 style="color:red;" >php中文网</h1>
  3. </body>

小结：为了简化html文档页面结构，提高css文件代码复用性，尽量将公共样式或者共享样式写成单独的外部样式表文件（也称样式表的模块化），通过<link>标签引用

2、CSS的选择器

2.1 简单选择器

2.1 标签选择器
  1. 1. 标签选择器, 返回一组对象
  2.  li {
  3.      background-color: violet;
  4.  }
2.2 属性选择器
  1. /*类选择器: 返回一组 */
  2.  li[class="on"] {
  3.     background-color: violet;
  4. }
  5. /*class选择器可简化为*/
  6. .on {
  7.      background-color: violet;
  8.     }
  9. /*id选择器: 返回一个 */
  10. li[id="foo"] {
  11.      background-color: violet;
  12. }
  13. /* 因为浏览器不检查id的唯一性,必须由开发者自行保证 */
  14. /* id选择器使用 # 简化 */
  15. #foo {
  16.     background-color: violet;
  17. }

2.2上下文选择器

2.2.1 后代选择器

说明：选择ul里包含的所有li对象（所有层级）

  1. ul li {
  2.     background-color: lightblue;
  3. }
2.2.2 父子选择器

说明：选择ul里包含的子级li对象

  1. ul>li {
  2.     background-color: lightblue;
  3. }
2.2.3 同级相邻选择器

说明：仅选中与之相邻（后面）的第一个兄弟元素

  1. /*先定位class=start的对象的位置，然后选择后面第一个同级的li对象*/
  2. .start+li {
  3.     background-color: lightgreen;
  4. }
  5. <body>
  6. <ul>
  7.     <li>item1</li>
  8.     <li class="start">item2</li>
  9.     <li>item3</li>
  10.     <li>item4
  11.         <ul>
  12.             <li>item4-1</li>
  13.             <li>item4-2</li>
  14.             <li>item4-3</li>
  15.         </ul>
  16.     </li>
  17.     <li>item5</li>
  18. </ul>
  19. </body>
2.2.4 同级所有选择器

说明：仅选中与之相邻（后面）的第一个兄弟元素

  1. /*先定位class=start的对象的位置，然后选择同级所有li对象*/
  2. .start~li {
  3.     background-color: lightgreen;
  4. }
  5. <body>
  6. <ul>
  7.     <li>item1</li>
  8.     <li class="start">item2</li>
  9.     <li>item3</li>
  10.     <li>item4
  11.         <ul>
  12.             <li>item4-1</li>
  13.             <li>item4-2</li>
  14.             <li>item4-3</li>
  15.         </ul>
  16.     </li>
  17.     <li>item5</li>
  18. </ul>
  19. </body>

2.3 伪类选择器

说明：与结构相关，选择器的重点难点中所在，
关键词：nth-of-type(an+b):

  1. an是起点，n=（0、1、2、3、4。。。）
  2. b是偏移量，用于表示目标对象与an的距离

公共代码

  1. <body>
  2. <ul>
  3. <li>item1</li>
  4. <li>item2</li>
  5. <li>item3</li>
  6. <li>item4</li>
  7. <li>item5</li>
  8. <li>item6</li>
  9. <li>item7</li>
  10. <li>item8</li>
  11. <li>item9</li>
  12. <li>item10</li>
  13. </ul>
  14. </body>

2.3.1 匹配任意位置的对象：第3个li对象

  1. ul li:nth-of-type(0n+3) {
  2.  background-color: violet;
  3. }
  4. /* 0乘以任何数都等于0,故如果能够明确是第几个，通常直接写偏移量就可以*/
  5. ul li:nth-of-type(3) {
  6.  background-color: violet;
  7. }

2.3.2 匹配任意位置的对象：选择所有li对象，或者选择从第三个（包含）后面所有的li对象

  1. ul li:nth-of-type(1n) {
  2. background-color: violet;
  3. }
  4. /* 如果只是为了全选,这样做没意义,还不如标签选择器来得直接,但是一旦带上偏移量就完全不同了 */
  5. /*选择第3个及后面的所有li对象*/
  6. ul li:nth-of-type(1n+3) {
  7. background-color: violet;
  8. }
  9. /* 1乘以任何数都等于自己,所以省去1 */
  10. ul li:nth-of-type(n+3) {
  11. background-color: violet;
  12. }

2.3.3 反向获取任意位置的对象：关键字为nth-last-of-type(an+b)

  1. ul li:nth-last-of-type(-n+3) {
  2. background-color: violet;
  3. }
  4. /* 我只选择倒数第3个,直接命中 */
  5. /* ul li:nth-last-of-type(3) {
  6. background-color: violet;
  7. }

2.3.4 选择索引为偶数的子对象：2、4、6、8

  1. /*偶数为2n，奇数则为2n-1或者2n+1*/
  2. ul li:nth-of-type(2n) {
  3. background-color: violet;
  4. }

2.3.5 选择第一个（倒数）子对象：

  1. /* 正向：:nth-of-type(1) 的语法糖 :first-of-type */
  2. ul li:first-of-type {
  3. background-color: violet;
  4. }
  5. /*反向第一个：:nth-last-of-type(1)的语法糖：last-of-type*/
  6. ul li:last-of-type {
  7. background-color: violet;
  8. }

2.3.6 选择独生子对象：

  1. ul li:only-of-type {
  2. background-color: violet;
  3. }

2.3.6 选择嵌套的对象：

  1. /*选择最后一个ul的第一个li对象*/
  2. ul:last-of-type li:first-of-type {
  3. background-color: violet;
  4. }

伪类选择器小结 :nth-of-type(an+b)这是最核心的一个选择器,其它的相关选择器都是它的语法糖

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