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. EPLAN P8导线颜色的设置

    P8里的导线应称为"连接",连接的颜色代表了其电位的传递路径,如可以给三相电源设置成黑色,PE设为绿色,N设为蓝色等等.  P8中电位在连接和元器件中传递的方法是由元器件的连接点属 ...

  2. Android JNI框架图

  3. WebKit中的Chrome 和 ChromeClient

    原文地址:http://blog.csdn.net/dlmu2001/article/details/6208241 摘要: 浏览器的GUI接口分成两种,一种是控件的绘制,另一种则是同应用息息相关的窗 ...

  4. coreseek 提示 client version is higher than daemon version 解决办法

    安装好coreseek,开启了服务之后,通过 sphinx php扩展去请求数据,提示:client version is higher than daemon version (client is ...

  5. ASP.NET服务器控件使用之Reportviewer 报表

    http://blog.csdn.net/oemoon/article/details/7338967 http://www.cnblogs.com/emanlee/archive/2008/09/1 ...

  6. JavaScript进阶内容1:各种对象类型判断

    该文章主要用来介绍JavaScript中常用的一些对象检测判断方法,整理资源来自书本和网络,如有错误或说明不详之处,望评论提出,本菜定提名感谢……(本文章知识比较基础,大牛请提些意见再绕道,三克油^_ ...

  7. SpringMVC学习系列-后记 结合SpringMVC和Hibernate-validator,根据后台验证规则自动生成前台的js验证代码

    在SpringMVC学习系列(6) 之 数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...

  8. facebook-开发

    https://developers.facebook.com/docs/ios/getting-started?locale=zh_CN#prerequisites

  9. ServiceStack.Redis 中关系操作的局限与bug

    redis是文档型的,nosql中难处理的是关系. 比如人可以发博客,博客可以有分类.按照传统sql中,用户表和分类表都是主表,博客表是从表,有用户的外键和分类的外键 如果使用文档型的思考方式. 为用 ...

  10. [OpenCV] IplImage and Functions

    In this chapter, APIs will make U crazy. Good luck! Next, Review Linear Algebra.  Ref: http://blog.c ...