基本选择器包括：

  • 标签选择器
  • 类选择器
  • 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. .NET界面控件DevExpress v19.1.3重磅来袭

    DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...

  2. SQL查询语句备忘录

    有关于SQL查询的相关语句和语法的记录!备忘与复习用 1.SQL多表联合查询 select a.字段1,a.字段2,b,字段2 from 表1 a,表2 b where a.字段1 =b.字段1 2. ...

  3. 【leetcode】1154. Day of the Year

    题目如下: Given a string date representing a Gregorian calendar date formatted as YYYY-MM-DD, return the ...

  4. ARC模式下delloc()注意事项

    1.ARC模式下delloc()调用触发时机是对象被销毁,如self.属性=nil 2.ARC模式下delloc()里面不需要手动调用[super dealloc]; 因为系统已经自动调用,多此一举的 ...

  5. qs的两个用途

    qs是npm安装的库 1.qs.stringify()   将对象序列化成URL的形式,以&进行拼接 const Qs = require('qs'); let obj= { method: ...

  6. Android内嵌网页webview点击其中的链接跳转到我们应用内的Activity

    在一个大的Android项目中,由于客户端来不及更新和实现,经常会内嵌一些网页(在一些大型的互联网公司,PC的产品总是跑在客户端的前面),比如活动页面,通常可以内嵌用html5实现的页面,可以适配手机 ...

  7. [CF1093E]Intersection of Permutations：树套树+pbds

    分析 裸的二维数点,博主用树状数组套平衡树写的,顺便pbds真好用. Update on 2018/12/20:再解释一下为什么是二维数点,第一维是\(la \leq i \leq ra\),第二维是 ...

  8. [CSP-S模拟测试]:骆驼（模拟+构造）

    题目描述 我们都熟悉走马步,现在我们定义一种新的移动方式——骆驼步,它在一个国际棋盘上的移动规则是这样的. 以看出,骆驼步可以向八个方向走动,且不能走出棋盘范围. 现在给出一个$N\times N$的 ...

  9. 前端每日实战：138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OorLGZ 可交互视频 此视频是可 ...

  10. error: ‘xxx’ does not name a type

    error: ‘TPlanMgr’ does not name a type 两个头文件相互应用会导致一个头文件你的类型无定义问题.