1.标签选择器
解释:是针对一个标签做的样式,它会将匹配的所有标签都发生改变
语法格式:标签名{
css样式代码
}
2.类选择器
特点:1.可以给某一个标签标记为一类,设定css样式,比较灵活
2.类目可以以,字母、数字、下划线、中划线组成,但不能以数字或中划线开头
   3.一个标签可以同时有多个类名,用空格隔开即可
   4.一个类选择器可以拥有多个标签,效果同时生效
   //使用方法和语法
<style>
.red{
color: red;
}
.yellow {
color: yellow;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<p class="red">红姐</p>
<p class="yellow">大黄</p>
<p class="blue">小蓝</p>
</body>
</html>

3.id选择器

特点:1.id是唯一的,一个页面中只能出现一次,类似身份证

2.一个id 号,只能拥有一个标签

使用方法如下:

<style>
#red{
color: red;
}
#yellow {
color: yellow;
}
#blue{
color: blue;
}
</style>
</head>
<body>
<p id="red">红姐</p>
<p id="yellow">大黄</p>
<p id="blue">小蓝</p>
</body>
</html>

4.通配符选择器

语法:*{

       css语句

      }

通常用在去除padding和margin

  

  

css 基础 选择器的使用的更多相关文章

  1. CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  2. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  3. CSS入门(css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影)

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  4. 0009 CSS基础选择器( 标签、类、id、通配符)

    typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用 ...

  5. 2020年12月-第02阶段-前端基础-CSS基础选择器

    CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...

  6. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  7. CSS【03】:CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  8. WEB学习-CSS基础选择器

    基础选择器 标签选择器 就是标签的名字. • <h1>前端与移动开发<span>1期班</span>基础班</h1> css: • <style ...

  9. CSS基础选择器总结

    基础选择器 作用 特点 使用情况 用法 标签选择器 可以选出所有相同的标签,比如p 不能差异化选择 较多 p {color:red;} 类选择器 可以选出1个或多个标签 可以根据需求选择 非常多 .n ...

  10. CSS 基础 选择器的使用汇总

    1.后代选择器 html 结构 <div class='father'> <p>小哥哥 小姐姐</p> <div> <p>小帅锅</p ...

随机推荐

  1. 【spring AOP】AspectJProxyFactory

    AspectJProxyFactory,可能大家对这个比较陌生,但是@Aspect这个注解大家应该很熟悉吧,通过这个注解在spring环境中实现aop特别的方便. 而AspectJProxyFacto ...

  2. jQuery全局进行方法扩展

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>01 ...

  3. 【Github】如何下载csv文件/win10如何修改txt文件为csv文件

    csv文件:逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号) 右键点击raw按钮,选择目标另存为,下载的是txt文件 win10如何 ...

  4. Mysql配置文件 4c8g优化

    目录 一.说明 二.配置 一.说明 以下配置适合4核8G及以下的配置,会让性能稍微提高1/3左右. 测试语句 mysqlslap -uroot -p123456 --concurrency=100 - ...

  5. CF1433A Boring Apartments 题解

    Content 我们把仅由一个或多个相同的数位组成的数字叫作"无聊的数字".我们把 \(\leqslant 10000\) 的这种数字按照以下规则排列: 首先,将仅由 \(1\) ...

  6. IDEA推荐配置(自动导入包、提示不区分大小写)

    设置快捷键方式为eclipse 设置代码提示不区分大小写 自动导入包 可以通过 Ctrl + 鼠标滚轮 来控制代码字体大小显示 显示行号和显示区分方法线 代码一行显示不下,软分行显示,点击鼠标右键 增 ...

  7. Qt5设置lineEdit正则表达式

    说明 本文演示Qt 版本: qt5.14 一个例子 下面的代码中演示 输入框只能输入 冒号.A-F.a-f,数字0~9,最长输入64个字符 /// 设置验证 auto le_set_check = [ ...

  8. win10使用cmake编译libevent(解决依赖openssl)

    概述 win10没有安装openssl cmake version: 3.18 libevent version: 2.1.10-stable libevent目前的版本中写好了 CMakeLists ...

  9. 【LeetCode】467. Unique Substrings in Wraparound String 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/unique-s ...

  10. 【LeetCode】518. Coin Change 2 解题报告(Python)

    [LeetCode]518. Coin Change 2 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目 ...