选择器

基础选择器

标签选择器

标签选择器可以把一类标签全部选择出来，能快速为同类标签统一设置样式，但是无法做出差异化设置。

<style>

    div {

        color: green;

    }

</style>

<body>

    <div>

        标签选择器

    </div>

</body>

类选择器

可以给需要修改样式的标签指定class值，通过类选择器将其选择出来，进行样式修改

<style>

    .header {

        color: green;

    }

</style>

<body>

    <div class="header">

        类选择器

    </div>

</body>

类选择器可以进行多类名使用，多类名在标签以空格隔开

<style>

    .header {

        color: green;

    }

    .box {

        width:400;

    }

</style>

<body>

    <div class="header box">

        类选择器

    </div>

</body>

id选择器

通过给标签指定id来，进行选择，与类选择器有相似处，但是id选择器只能选择一次，不能被选择第二次，是一次性的。

<style>

    #box {

        width:400;

    }

</style>

<body>

    <div id="box">

        id选择器

    </div>

</body>

通配符选择器

选取页面中的所有元素标签。

<style>

    * {

        color: red;

    }

</style>

复合选择器

复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成的。

后代选择器

选择外层标签里面的所有内层标签。外层标签写在前面，内层标签写在后面，以空格隔开。

<style>

    .header p {

        color: green;

    }

</style>

<body>

    <div class="header">

        <p>

            后代选择器

        </p>

    </div>

</body>

子选择器

只选择作为某元素下一级的元素，不可跨级选择, 使用>连接。

<style>

    .header > p {

        color: green;

    }

</style>

<body>

    <div class="header">

        <p>

            子选择器

        </p>

    </div>

</body>

并集选择器

同时选择不同的标签，使用,隔开。

<style>

    .header,p,h1 {

        color: green;

    }

</style>

<body>

    <div class="header">

        <p>

            并集选择器

        </p>

        <h1>

            并集选择器

        </h1>

    </div>

</body>

伪类选择器

向某些标签添加特殊效果，比如给链接添加特殊效果。

伪类选择器具有使用顺序否为无效，link>visited>hover>active

<style>

    /* 未点击的链接 */

    a:link {

        color: green;

    }

     /* 访问过的链接 */

    a:visited {

    }

     /* 鼠标经过的链接 */

    a:hover {

    }

     /* 鼠标正在按下还没有抬起的链接 */

    a:active {

    }

     /* 获取到焦点的表单元素 */

    input:focus {

		background-color:yellow;

    }

</style>

<body>

    <a>伪类选择器</a>

    <input type="text">

    <input type="text">

</body>

CSS的几种选择器的更多相关文章

  1. [No000016A]CSS常用三种选择器

    1.HTML Tag p{color:red;} 2.id #myid{color:red;} 3.class .myclass{color:red;} CSS常用文本样式属性 color font- ...

  2. CSS基础语法(二) CSS的9种选择器

    样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性 .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元素 #id值{ … }  3.标签选择器 ...

  3. 大家好，又是新的一天。今天给大家带来一些新的知识：选择器的种类和css的三种样式

    今天我们为大家 选择了 六种 选择器: 1. 标签选择器 2.id选择器 3.class选择器 4.后代选择器 5.子代选择器 6.交集选择器 我们就举三个典型的例子:后代选择器,子代选择器和交集选择 ...

  4. CSS 常见的8种选择器 和 文本溢出问题

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...

  5. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  6. css四种选择器总结

    css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重.   做 ...

  7. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  8. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

  9. 理解CSS中的三种选择器>+~

    1. p~ul p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 E+F            相邻兄弟选择器.选择匹配F的元素,且该元素位于 ...

随机推荐

  1. python pymysql连接数据库并创建表

    之前看菜鸟教程 #!/usr/bin/python3 import pymysql # 打开数据库连接 db = pymysql.connect("localhost"," ...

  2. 移动端input输入框把页面顶起, 收起键盘页面复原不了问题

    我相信大家平时也会遇到这种问题, 移动端 input 或者 textarea获取光标, 整个页面被顶起来, 键盘收起, 页面不复原的问题 ====>>>>  我这边提供两种解决 ...

  3. LeetCode 剑指 Offer 22. 链表中倒数第k个节点

    剑指 Offer 22. 链表中倒数第k个节点 题意 输入一个链表,输出该链表中倒数第k个节点.为了符合大多数人的习惯,本题从1开始计数,即链表的尾节点是倒数第1个节点. ​ 例如,一个链表有 6 个 ...

  4. 创建可以运行宿主机GPU的容器

    1.安装NVIDIA Container Runtime apt-get参考https://blog.csdn.net/li_ellin/article/details/107180516 yum参考 ...

  5. SpringMVC-开启静态资源访问权限

    1.配置 <mvc:resources mapping="/js/**" location="/js/"/> mapping:代表js目录下的所有文 ...

  6. JavaWeb入门day9-随笔（session/cookie）

    会话 一个网站怎么证明用户访问过 服务端给客户端一个信件,客户端下次访问服务端带上信件就可以:cookie 服务器登记,下次访问匹配:session 保存会话的技术 cookie 客户端技术(响应.请 ...

  7. Rust如何开发eBPF应用(一)？

    前言 eBPF是一项革命性的技术,可以在Linux内核中运行沙盒程序,而无需重新编译内核或加载内核模块.它能够在许多内核 hook 点安全地执行字节码,主要应用在云原生网络.安全.跟踪监控等方面. e ...

  8. Go 语言 结构体链表

    @ 目录 1. 什么是链表 2. 单项链表的基本操作 3. 使用 struct 定义单链表 4. 尾部添加节点 5. 头部插入节点 6. 指定节点后添加新节点 7. 删除节点 1. 什么是链表 链表是 ...

  9. VSCode 前端常用插件集合

    Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱. 但工欲善其事必先利其器,以下是本人为前端开发收集的常用的vs ...

  10. SMTP协议解读以及如何使用SMTP协议发送电子邮件

    电子邮件协议中POP3协议用于接收邮件,SMTP协议用于发送邮件.SMTP的全称为Simple Mail Transfer Protocol,也就是简单邮件传输协议,字如其名.   相较于POP3而言 ...