首页 > 博客列表 > CSS 选择器、伪类与伪元素

博主信息

博文 30

粉丝 0

访问量 37808

专题推荐

更多>

CSS 选择器、伪类与伪元素

CSS 简单选择器

元素选择器根据标签设定样式
类选择器根据类名称设定样式
id 选择器根据 id 名称设定样式

示例代码

<body>
  <p>元素选择器</p>
  <p class="class-p">类选择器</p>
  <p id="id-p">id选择器</p>
</body>

<style>
  p {
    color: aqua;
  }
  .class-p {
    color: blue;
  }
  #id-p {
    color: brown;
  }
</style>

运行结果

总结

简单选择器会存在覆盖现象后面覆盖前面优先级高覆盖优先级低的
例如同样都是 p 标签，带 class 与 id 的都会被新的样式覆盖

CSS 上下文选择器

后代选择器以空格分开标签前面标签为祖先后面标签为需要设定样式的标签
父子选择器以>分开标签
同级相邻选择器以+分开标签设定两个相邻标签的后面一个标签的样式
同级所有选择器以~分开标签设定前面一个标签之后的所有后面标签的样式

示例代码

<body>
  <h2><strong>后代选择器</strong>--父子选择器</h2>
  <p><strong>同级相邻</strong>选择器</p>
  <h3>同级所有选择器</h3>
  <p><strong>同级所有</strong>选择器</p>
  <span>同级所有测试</span>
  <p><strong>同级所有</strong>选择器</p>
</body>

<style>
  h2 strong {
    color: aqua;
  }
  body > h2 {
    color: blueviolet;
  }
  h2 + p {
    color: brown;
  }
  h3 ~ p {
    color: coral;
  }
</style>

运行结果

CSS 结构伪类选择器：不分组

:first-child
:last-child
:nth-child(n)
:nth-last-child(n)

示例代码

<body>
  <div class="div1">
    <h2>匹配第一个子元素</h2>
    <p>匹配第二个子元素</p>
    <p>匹配倒数第二个子元素</p>
    <p>匹配最后一个子元素</p>
  </div>
  <div class="div2">
    <p>匹配奇偶元素</p>
    <p>匹配奇偶元素</p>
    <p>匹配奇偶元素</p>
    <p>匹配奇偶元素</p>
  </div>
  <div class="div3">
    <p>匹配指定位置</p>
    <p>匹配指定位置</p>
    <p>匹配指定位置</p>
    <p>匹配指定位置</p>
    <p>匹配指定位置</p>
    <p>匹配指定位置</p>
  </div>
</body>

<style>
  .div1 > :first-child {
    color: coral;
  }
  .div1 > :nth-child(2) {
    color: cornflowerblue;
  }
  .div1 > :nth-last-child(2) {
    color: chartreuse;
  }
  .div1 > :last-child {
    color: crimson;
  }
  .div2 > :nth-child(2n) {
    color: darkblue;
  }
  .div2 > :nth-child(2n-1) {
    color: darkcyan;
  }
  .div3 > :nth-child(n + 4) {
    color: lightblue;
  }
  .div3 > :nth-child(-n + 2) {
    color: lightcoral;
  }
</style>

运行结果

CSS 结构伪类选择器：分组

元素按类型进行分组
分组后按索引进行选择
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)

示例代码

<body>
  <div class="div3">
    <span>分组结构伪类测试</span>
    <p>分组结构伪类第一个</p>
    <p>分组结构伪类</p>
    <p>分组结构伪类第三个</p>
    <span>分组结构伪类测试</span>
    <p>分组结构伪类</p>
    <p>分组结构伪类倒数第二个</p>
    <p>分组结构伪类最后一个</p>
    <span>分组结构伪类测试</span>
  </div>
</body>

<style>
  .div3 p:first-of-type {
    color: blue;
  }
  .div3 p:last-of-type {
    color: blueviolet;
  }
  .div3 p:nth-of-type(3) {
    color: brown;
  }
  .div3 p:nth-last-of-type(2) {
    color: lightcoral;
  }
</style>

运行结果

CSS 伪类

:target
:focus
::selection

示例代码

<body>
  <a href="#login-form">登录</a>
  <form id="login-form">用户名<input type="text" /></form>
</body>

<style>
  form {
    display: none;
  }
  #login-form:target {
    display: block;
  }
  input:focus {
    color: red;
    background-color: yellow;
  }
  input::selection {
    color: white;
    background-color: black;
  }
</style>

运行结果

CSS 伪元素

:not()
::before
::after

示例代码

<body>
  <div class="list">
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      <li>列表项4</li>
    </ul>
  </div>
</body>

<style>
  ul > :not(:nth-child(2)) {
    background-color: seagreen;
  }
  .list > ::before {
    content: "下面是列表";
  }
  .list > ::after {
    content: "上面是列表";
  }
</style>

运行结果

批改老师：

WJ

批改状态：合格

老师批语：写的不错，很详细！

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

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

0条评论

作者最新博文

VSCode与phpstudy的安装与配置

2020-06-10 23:52:55