css选择器 - php学习作业 - php中文网博客

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > css选择器

博主信息

博文 17

粉丝 0

访问量 25465

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

css选择器

嘬一口啊

原创

860人浏览过

简单选择器

选择器的优先级

ID选择器 > class选择器 > 元素(标签)选择器

元素选择器(标签选择器):

以元素或标签作为选择器

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
        body {
               background-color: lightcyan;
          }
    </style>
</head>
<body>
</body>
</html>

类选择器:

类选择器: 对应着html标签中的class属性

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
          .div_class {
              background:red;
          }
    </style>
</head>
<body>
    <div class="div_class">这是div_class</div>
</body>
</html>

id选择器:

id选择器对应着html中id属性

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
          #div_id {
              color:green;
          }
    </style>
</head>
<body>
    <div id="div_id">这是div_id</div>
</body>
</html>

多个类复合应用:

同一个元素下有多个属性选择器,在选择这个元素时可以复合使用,便于更进准的找到这个元素

注意:多个复合类选择器中间不能有空格一定要是连着:#div_di.div_class 中间有空格是多个选择器属性选中一个元素:#div_id .div_class(这是div_id下的div_class)

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
          #div_id.div_class {
              color:green;
          }
    </style>
</head>
<body>
    <div id="div_id" class="div_class">这是div_id和div_class复合使用</div>
</body>
</html>

层叠样式表:相同元素后面追加的样式会覆盖前面的样式

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
          #div_id.div_class {
              color:green;
          }
          //使用这个后面设置的元素
          #div_id.div_class {
              color:red;
          }
    </style>
</head>
<body>
    <div id="div_id" class="div_class">这是div_id和div_class复合使用</div>
</body>
</html>

上下文选择器

后代选择器

注意第一个参数和第二个参数中间一定要有一个空格

//选择.container 下的所有div记住是所有
.container div {
    color:red;
}

父子选择器


`父子选择器中间以 > 指向子类标签`
//选择body下的子类及别的div记住只是子类的div
body > div {
    color:red;
}

同级相邻选择器

同级相邻选择器以 + 隔开

//选中和当前类属性同级的相邻item类属性元素改变其背景颜色
.item.center + .item {
    background-color: red;
}

同级所有选择器

同级所有选择器以 ~ 隔开

//选中和.item.center同级的所有类属性名为item的元素改变其背景颜色
 .item.center ~ .item {
    background-color: lightsalmon;
}

结构伪类选择器

匹配第一个子元素

//选择.container 下的第一个子元素设置背景颜色
//这里的*可以省略不写
.container > *:first-child {
 `background-color: lightgreen;
}
//选择.container 下的.tem下的第一个子元素设置背景颜色
.container > .item:first-child {
    background-color: blue;
}

匹配最后一个子元素

//选择.container 下的最后一个子元素设置背景颜色
.container > :last-child {
    background-color: lightpink;
}

选择指定的第几个子元素

这里的索引是从1开始的

//选择.container下的第三个子元素
.container > :nth-child(3) {
     background-color: limegreen;
}

选择偶数

偶数用even表示

//选择.container下的所有索引为偶数的元素设置背景颜色
.container > :nth-child(even) {
    background-color: limegreen;
}
//这是另一种选择索引为偶数的元素(建议用上面的)
.container > :nth-child(2n) {
    background-color: limegreen;
}

选择奇数元素

奇数用odd表示

//选择.container下的所有索引为奇数的元素设置背景颜色
.container > :nth-child(odd) {
    background-color: salmon;
}
//这是另一种选择索引为奇数的元素(建议用上面的)
.container > :nth-child(2n-1) {
    background-color: lightsalmon;
}

从指定位置开始选择剩下的元素

// 选择.container下的item下的第四个子元素开始剩下的所有子元素
.container > .item:nth-child(n + 4) {
    background-color: limegreen;
}

只取前三个元素

// 选择.container下的item下的前三个子元素
.container .item:nth-child(-n + 3) {
    background-color: salmon;
}

只取最后三个元素

//选择.container下的item下的最后三个子元素
.container .item:nth-last-child(-n + 3) {
    background-color: salmon;
}

倒数查找指定的元素

//选择.container下的item下的倒数第二个子元素
.container .item:nth-last-child(2) {
    background-color: yellow;
}

分组结构伪类选择器

元素按类进行分组[相同的类名、相同标签分为一类]

// .container下的所有div设置背景颜色[container下的所有div为一类]
.container div {
    background-color:green;
}

元素按照类型进行分组,在分组中根据索引进行选择

//选择.container下的div分组的最后一个div元素
.container div:last-of-type {
    background-color: violet;
}
// 选择container下的span分株的第三个span元素
.container span:nth-of-type(3) {
    background-color: violet;
}
//选择container下的span分组下的前三个span标签元素
.container span:nth-of-type(-n + 3) {
    background-color: red;
}
//选择 container下的span分组的最后两个span标签元素
.container span:nth-last-of-type(-n + 2) {
    background-color: violet;
}

伪类于伪元素选择器

伪类前面可以是单冒号,伪元素前面必须是双冒号

伪类

:target伪类:用来匹配文档中uri中某个标志符的目标元素
具体来说，uri中的标志通常会包含一个#，后面带有一个标志符名称，如#login-form,:target就是匹配ID为"login-form"的目标元素
//获取这里的login-form
例:<a href="#login-form">点击</a>

:focus伪类:用来当获取焦点的时候起作用
例:
//当input标签获取焦点的时候获取焦点的input标签给变背景颜色
input:focus {
    background-color: yellow;
}

::selection伪类: 设置选中文本的前景色与背景色
例:
// input输入框里的文本被选中的时候个便便被选中的文本背景色
input::selection {
    color: white;
    background-color: red;
}

:not()伪类: 用于选择不满足条件元素(就是剔除一些不想要的元素)
例:
// 这里剔除了.lisi下的第三个子元素给剩余的子元素颜色改变
.list > :not(:nth-of-type(3)) {
    color: red;
 }

` 用伪类:target实现表单的弹出

:target: 必须id配合，实现锚点操作

<!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;
      }
    </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>
  </body>
</html>

伪元素

伪元素是浏览器自动生成的

伪元素不能被鼠标选中

::before 伪元素:在元素之前添加内or那个
例:
//在.list元素前添加内容"购物车"
.list::before {
    content: "购物车";
}

::after伪元素:在元素之后添加内容
例:
// 在.list元素后面添加内容"结算中..."
.list::after {
    content: "结算中...";
}

总结

简单选择器
上下文选择器
结构伪类选择器
伪类和伪元素

批改老师：

WJ

批改状态：合格

老师批语：总得来说写的非常不错，建议标题改一下，突出文章的重点。

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

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

0条评论

作者最新博文

Markdown、phpstudy的安装及配置

2020-06-11 19:50:59

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP学习

技术支持

返回顶部

登录PHP中文网，和优秀的人一起学习！

全站2000+教程免费学