基本选择器介绍

  • 基本选择器又分为六种使用方式：如、通用选择器、标签选择器、类选择器、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. Change Field Layout and Visibility in a List View 在列表视图中更改字段布局和可见性

    This lesson will guide you through the steps needed to select columns displayed in the List View. Fo ...

  2. 【koa2】用户注册、登录校验与加盐加密

    加密与解密 先介绍一下关于服务端用户名跟密码的存储状态,我们知道当前端在注册一个新用户时,会在表单内填入用户名和密码,并通过post请求提交到服务器,服务器再把用户名和密码从ctx.request.b ...

  3. 个性化windows10主题/换成winxp主题

    win10系统主题手动更换为仿winXp系统主题 突然想念家里那台被遗忘了好久的旧电脑,思绪被拉回小时候偷玩电脑的场景. 如果你也是一个念旧的人的话,我相信你一定喜爱Windows XP的经典界面. ...

  4. [转]Introduction - Run Excel Macro using VBScript

    本文转自:https://wellsr.com/vba/2015/excel/run-macro-without-opening-excel-using-vbscript/ Have you ever ...

  5. Scrapy安装和简单使用

    模块安装 Windows 安装scrapy 需要安装依赖环境twisted,twisted又需要安装C++的依赖环境 pip install scrapy  时 如果出现twisted错误 在http ...

  6. CPU相关概念

    整部主机的重点在于中央处理器 (Central Processing Unit, CPU),CPU 为一个具有特定功 能的芯片, 里头含有微指令集,如果你想要让主机进行什么特异的功能,就得要参考这颗 ...

  7. jt格式文件与3D数据压缩

    介绍 JT是西门子公司推出的PLM通用三维格式,设计为一个开放.高效率的.紧凑,持久性存储的产品数据格式,用于产品可视化.协作和CAD数据共享.JT文件格式包括多方面的数据,以及对曲面边的精准表示,产 ...

  8. 201871010113-刘兴瑞《面向对象程序设计（java）》第一周学习总结

    正文开头: 项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>    https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接 ...

  9. Linux下安装redis报错信息

    redis在Linux安装报错 标签: redislinuxcentos 2017-02-24 13:46 384人阅读 评论(0) 收藏 举报  分类: Linux安装工具(2)  版权声明:本文为 ...

  10. 算法问题实战策略 NTHLON

    地址 https://algospot.com/judge/problem/read/NTHLON #include <iostream> #include <vector> ...