基本选择器包括：

  • 标签选择器
  • 类选择器
  • ID选择器
  • 通用选择器

标签选择器

就是通过标签名来选择元素：

选中p标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

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

    <title>Title</title>

    <style type="text/css">

        /* 标签选择器 */

        p{

            color: red;

        }

    </style>

</head>

<body>

    <div>

        <p>我是一个段落</p>

    </div>

</body>

</html>

将所有的p标签设置字体颜色为红色

标签选择器可以选中所有的标签元素，例如div,ul,li,p等，不管标签藏的多深，都可以选中，选中的是所有,而不是某一个

ID选择器

id是在每个标签应用是唯一的

同一个页面id不能重复

id命名规范 要以字母开头 可以有数字、下划线、-

大小写严格区分 aa和AA

通过元素的ID值选择元素：

用#选中id

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

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

    <title>Title</title>

    <style type="text/css">

        #s1{

            color: red;

        }

    </style>

</head>

<body>

    <div>

        <span id="s1">123</span>

    </div>

</body>

</html>

将id值为s1的元素字体颜色设置为红色。

CSS使用的id 他的大小写字母是严格区分的，id是唯一

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

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

    <title>Title</title>

    <style type="text/css">

        #s1{

            color: red;

        }

        #s2{

            font-size:30px;

        }

    </style>

</head>

<body>

    <div>

        <span id="s1">123</span>

        <span id="s2">helo</span>

    </div>

</body>

</html>

类选择器

通用选择器

使用*选择所有元素：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

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

    <title>Title</title>

    <style type="text/css">

        *{

            color: red;

        }

    </style>

</head>

<body>

    <div>

        <p>第一个段落</p>

        <span>span</span>

    </div>

    <div>

        <a>a标签</a>

    </div>

</body>

</html>

前端 CSS的选择器 基本选择器的更多相关文章

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

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

  2. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  3. 前端——CSS选择器

    目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...

  4. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  5. 前端----css 选择器

      css 为了修饰页面作用, 让页面好看 ⑴ css的引入方式1,行内样式body里面2,内接样式在html里面的 style 里面3,外接样式两种:①链接式: <link rel=" ...

  6. 前端 CSS的选择器 高级选择器

    高级选择器分为: 后代选择器 儿子选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.父元素的后代(包括儿子,孙子,重孙子) 后代选择器 在CSS中使用非常频繁 因为HTML元素可以嵌 ...

  7. 前端 CSS的选择器

    什么是选择器.在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们设置样式了. 选 ...

  8. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  9. 从零开始学 Web 之 CSS（一）选择器

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

随机推荐

  1. 第二节，下载openwrt源码和编译环境

    文章的开始先说两个重点 1.不要使用root用户编译,普通用户编译即可. 2.自行搭建梯子,以免编译失败. 一,进入虚拟机内的Ubuntu系统 点击左下角的显示应用程序,我们去修改一下Ubuntu的源 ...

  2. 计蒜客 蓝桥模拟 G. 数列求值

    递归式移项得Ai+1 = 2Ai + 2Ci - Ai-1; 1.A2 = 2A1 + 2C1 - A0; 2.A3 = 2A2 + 2C2 - A1; . . . n.An+1 = 2An + 2C ...

  3. bzoj5099 [POI2018]Pionek 双指针

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5099 题解 这道题做法似乎挺单一的. (一开始想了个假做法 向量和的长度等于所有向量在其方向上 ...

  4. 前端之JQuery：JQuery属性操作

    Jquery2--属性相关的操作 知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性 ...

  5. Task4.用PyTorch实现多层网络

    1.引入模块,读取数据  2.构建计算图(构建网络模型) 3.损失函数与优化器 4.开始训练模型 5.对训练的模型预测结果进行评估 import torch.nn.functional as F im ...

  6. HTTP教程

    适合人群 本教程已为计算机学科毕业生和Web开发人员准备,帮助他们了解与超文本传输​​协议(HTTP)相关的基本到高级概念. 预备知识 在继续本教程之前,最好对Web概念,Web浏览器,Web服务器, ...

  7. Linux学习-通过loganalyzer展示MySQL中rsyslog日志

    一.实验环境 系统:CentOS7.6 软件包:apache,php,mariadb-server (都是基于光盘yum源) 源码包:loganalyzer-4.1.7.tar.gz (http:// ...

  8. linux运维、架构之路-实时同步方案

    一.inotify+rsync实时同步 1.介绍         inotify-tools是一种强大的.细粒度的.异步的文件系统事件监控机制,可以用来监控文件系统的事件.inotify-tools是 ...

  9. 730KII 打印机 Win7 2017年11月更新系统补丁后无法打印

    卸载11月份编号为KB4048960的系统更新

  10. 动态淀粉质（划掉）题单&简要题解

    简介 动态点分治的思想:还不太清楚诶怎么办. 大概是通过降低树高来降低每次修改和询问的复杂度吧,还可以把树上一个连通块的信息统计到一个点(重心)上.具体实现方式和普通的静态点分治没有太大的区别,只是把 ...