首页 > 博客列表 > 前端简单选择器、上下文选择器和伪类选择器

博主信息

博文 53

粉丝 3

访问量 58899

专题推荐

更多>

0615作业

一、举例演示简单选择器，上下文选择器

1.简单选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择器: 简单选择器</title>
    <style>
      .day {
        font-size: 2rem;
        background-color: lightskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 简单选择器 */
      /* 元素选择器: 标签选择器 */
      body {
        background-color: lightcyan;
      }
      /* 类选择器: 通过class属性定位 */
      .day {
        border: 1px solid #000;
      }
      /* id选择器 */
      #first {
        background-color: lightpink;
      }
      /* * :属于元素级别
      元素 < class < id */
      /* id,class可以添加到任何元素上，所以可以省略 */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="day" id="first">星期一</div>
      <div class="day">星期二</div>
      <div class="day">星期三</div>
      <div class="day">星期四</div>
      <div class="day">星期五</div>
      <div class="day">星期六</div>
      <div class="day">星期日</div>
    </div>
  </body>
</html>

简单选择器

2.上下文选择器

后代选择器效果:

    /* 后代选择器: 空格 */
    body div {
      border: 5px solid coral;
    }

父子选择器效果：

    /* 父子选择器: > */
    body > div {
      border: 5px solid coral;
    }

父子选择器

同级相邻选择器效果：

/* 同级相邻选择器 */
    .day.friday + .day {
      background-color: lightgreen;
    }

同级相邻

同级所有选择器效果

   /* 4. 同级所有选择器 */
    .day.friday ~ .day {
      background-color: lightsalmon;
    }

同级所有

二、举例演示结构伪类选择器（不分组与分组）

1.结构伪类选择器（不分组)练习

      /* 匹配第一个子元素 */
      .container > :first-child {
        /*子元素直接指定，精确控制>:first-child，不要用空格，即便用了，first-child也只能取到子元素，但是代码不清晰*/
         background-color: red; 
      }
            /* 最后一个子元素 */
      .container > :last-child {
         background-color: violet; 
      }
            /* 选第3个: 索引是从1开始 */
      .container > :nth-child(3) {
         background-color: yellow; 
      }

不分组1

隔行（奇/偶）

      /* 偶数用even表示 */
      .container > :nth-child(even) {
         background-color: limegreen; 
      }
      /* 奇数: odd */
      .container > :nth-child(odd) {
         background-color: salmon; 
      }

从前往后数取2个，从后往前数取2个,倒数取第3个

      /* 只取前三个 */
      .container .day:nth-child(-n + 2) {
        background-color: red;
      }
      /* -0 + 3 = 3
      -1 + 3 = 2
      -2 + 3 = 1  序号为0就跳出不再取*/
      /* 只取最后三个 */
      .container .day:nth-last-child(-n + 2) {
        background-color: blue;
      }
      /* 取倒数第3个，用倒数的方式更直观 */
      .container .day:nth-last-child(3) {
        background-color: yellow;
      }

2.结构伪类选择器（分组)练习

html代码

 <body>
    <div class="container">
      <div class="day">星期一</div>
      <div class="day">星期二</div>
      <div class="day">星期三</div>
      <span class="day">星期四</span>
      <span class="day">星期五</span>
      <span class="day">星期六</span>
      <span class="day">星期日</span>
    </div>
  </body>

css代码

   <style>
      .day{
        font-size: 2rem;
        background-color: lightskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 分组结构伪类分二步：
      1. 元素按类型进行分组
      2. 在分组中根据索引进行选择 */
      .container div:first-of-type {
        background-color: red;
      }
      /* 在分组中匹配任何一个 */
      .container span:nth-of-type(2) {
        background-color: violet;
      }
      /* 前2个 */
      .container span:nth-of-type(-n + 2) {
        background-color: yellow;
      }
      /* div最后2个,实际效果并非星期六、日，而是二三 */
      .container div:nth-last-of-type(-n + 2) {
        background-color: green;
      }
    </style>

三、举例演示:target, :not, :before, :after, :focus

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类与伪元素</title>
    <style>
      #login-form {
        display: none;
      }
      /* :target: 必须id配合，实现锚点操作 */
      /* 当前#login-form的表单元素被a的锚点激活的时候执行 */
      #login-form:target {
        display: block;
      }
      /* :focus: 当获取焦点的时候执行，改变样式 */
      input:focus {
        background-color: yellow;
      }
      /* ::selection: 设置选中文本的前景色与背景色 */
      input::selection {
        color: white;
        background-color: blue;
      }
      /* :not(): 用于选择不满足条件元素 */
      .list > :not(:nth-of-type(2)) {
        color: red;
      }
      /* ::before  这里在内容就没有出现在HTML中，而是由浏览器加载样式后生成的*/
      .list::before {
        content: "我的地址管理";
        color: blue;
        font-size: 1.5rem;
        border-bottom: 1px solid #000;
      }
      /* ::after  这里在内容就没有出现在HTML中，而是由浏览器加载样式后生成的*/
      .list::after {
        content: "验证码发送中...";
        color: green;
        font-size: 1.1rem;
      }
      /* 伪元素前面是双冒号， 伪类前能是单冒号 */
    </style>
  </head>
  <body>
    <!-- <a href="#login-form">我要登录:</a> -->
    <button onclick="location='#login-form'">点击登录</button>
    <!-- 把按钮变成锚点，通过点击事件跳转绑定 -->
    <form action="" method="post" id="login-form">
      <label for="email">邮箱:</label>
      <input type="email" name="email" id="email" />
      <label for="password">密码:</label>
      <input type="password" name="password" id="password" />
      <button>登录</button>
    </form>
    <hr />
    <ul class="list">
      <li>地址1</li>
      <li>地址2</li>
      <li>地址3</li>
      <li>地址4</li>
      <li>地址5</li>
    </ul>
  </body>
</html>

伪元素

课堂复习心得小结

1.简单选择器

序号	简单选择器名称	特征	示例写法
1	元素选择器/标签选择器	通过标签定位	元素名称。如 body {}或者ul {}
2	类选择器	对应html标签中的class属性定位	以.点开头。如 .item
3	id选择器	通过对应的id名称定位	以#开头加id名称。如 #idname
4	多个类可以复合使用	多个类的元素定位，两个类名要连起来中间无空格	.item.nav {background-color:red;}

2.上下文选择器

序号	上下文选择器名称	特征	示例写法
1	后代选择器	父元素下的所有后代均生效	祖先元素空格后代元素。如 .container div {}
2	父子选择器	父子关系，不含孙子辈	以>大于号表示。如 body>div{}
3	同级相邻/兄弟选择器	往下找一个同级元素，注意是向下仅找一个就停止了	以+连接。如 .item + .center
4	同级所有选择器	往下找全部同级元素，注意是向下找，找弟弟妹妹	以~波浪线连接。如.item.nav ~.item {}

3.结构伪类选择器（不分组）

序号	结构选择器名称	特征	示例写法
1	匹配第一个子元素	不分组	父元素：first-child
2	匹配最后的子元素	不分组	父元素 >：last-child
3	选第n个	不分组	父元素>：nth-child（n）
4	只选偶数/奇数	不分组	父元素>：nth-child（even/odd），应用场景：表格隔行变色
5	从指定位置(从第n个开始)，选择剩下的所有元素	不分组	.day:nth-child(n + 4)
6	从前往后数连续取n个	不分组	:nth-child(-n + 3)
7	从后往前数连续取n个	不分组	:nth-last-child(-n + 2)
8	倒数取第n个（不连续）	不分组	:nth-last-child(2)

4.结构伪类选择器（分组）

序号	结构选择器名称	特征	示例写法
1	匹配第一个子元素	分组	组别:first-of-type
2	匹配最后的子元素	分组	组别:last-of-type
3	在分组中匹配任何一个	分组	组别:nth-of-type(n)
4	从前往后连续k个	分组	组别:nth-of-type(-n + k)
5	从后往前连续k个	分组	组别：nth-last-of-type(-n + k)
6	倒数取第n个（不连续）	分组	组别：nth-last-of-type(n)

如果不指定具体父元素，就是从html开始，按文件流递归查询符合条件的元素变更式样，哪怕是meta这些设置都无效的元素也会带上样式属性。建议设置指定具体父元素，在具体父元素上调用，防止递归

注意：-n开头就是从0计算。其余从1开始计算。公式中，n必须写在前面，如nth-child(n + 4)不可以写成nth-child(4 + n）否则不生效

5.伪类与伪元素

序号	伪类/伪元素	特征	示例写法
1	：target	必须与id配合，实现锚点操作	#login-form:target {display: block;}
2	:focus	当获取焦点时执行改变样式	input:focus { background-color: yellow;}
3	::selection	只允许设置选中文本的前景色和背景色	input::selection {color: white;background-color: red;}
4	:not	用于选择不满足条件的元素	.list > :not(:nth-of-type(3)) {color: red;}
5	::before	所谓伪元素就是指页面中部存在而浏览器中存在的元素	.list::before {content: “我的地址管理”;color: blue;}
6	::after	伪元素，可用于页脚等	.list::after {content: “验证码发送中…”;}

伪元素前面是双冒号：：而伪类前面是单冒号：

6.注意事项

优先级：元素 < class < id

id,class可以添加到任何元素上，所以可以省略, 属于元素级别,有限定的情况下如.item#first优先级大于没有限定的#first（相当于*#first）,因为class优先于元素标签级别。
层叠样式表，相同元素，后面追加的样式会覆盖前面的样式
所谓伪元素就是指页面中部存在而浏览器中存在的元素。
：target 必须与id配合，实现锚点操作
伪类与伪元素可以实现以往一些js的功能

批改老师：

WJ

批改状态：合格

老师批语：写的非常不错，格式也很整齐！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML常用标签及实例-前端第九期线上班

2019-10-30 22:16:29