search

博客列表 ># 关于CSS的引入方式及选择器概述

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

我是贝壳
我是贝壳原创
2020年12月20日 10:36:57557浏览

关于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)这是最核心的一个选择器,其它的相关选择器都是它的语法糖

上一条：box-sizing属性及元素居中方式下一条：box-sizing属性、元素居中方式实例演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多