search

博客列表 >CSS选择器

CSS选择器

培(信仰)
培(信仰)原创
2020年12月16日 21:40:03489浏览

css 的基本语法

任何元素如果想引入到html文档中，必须要使用一个适当的标签，css也不例外

通过style 标签引入的css规则，仅适用于当前的页面（html文档）
css：层叠样式表，用来设置页面中的元素的样式，布局 

  1.     h1 {
  2.             color:violet;
  3.             border: 1px solid #000;
  4.         }

h1: 选择器
{…}: 声明块，由一个或多个由分号隔开的样式声明构成
h1 + {…} 选择器 + 声明块 = 规则
声明由属性和值组成

使用CSS的三种方式

  1. 内部样式
    仅对当前文档的元素有效，使用style标签
    在页面style标签内直接写css

  2. 引入外部样式表/公共样式表/共享样式表

    • 在style标签里使用@import url(…);
      这种情况使用的不多，一般用在CSS的模块化编程

    • 使用link标签，更多的情况使用。
      在使用公共样式表后，某个元素不想使用公共的样式，可以设置自定义样式。通过 元素的style属性来设置

      适用于所有引入了这个css样式表的html文档，使用link。

  3. 元素的style属性设置样式
    通过style属性给指定元素自定义/定制样式

    行内样式：适用于当前页面中的指定元素，使用元素的style属性

  1. <style> 
  2.    /* 导入外部 */
  3.    @import url(css/style.css);
  4.    /* 等效 */
  5.    @import "css/footer.css";
  6. </style> 
  7. /*使用link标签*/
  8. <link rel="stylesheet" href="css/style.css">
  1. <h1 style="color:teal">css真的非常好玩</h1>

样式表的模块化

对于一个网站来说，许多页面的页眉和页脚是相同的，可以考虑将他们的样式剥离出来，实现模块化编程

  1. 将公共样式部分分离，并创建一些独立的样式表来保存它。
  2. 使用@import 指令将这些独立的公共样式表引入到指定的CSS文档或标签中

选择器

选择器1：简单选择器

标签选择器

  1. 标签选择器，返回一组

    属性选择器（class,id）

  2. 类选择器：返回一组(简化为 .)
  3. id 选择器：理论上返回一个。由开发者自行保证，浏览器不检查唯一性.（简化为 #）

选择器2：上下文选择器

  1. 后代选择器: 选择所有层级 (空格 ：所有层级)

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

  2. 子元素选择器：仅父子层级选中(> :父子级)

    1. body > ul > li {
    2.         background-color: teal;
    3.     }

  3. 同级相邻选择器：仅选中与之相邻的第一个兄弟元素(+ ：相邻的兄弟)

    1. .start + li {
    2.         background-color: lightgreen;
    3.     }

  4. 同级所有选择器：选中与之相邻的后面所有的元素(~ ：所有相邻兄弟)

    1. .start ~ li {
    2.         background-color: blue;
    3.     }

伪类选择器： 结构伪类，重点难点

语法

:nth-of-type(an+b)
an + b : an起点，b是偏移量
n = (0, 1, 2, 3, 4…)
注意n从0开始 ,:冒号要紧挨着前面的选择器，中间不能有空格

实例：

  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.     <ul>
  15.         <li>我是一个li</li>
  16.     </ul>
  17. </body>

有以上HTML

  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.         }
  1. 选择所有元素
  1. ul li:nth-of-type(1n) {
  2.             background-color: yellow;
  3.         } 
  4.         /* 如果只是为了全选，这样做没有意义了，还不如使用标签选择器，一旦带上偏移量就完全不同了。 */
  5.         /* 从第三个子元素开始，选中下面所有的元素 */
  6.  ul li:nth-of-type(1n+3) {
  7.             background-color:violet;
  8.         } 
  9.         /* 1乘以任何数都等于任何数，所以可以优化为 */
  10.  ul li:nth-of-type(n+3) {
  11.             background-color: violet;
  12.         }
  1. 选中最后的3个元素 
  1.         ul li:nth-of-type(n+8) {
  2.             background-color: violet;
  3.         }
  1. 反向选中 
    1.  还可以通过反向选中，不用关注元素的个数
    2.  语法： :nth-last-of-type(an+b) 
    3.  始终选中后三个
  1. ul li:nth-last-of-type(-n+3){
  2.             background-color: violet;
  3.         } 
  5. /*选中倒数第三个 */
  6.         ul li:nth-last-of-type(3){
  7.             background-color: violet;
  8.         }
  1. 选择所有索引为偶数的子元素 
  1. ul li:nth-of-type(2n) {
  2.             background-color: violet;
  3.         } 
  5.  /* 关键字 */
  6. ul li:nth-of-type(even) {
  7.             background-color: violet;
  8.         }
  1. 选择所有索引为奇数的子元素 2n-1 ,2n+1 一样，因为n是0开始
  1. ul li:nth-of-type(2n+1){
  2.             background-color: yellow;
  3.         } 
  4. /* 关键字 */
  5. ul li:nth-of-type(odd){
  6.             background-color: yellowgreen;
  7.         }
  1. 一些特殊情况，快捷方式 ，语法糖
  1.         /* 选择第一个子元素 */
  2.          ul li:first-of-type{
  3.             background-color: violet;
  4.         } 
  5.         /* 选择最后一个子元素 */
  6.         ul li:last-of-type{
  7.             background-color: violet;
  8.         } 
  9.         /* :nth-of-type(an+b)最核心的选择器，其他相关选择器都是他的语法糖，马甲，特殊应用场景 */
  10.         /* 我想选中第二个ul中的li */
  11.         ul:last-of-type li:first-of-type{
  12.             background-color: violet;
  13.         } 
  14.         /* 还有更优雅的方式选中 */
  16.         /* 只想匹配父元素的唯一子元素 */
  17.         ul li:only-of-type{
  18.             background-color: yellow;
  19.         }
上一条：伪类选择器：状态匹配及元素属性缩写等下一条：html标签（内联框架元素iframe）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多