基本选择器介绍

  • 基本选择器又分为六种使用方式：如、通用选择器、标签选择器、类选择器、Id选择器、结合元素选择器、多类选择器。
  • 基本选择器使用说明表。
选择器 语法格式 含义 举例
通用选择器 *{属性：值;} 通用选择器可以选择页面上的所有元素，并对它们应用样式，用 * 来表示。不建议使用，IE6不支持，给大型网站增加负担。 *{width: 300px;}
标签选择器 标签名{属性：值;} 标签选择器，匹配对应的HTML的标签。 h1{color: red;}
类选择器 .class属性值{属性：值;} 类选择器，给拥有指定的class属性值的元素设置样式。 .box{color: red;}
Id选择器 #id属性值{属性：值;} Id选择器，在一个 HTML 文档中，Id 选择器会使用一次，而且仅一次。Id选择器以#来定义。 #box{color: red;}
结合元素选择器 标签名 .class属性值{属性：值} 选择器会根据标签名中包含指定的.class属性值的元素。 p.box {color:red;}
多类选择器 .class属性值.class属性值{属性：值;} 通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。注意：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。 .box.box1{color:red;}

通用选择器

  • 接下来让我们进入通用选择器实践，笔者以嵌入式的形式，将HTML页面中的h1标签和p标签中的字体颜色设置为红色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>通用选择器</title>

    <style>

        *{

            color: red;

        }

    </style>

</head>

<body>

     <h1>微笑是最初的信仰</h1>

     <p>微笑是最初的信仰</p>

</body>

</html>

  • 结果图

标签选择器

  • 接下来让我们进入标签选择器实践，笔者以嵌入式的形式，将HTML页面中的h1标签和p标签中的字体颜色设置为红色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>标签选择器</title>

    <style>

        h1{

            color: red;

        }

    </style>

</head>

<body>

     <h1>微笑是最初的信仰</h1>

     <p>微笑是最初的信仰</p>

</body>

</html>

  • 结果图

  • 注意：标签选择器是指给指定的标签设置样式。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>标签选择器</title>

    <style>

        h1{

            color: red;

        }

    </style>

</head>

<body>

     <h1>成功不是击败别人，而是改变自己。</h1>

     <h1>微笑是最初的信仰</h1>

     <p>微笑是最初的信仰</p>

</body>

</html>

  • 结果图

  • 现在大家应该知道了p标签为什么没有改变了，因为标签选择器的作用是给指定的标签设置样式的，接下来笔者将p标签的字体颜色设置为红色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>标签选择器</title>

    <style>

        h1{

            color: red;

        }

        p{

            color:red;

        }

    </style>

</head>

<body>

     <h1>成功不是击败别人，而是改变自己。</h1>

     <h1>微笑是最初的信仰</h1>

     <p>微笑是最初的信仰</p>

</body>

</html>

  • 结果图

类选择器

  • 接下来让我们进入类选择器实践，笔者以嵌入式的形式，使用类的属性值为.box，来完成HTML页面中的h1标签和p标签中的字体颜色设置为红色。
  • 首先我们将HTML页面中的第一个h1标签字体颜色设置为红色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>类选择器</title>

    <style>

        .box{

            color:red;

        }

    </style>

</head>

<body>

     <h1 class="box">成功不是击败别人，而是改变自己。</h1>

     <h1>微笑是最初的信仰</h1>

     <p>微笑是最初的信仰</p>

</body>

</html>

  • 结果图

  • 注意：只要是class属性的值为.box的标签，不管它是什么标签，都会将字体颜色设置为红色，其余的CSS样式也是一致。

  • 现在我们将第二个h1标签和p标签字体颜色设置为红色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>类选择器</title>

    <style>

        .box{

            color:red;

        }

    </style>

</head>

<body>

     <h1 class="box">成功不是击败别人，而是改变自己。</h1>

     <h1 class="box">微笑是最初的信仰</h1>

     <p class="box">微笑是最初的信仰</p>

</body>

</html>

  • 结果图

Id选择器

  • 接下来让我们进入id选择器实践，笔者以嵌入式的形式，通过id属性值为#box，将HTML页面中的h1标签中的字体颜色设置为红色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>id选择器</title>

    <style>

        #box{

            color:red;

        }

    </style>

</head>

<body>

     <h1 id="box">成功不是击败别人，而是改变自己。</h1>

</body>

</html>

  • 结果图

  • 注意：使用id选择器是给拥有指定的id属性值来设置样式，但是要注意在一个HTML页面中id的属性值必须是唯一的。

结合元素选择器

  • 接下来让我们进入结合元素选择器实践，笔者以嵌入式的形式，通过h2标签class属性值为.box元素的字体颜色，设置为红色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>结合元素选择器</title>

    <style>

        h2.box{

            color:red;

        }

    </style>

</head>

<body>

     <h2 class="box">成功不是击败别人，而是改变自己。</h2>

     <span class="box">成功不是击败别人，而是改变自己。</span>

</body>

</html>

  • 结果图

  • 注意：结合元素选取器执行原理说明如下：首先是先找到h2标签，然后再去h2标签中找class属性值为.box，如果找到class属性值为.box就给其设置样式。现在大家应该知道了span标签下面的class属性值为.box为什么没有渲染的原因了。

多类选择器

  • 接下来让我们进入多类选择器实践，笔者以嵌入式的形式，将class属性值包含.box和.box1元素的字体颜色设置为红色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>多类选择器</title>

    <style>

        .box.box1{

            color:red;

        }

    </style>

</head>

<body>

     <h2 class="box1 box">成功不是击败别人，而是改变自己。</h2>

     <span class="box box1">成功不是击败别人，而是改变自己。</span>

     <h2 class="box1 ">微笑是最初的信仰</h2>

     <span class="box">微笑是最初的信仰</span>

</body>

</html>

  • 注意：多类选择器执行原理说明如下：首先class属性值可以设置为多个以空格隔开即可，举例：如果一个class属性值包含.box和.box1将其设置样式，通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。现在大家应该知道了单独的class属性值为.box和.box1没有被渲染了。

CSS基本选择器是什么？基本选择器是如何工作的更多相关文章

  1. css知多少（6）——选择器的优先级

    1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  2. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  3. css知多少（5）——选择器

    1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器.让浏览器知道css选 ...

  4. CSS基础知识点（二）——选择器

    在这一篇中,主要总结一下CSS中的选择器. 参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html CSS中的选择器主要包括 ...

  5. css中的7中属性选择器

    在CSS的选择符中有七个属性选择符.它们分别是: 1.E[att] 选择具有att属性的E元素. 2.E[att="val"] 选择具有att属性且属性值等于val的E元素. 3. ...

  6. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  7. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  8. css中最基本几个选择器

    css中有四种不同的选择器 ①类选择器,又叫class选择器.类选择器{属性名:属性值:...}/*类选择器*/.s1{ font-weight:bold;font-size:16px;}②id选择器 ...

  9. CSS（一） 引入方式 选择器 权重

    Css(一) Cascading Style Sheet 层叠样式表 css注释方式/*  */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...

  10. CSS选择器之通配符选择器和多元素选择器

    1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...

随机推荐

  1. 1025 PAT Ranking 双重排序

    Programming Ability Test (PAT) is organized by the College of Computer Science and Technology of Zhe ...

  2. 通过idea将maven工程转为web项目

    前言 吐槽一下网上的各种转换教程..说的真的是吵来吵去,有用的东西极少.特此自己写一篇好使的. 转换过程 建好的maven工程 建好的maven工程长这个鬼样子~~,没有使用骨架.就是普通的建立方式. ...

  3. C#中实现文件重命名的方式

    场景 在C#中如果是删除文件的话可以直接使用 if (System.IO.File.Exists(fileName)) { System.IO.File.Delete(fileName); } 但是如 ...

  4. SQL Server 通过游标重新定义单据数据的单据编号

    DECLARE @Index INTSET @Index=100DECLARE UpdateCursor  CURSOR  FOR (SELECT DISTINCT AA.Id FROM dbo.表 ...

  5. InfluxDB因修改默认数据目录导致服务无法正常运行的问题（权限问题）

    在实际的生产中,考虑的实际情况,我们会调整一些默认配置,例如,数据目录.InfluxDB修改默认的Data目录后,因权限问题,服务无法正常运行.以下是具体的分析测试过程. 配置文件为 /etc/inf ...

  6. Visual Studio Code管理MySQL

    1. VS Code安装插件:MySQL , 安装完毕重新加载即可激活 2. 连接 mysql 3. 断开连接mysql 4. 简单操作 查看字段 新建查询语句 显示表结构 插入数据

  7. ubuntu下需要补充安装 manpages手册; 安装linux 社区最新的linux manpages 文档；

    使用man手册的方式,能大大加快开发速度,可能安装的时候有些安装不完整,下面结合网络上搜索信息进行补充: $ sudo apt-get install manpages $ sudo apt-get ...

  8. CodeForces - 1230E（dfs+数论+树上贡献）

    题意 https://vjudge.net/problem/CodeForces-1230E 给出一棵树, 点上有权值, 对于每个点, 求它和所有后代节点的GCD的和. 思路 对于一个点,他对后代的贡 ...

  9. githup常用备份

    https://github.com/ https://github.com/doumeki/ThrExcel https://github.com/xinxi1990/MyMonkey https: ...

  10. 文件操作NIO

    在丑陋的 Java I/O 编程方式诞生多年以后,Java终于简化了文件读写的基本操作. 两个基本组件 文件或者目录的路径: 文件本身. 这块基本都是些记忆性的东西,没什么过多的需要写的地方,用的时候 ...