选择器

基础选择器

标签选择器

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

<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. Java/C++实现策略模式---旅游出行方式

    旅游的出行方式有乘坐飞机旅行.乘火车旅行和自行车游,不同的旅游方式有不同的实现过程,客户可以根据自己的需要选择一种合适的旅行方式. 类图: Java代码: public class Person { ...

  2. Spark入门之环境搭建

    本教程是虚拟机搭建Spark环境和用idea编写脚本 一.前提准备 需要已经有搭建好的虚拟机环境,具体见教程大数据学习之路又之从小白到用sqoop导出数据 - 我试试这个昵称好使不 - 博客园 (cn ...

  3. ccf201912-1 报数 C++代码实现

    代码实现: #include<iostream> using namespace std; /*题目限制为三位数*/ /*思路: 1.用一个长度为4的数组(初值为0)保存每个人分别跳过了几 ...

  4. jdbc连接数据库以及简单实现（普通JDBC方法实现和连接池方式实现）

    @ 目录 总结内容 1. 基本概念 jdbc的概念 2. 数据库连接 数据库的连接 DAO层思想 重构设计 3. 事务 概念 事务的ACID属性 事务的操作 4. 连接池 为什么要使用连接池 连接池分 ...

  5. 如何在 Java 中实现无向环和有向环的检测

    无向环 一个含有环的无向图如下所示,其中有两个环,分别是 0-2-1-0 和 2-3-4-2: 要检测无向图中的环,可以使用深度优先搜索.假设从顶点 0 出发,再走到相邻的顶点 2,接着走到顶点 2 ...

  6. rancher 添加集群

    用rancher的管理账户登录rancher控制台首先创建用户 jinzs,后面用户绑定到要添加的集群上的 其次点全局,出现集群列表 >点添加集群 这里集群名称任意,只要你知道,该名称要对应实际 ...

  7. mysql发展历程 各分支版本溯源

    首先为什么要了解mysql的历史,了解一个软件的前生后世有时候还是很有必要,特别是对于走在架构之路或者是想深入了解一个软件的时候,在不同版本中由于进行了很多的改进或者说加入了新的功能,也有可能是软件本 ...

  8. css 实现球里装水

    <template> <div class="container">     <div class="wave"></ ...

  9. 2021.11.09 P3435 [POI2006]OKR-Periods of Words（KMP)

    2021.11.09 P3435 [POI2006]OKR-Periods of Words(KMP) https://www.luogu.com.cn/problem/P3435 题意: 对于一个仅 ...

  10. struts2绕过waf读写文件及另类方式执行命令

    之前碰到过好几次Struts2,还都是016,项目.众测都遇到过,每次都只是证明了一下存在,由于waf的存在,没有深入去利用,这里简单的记录下. 0x01 背景 xray或者Struts2漏扫可以扫到 ...