search

博客列表 >css选择器/伪类/伪元素介绍

css选择器/伪类/伪元素介绍

邱世家的博客
邱世家的博客原创
2020年06月17日 09:41:43897浏览

基本选择器

标签(元素)选择器 用标签名定义
类(class)选择器 用”.”表示
id选择器 用”#”表示
后代选择器 用空格
子选择器 用>表示
兄弟相邻选择器 用+或者~表示
下面是+~的解释
+ 只能选择紧挨着的下一个兄弟元素
~ 选择剩下所有的兄弟元素
  • 用九宫格来演示
    1. <body>
    2.   <div class="container">
    3.     <div class="item" id="first">1</div>
    4.     <div class="item">2</div>
    5.     <div class="item">3</div>
    6.     <div class="item">4</div>
    7.     <div class="item center">5</div>
    8.     <div class="item">6</div>
    9.     <div class="item">7</div>
    10.     <div class="item">8</div>
    11.     <div class="item">9</div>
    12.   </div>
    13. </body>
  1. <style>
  2. /*元素/标签选择器 直接用元素/标签名来表示*/
  3. body {
  4.         background-color: coral;
  5.       }
  6. /* 类选择器：对应着html标签中的class属性 用.来表示*/
  7. .item {
  8.         border: 2px solid #000;
  9.       }
  10. /* id选择器 用#id名表示*/
  11. #first {
  12.         background-color: green;
  13.       }
  14. </style>

  1. <style>
  2. body {
  3.         background-color: coral;
  4.       }
  5. .container {
  6.         background-color: crimson;
  7.       }
  8. /* 层叠样式表，相同元素后面追加的样式会覆盖前面的样式，所以1号格子变黄 */
  9. #first {
  10.         background-color: green;
  11.       }
  12. #first {
  13.         background-color: yellow;
  14.       }
  15. /* 前面有类样式的id选择器优先级 > 没有限定的id样式 1
  16.         没有限定的id样式前面默认是个*号可以省略不写
  17.         而*号属于元素级别。也就是id>clss > 标签(元素)
  18. 也就是1号格子先黄色在灰色最后紫色*/
  19. .item#first {
  20.         background-color: gray;
  21.       }
  22. #first.item {
  23.         background-color: rebeccapurple;
  24.       }
  25. /* 多个类复合应用用".类名.类名" ..中间不能用空格*/
  26. .item.center {
  27.         background-color: lightgreen;
  28.       }
  30. </style>

后代选择器 （用于选择指定标签元素下的后辈元素）

  1.     <style>
  2.       /* 后代选择器 给body下面的所有的div都会添加下边框*/
  3.       body div {
  4.         border-bottom: 2px solid red;
  5.       }
  6.       }
  7.     </style>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item"">1</div>
  12.       <div class="item">2</div>
  13.       <div class="item">3</div>
  14.       <div class="item">4</div>
  15.       <div class="item center">5</div>
  16.       <div class="item">6</div>
  17.       <div class="item">7</div>
  18.       <div class="item">8</div>
  19.       <div class="item">9</div>
  20.     </div>
  21.   </body>

子选择器(父代选择器)（选择指定标签元素的第一代子元素）

  1. /* 子选择器(父代选择器)
  2.       只会给body的儿子container这个div添加边框
  3.       而孙子辈.item则没有任何样式 */
  4. body > div
  5.           border: 5px solid yellowgreen;
  6.       }

兄弟选择器 (+)

  1. /* 同级相邻 用+号选择五号单元格旁边的6号 */
  2.       .item.center + .item {
  3.         background-color: hotpink;
  4.       }

兄弟选择器（~）

  1. /* 同级所有用~号选择5号单元格后面所有的单元格 */
  2.       .item.center ~ .item {
  3.         background-color: brown;
  4.       }

结构伪类选择器(不分组不区分元素类型)

选择器 功能描述
:first-child 选择父元素的第一个子元素
:last-child 选择父元素的倒数第一个子元素
:nth-child(n) 选择父元素的第n个子元素,n从1开始计算
:nth-last-child(n) 选择父元素的倒数第n个子元素n从1开始计算
  • 结构伪类选择器很容易遭到误解，需要特别强调。如，p:first-child表示选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。
    1. /* 选择第一个 */
    2.     .container > :first-child {
    3.       background-color: yellowgreen;
    4.     }
    5. /* 选择最后一个 */
    6.     .container > :last-child {
    7.       background-color: yellowgreen;
    8.     }
    9. /* 选择第七个 */
    10.     .container > :nth-child(7) {
    11.       background-color: green;
    12.     }
    13. /* 选择倒数第二个 */
    14.     .container > :nth-last-child(2) {
    15.       background-color: red;
    16.     }
  1. /* 选择偶数用深蓝色 */
  2.       .container > :nth-child(even) {
  3.         background-color: blue;
  4.       }
  5. /* 选择奇数用橙色 */
  6.       .container > :nth-child(odd) {
  7.         background-color: coral;
  8.       }

  1.  /* 从指定位置开始，选择剩下的所有,n+3代表从第三个开始
  2.         (n出现在表达中从0开始计算)*/
  3.       .container > .item:nth-child(n + 3) {
  4.         background-color: gold;
  5.       }
  6.  /* 只取前三个 */
  7.       .container > .item:nth-child(-n + 3) {
  8.         background-color: gray;
  9.       }
  10. /* 只取后两个 */
  11.       .container > .item:nth-last-child(-n + 2) {
  12.         background-color: gray;
  13.       }

结构伪类选择器(分组)

选择器 功能描述
:last-of-type 用作选择同种标签的倒数第一个元素
:nth-of-type(3) 匹配同类型中的第n个同级兄弟元素 
  1. /* 分组结构伪类分两步
  2.    第一元素按照类型分组
  3.    在分组中根据索引尽心选择 
  4.    选择倒数第一个div所以三号单元格变绿*/
  5.   .container div:last-of-type {
  6.         background-color: lawngreen;
  7.       }
  8.       /* 在分组中匹配任何一个
  9. span:nth-of-type(3)选span类型中的第三个，六号单元格变红*/
  10.       .container span:nth-of-type(3) {
  11.         background-color: red;
  12.       }
  13.       /* 分组中匹配前两个个 */
  14.       .container div:nth-of-type(-n + 2) {
  15.         background-color: red;
  16.       }
  17.       /* 分组中最后两个 */
  18.       .container span:nth-last-of-type(-n + 2) {
  19.         background-color: blue;
  20.       }
  22. <body>
  23.     <div class="container">
  24.       <div class="item">1</div>
  25.       <div class="item">2</div>
  26.       <div class="item">3</div>
  27.       <span class="item">4</span>
  28.       <span class="item">5</span>
  29.       <span class="item">6</span>
  30.       <span class="item">7</span>
  31.       <span class="item">8</span>
  32.       <span class="item">9</span>
  33.     </div>
  34.   </body>

伪类(前面：)与伪元素(前面：：)

伪类 伪元素 作用
:target ：target必须和id配合实现锚点操作
:focus :focus 当获取焦点的时候
:not() 用于选择不满足条件的元素
::selection 只用于设置选中文本时候的前景色与背景色
::before 在什么什么之前生成，无法被鼠标选中
::after 在什么什么之后生成，无法被鼠标选中 
  1. <style>
  2.       #login-form {
  3.         display: none;
  4.       }
  5.       /* 当前#login-form的表单元素被a的锚点激活的时候执行 */
  6.       #login-form:target {
  7.         display: block;
  8.       }
  9.       /* :focus 当获取焦点的时候 */
  10.       input:focus {
  11.         background-color: aqua;
  12.       }
  13.       /* ::selection 设置选中文本时候的前景色与背景色 */
  14.       input::selection {
  15.         color: coral;
  16.         background-color: rebeccapurple;
  17.       }
  18.       /* :not() 用于选择不满足条件的元素 */
  19.       .list > :not(:nth-of-type(3)) {
  20.         color: green;
  21.       }
  22.       /* ::before 在list之前生成购物车 */
  23.       .list::before {
  24.         content: "购物车";
  25.         color: greenyellow;
  26.         font-size: 1.5rem;
  27.         border-bottom: 2px solid #000;
  28.       }
  29.       /* ::after 在list之后生成结算中... */
  30.       .list::after {
  31.         content: "结算中...";
  32.         color: brown;
  33.         font-size: 1.2rem;
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <!-- <a href="#login-form">我要登录</a> -->
  39.     <button onclick="location='#login-form'">登录</button>
  40.     <form action="" method="post" id="login-form">
  41.       <label for="email">邮箱:</label>
  42.       <input type="email" name="email" id="email" />
  43.       <label for="password">密码:</label>
  44.       <input type="password" name="password" id="password" />
  45.       <button>登录</button>
  46.     </form>
  47.     <hr />
  48.     <ul class="list">
  49.       <li>item1</li>
  50.       <li>item2</li>
  51.       <li>item3</li>
  52.       <li>item4</li>
  53.     </ul>
  54.   </body>

-总结：
对于css选择器，有了全新理解。但是不是很熟练，需要加强练习。

  • 疑问：
    :nth-last-child(-n + 2)——-（）中代表表达式，当代表表达式时n从0开始计算
    :nthchild(n)——（）中的n现在代表子元素，从1开始计数
    这么想对不对
上一条：酱茄社区论坛小程序pro新增V认证和发帖权限功能以及开源版源码下载下一条：css选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多