基本选择器介绍

  • 基本选择器又分为六种使用方式：如、通用选择器、标签选择器、类选择器、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. spark log4j 日志配置

    现在我们介绍spark (streaming) job独立配置的log4j的方法,通过查看官方文档,要为应用主程序(即driver端)或执行程序使(即executor端)自定义log4j配置,需要两步 ...

  2. python爬虫爬小说网站涉及到(js加密,CSS加密)

    我是对于xxxx小说网进行爬取只讲思路不展示代码请见谅 一.涉及到的反爬 js加密 css加密 请求头中的User-Agent以及 cookie 二.思路 1.对于js加密 对于有js加密信息,我们一 ...

  3. javaWeb核心技术第三篇之JavaScript第一篇

    - 概述 - JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言 - 作用:给页面添加动态效果,校验用户信息等. - 入门案例 - js和html的整合 - 方式1:内联式 ...

  4. leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  5. Attaching an entity of type 'xxx' failed because another entity of the same type already has the same primary key value.

    问题的详细描述: Attaching an entity of type 'xxxxx' failed because another entity of the same type already ...

  6. 简单理解Busybox下halt/poweroff/reboot实现及区别

    关键词:halt/poweroff/reboot.reboot().SIGUSR1/SIGTERM/SIGUSR2等. 1. busybox下的halt/poweroff/reboot实现 通过app ...

  7. number.toFixed和Math.round与保留小数

    如果你baidu/google过或者自己写过保留两位小数,那下面这代码一定不陌生 Math.round(number*100)/100 那你使用过Number.prototype.toFixed这个方 ...

  8. for(var i in items) 和 for(var i;i<items.length;i++) 区别

    前者循环的是属性,后者循环的才是数组. 若项目中对数组属性进行了扩展,那切记不能使用前者,否则在循环数组时扩展的函数体也会被当做数据返回. var data = { p1:1, p2:"b& ...

  9. 什么是CSS?它的特点有哪些？

    css 中文名称:层叠样式表,也称级联样式表 英文名称:Cascading Style Sheets 最新的版本:css3 1.层叠性 在权重(优先级)相同的情况下,同一个标签的样式发生冲突, 最后定 ...

  10. Tarjan在图论中的应用（三）——用Tarjan来求解2-SAT

    前言 \(2-SAT\)的解法不止一种(例如暴搜?),但最高效的应该还是\(Tarjan\). 说来其实我早就写过用\(Tarjan\)求解\(2-SAT\)的题目了(就是这道题:[2019.8.14 ...