1.基本选择器语法

2.浏览器兼容性:浏览器对基本选择器都是一路绿灯通行,可以放心使用。

3.通配选择器:选择所有元素,也可以选择某个元素下的所有元素

(1)选择所有元素: *{margin: 0;padding: 0;}

(2)某个元素下的所有元素:.demo *{background: purple;}

4.ID选择器

(1)在使用ID选择器(#id)之前,需要在HTML文档中给对应的元素设置id属性并设置其值,才能找到对应的元素

eg:<div id="demo">HTML结构</div>
(2)ID选择器具有唯一性,在一个页面id名只能有一个
(3)在CSS样式中使用id选择器,需要在id属性名前面加上【#】号

eg:#demo{color: purple;}

5.类选择器

(1)在HTML中给需要的元素定义class属性,并为其设置属性值
(2)类选择器在一个页面中可以有多个相同的类名,而ID选择器其id值在整个页面中是唯一的一个(类选择器的简单使用方法)
        eg:.demo{color: purple;}

(3)类选择器的-多类选择器:通过两个或两个以上类选择器合并,来定义有别于一个类名的元素效果

eg:.demo1.demo2{color: purple;}(两个选择器之间没有空格,应紧密相连)

注:如果一个多类选择器包含的类名中,其中有一个不存在,这个选择器将无法找到匹配的元素

注:IE6选择器并不支持多类选择器,其将以末尾类名为准

(4)多类选择器扩展

【3】表示两种类选择器,思考:元素选择器、ID选择器、类名选择器,都是选择器,也就表示都可以互相进行组合

eg:div#demo{margin: 0;}

   div.demo{margin: 0;}

   .demo#demo{margin: 0;}

以后还会学习多种选择器,都可以进行这种组合使用,不过不建议组合过多。一是太复杂,可控性不好;二是完全没有这个必要,直接采用一个新的元素更好,并且没有兼容性问题(IE6不支持)

6.群组选择器

(1)群组选择器(selector1,selectorN)是将具有相同样式的元素分组在一起,每个选择器之间用逗号(,)隔开

(2)selector1,selector2,selector3,...,selectorN

(3)逗号(,)告诉浏览器,规则中包含多个不同的选择器,省去逗号就成了后代选择器(逗号成空格)或多类选择器(之间没有分隔)

CSS基础选择器温故-1的更多相关文章

  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 ...

随机推荐

  1. [转]Python零碎知识(2):强大的zip

    一.代码引导 首先看这一段代码: 1 >>> name=('jack','beginman','sony','pcky') 2 >>> age=(2001,2003 ...

  2. CGAL4.4+VC2008编译

    一: CGAL是欧盟资助的基础几何库,很底层, 纯算法, 对于你的项目和科研都是不可多得的好东西, 废话一句, 国内做这样的东西, 估计会活不下去交不了差的. 不多介绍.送上 英文原址, 从软件角度, ...

  3. C#通过ODBC查询HANA数据库数据

    创建HANA的ODBC数据库连接. 默认在控制面板——>管理工具——>数据源(ODBC) 提示:如果系统是64位的,要运行 C:\Windows\SysWOW64\odbcad32.exe ...

  4. 看那记不住命令的猿,如何使用GitHub

    什么是GitHub呢? GitHub是什么?好吧, 请看百科:http://baike.baidu.com/view/3366456.htm 准备:msysgit.tortoisegit 首先,我们得 ...

  5. 前端们,gulp该用起来了,简单的demo入门——gulp系列(一)

    gulp.grunt前端自动化工具,只有用过才知道多么重要. 它们问世这么久了?你真的用过吗? 写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程 ...

  6. 通过python切换hosts文件

    做开发或测试时常需要切换hosts ,如果hosts比较多,那么频繁的打开hosts文件对地址加注释(#),再把去掉注释是个繁琐的事情. 当然,SwitchHosts 已经可以帮我们方便的解决了这个繁 ...

  7. Ladda – 把加载提示效果集成到按钮中,提升用户体验

    Ladda 是一组集成了加载提示的按钮,以弥合行动和反馈之间的时间间隔,提供更好的功能使用体验.主要用于在用户点击提交之后,向用户提供即时的反馈,让他们知道浏览器正在处用户提交的任务. 您可能感兴趣的 ...

  8. 反射动态创建不同的Processor

    1. 定义抽象方法 public abstract class BaseProcesser    {        public abstract void GetCustomerReportCard ...

  9. Main.storyboard中使用navigationController

    传统使用navigationController的创建是在appdelegate中,使用storyboard的话必须在Main.storyboard文件中创建. 1.选中创建的navigationCo ...

  10. mysql创建每月执行一次的event

    DELIMITER $$ CREATE /*[DEFINER = { user | CURRENT_USER }]*/ EVENT `dev_sp2p6`.`e_test1` ON SCHEDULEE ...