CSS选择器。

什么是标签选择器?
作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

格式:

标签名称{

　　属性：属性值

}

标签选择器（html中的标签名称）

id选择器（html标签中绑定的id名）

类别选择器（html标签中绑定的class名）

后代选择器（某一个标签的后代--儿子，孙子。。。）

子元素选择器（某一个标签的儿子）

伪类选择器（序选择器）

通配符选择器

交集选择器

注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

id选择器

1.什么是id选择器?
作用: 根据指定的id名称找到对应的标签, 然后设置属性

格式:

#id名称{

    属性:值;

}

注意点:
1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前面加上#
4.id的名称是有一定的规范的

1. id的名称只能由字母/数字/下划线 a-z 0-9 _

2. id名称不能以数字开头

3. id名称不能是HTML标签的名称. 不能是a h1 img input ...

5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的

类选择器

1.什么是类选择器?
作用: 根据指定的类名称找到对应的标签, 然后设置属性

格式:

.类名{

    属性:值;

}

注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
6.在HTML中每个标签可以同时绑定多个类名

格式:

<标签名称 class="类名1 类名2 ...">

错误的写法:

<p class="para1" class="para2">

id选择器和类选择器

1.id和class的区别?

1.

id相当于人的身份证不可以重复

class相当于人的名称可以重复

2.

一个HTML标签只能绑定一个id名称

一个HTML标签可以绑定多个class名称

2.id选择器和class选择器区别?

* id选择器是以#开头

* class选择器是以.开头

3.在企业开发中到底用id选择器还是用class选择器?

id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式

一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

后代选择器

1.什么是后代选择器?
作用: 找到指定标签的所有特定的后代标签, 设置属性

格式:

标签名称1 标签名称2{

    属性:值;

}

先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
div p{}

注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去

子元素选择器

1.什么是子元素选择器?
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

格式:

标签名称1>标签名称2{

    属性:值;

}

先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去

交集选择器

开发中基本不用

1.什么是交集选择器?
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性

格式:

选择器1选择器2{

    属性: 值;

}

注意点:
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称

兄弟选择器

相邻兄弟选择器 CSS2

作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性

格式:

选择器1+选择器2{

    属性:值;

}

注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

通用兄弟选择器 CSS3

作用: 给指定选择器后面的所有选择器选中的所有标签设置属性

格式:

选择器1~选择器2{

    属性:值;

}

注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

伪类选择器（序选择器）

这几个非常的常用，尤其是nth-of-type(n)
好处是，不需要取那么多的名字了（这是一个大问题），直接就可以拿到标签

CSS3中新增的选择器最具代表性的就是序选择器
1.同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型

2.同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>19-序选择器下</title>

    <style>

        p:nth-of-type(odd){

            color: red;

        }

        p:nth-of-type(even){

            color: blue;

        }

    </style>

</head>

<body>

<!--

:nth-child(odd) 选中同级别中的所有奇数

:nth-child(even) 选中同级别中的所有偶数

:nth-child(xn+y)

x和y是用户自定义的, 而n是一个计数器, 从0开始递增

-->

<p>我是项目</p>

<p>我是项目</p>

<p>我是项目</p>

<p>我是项目</p>

<p>我是项目</p>

<p>我是项目</p>

<p>我是项目</p>

</body>

</html>

属性选择器

去w3c看文档吧

1.什么是属性选择器?
作用: 根据指定的属性名称找到对应的标签, 然后设置属性

格式:
[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性

[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性

最常见的应用场景, 就是用于区分input属性

input[type=password]{}

<input type="text" name="" id="">

<input type="password" name="" id="">

通配符选择器

1.什么是通配符选择器?
作用: 给当前界面上所有的标签设置属性

格式:

*{

    属性:值;

}

注意点:
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器，有其他的方案来替代

HTML5-入门3。的更多相关文章

  1. HTML5入门以及新标签

    HTML5 学习总结(一)--HTML5入门与新增标签   目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...

  2. 推荐10个适合初学者的 HTML5 入门教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  3. HTML5入门要点

    要点 HTML5是HTML的最新版本.通过引入心的标签.新的语义和媒体元素,同时要依赖一组支持Web应用的JavaScript库 XHTML不再是Web页面开发标准.开发人员和W3C组织觉决定还是继续 ...

  4. 2018年html5入门到精通教程电子书百度云盘下载共22本

    名称 查看 <HTML5启动和运行>(HTML5.Up.and.Running)扫描版[PDF] 下载 <Pro HTML5 Performance>(Pro HTML5 Pe ...

  5. 给萌新HTML5 入门指南

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员 ...

  6. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  7. HTML5入门（---------------HTML——基本骨架--------------）

    HTML基础 一.HTML 超文本标记语言.英文全拼:HyperText Markup Language.负责网页的语义描述. 二.HTML基本骨架 <!DOCTYPE html> < ...

  8. html5入门

    1.canvas标签 <canvas id="myCanvas"></canvas><!--canvas标签定义图形,比如图标和其他图像--> ...

  9. 【活动】不用买书，不用花钱，可以免费看HTML5入门连载了

    清华大学出版社推出的<HTML 5网页开发实例详解>适合HTML 5开发初学者和前端开发工程师.本书一经上市,就获得了读者的一致好评,为感谢读者,推出本书的连载活动.   本书术新颖.与时 ...

  10. HTML5入门4---HTML5 与 HTML4 同一网页的不同写法

    HTML4写法 css: body { font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana ...

随机推荐

  1. sql_auoload_regiester() 解释（转载）

    在了解这个函数之前先来看另一个函数:__autoload. 一.__autoload 这是一个自动加载函数,在PHP5中,当我们实例化一个未定义的类时,就会触发此函数.看下面例子: 运行index.P ...

  2. Eclipse *的安装（图文详解）

    不多说,直接上干货!  前期博客 Eclipse *下载 可以直接解压,再配置JDK,即可使用. 结束 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时, ...

  3. 1-hadoop中遇到的各种异常

    本贴记录学习hadoop中遇到的各种异常, 包括推荐系统分类下的和本分类下的, 持续更新 1, 搭建ha时, active和standy之间不能自由切换 经检查, 配置文件错误, 私钥配置 root ...

  4. DirectorySearcher.Filter 属性(转)

    获取或设置一个值,该值的轻型目录访问协议 (LDAP) 格式筛选器字符串. 更多信息见:http://www.cnblogs.com/zhongweiv/archive/2013/01/05/ad_s ...

  5. Beta阶段——Scrum 冲刺博客第四天

    一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 完成对question界面的制作,完善随机出题界面,能够流畅的切换下一题与 ...

  6. python26:自定义form表单验证

    一.自定义Form的原理 1.1 各种form表单验证比较 只有python提供了form表单验证,其他的都没有提供.django提供的功能还不够强大.最强大的是微软的ASP.NET!我们可以自己写一 ...

  7. Microsoft.AspNet.Identity 的简单使用

    要完成一个简单的注册,登陆,至少需要实现Identity中的3个接口 IUser IUserStore<TUser> : IDisposable where TUser : IUser I ...

  8. JavaScript 函数全局变量定义

    在 JavaScript 中, 作用域 影响着变量的作用范围.在函数外定义的变量具有 全局 作用域.这意味着,具有全局作用域的变量可以在代码的任何地方被调用. 没有使用var关键字定义的变量,会被自动 ...

  9. centos7 离线安装Ambari

    准备工作: 新下载的centos7 安装 createrepo,用于制作源 yum install createrepo 安装java (推荐 java 1.7以上版本,如果有,则跳过此步骤) yum ...

  10. 啰里吧嗦jvm

    一.为什么要了解jvm 有次做项目的时候,程序run起来的时候,总是报OutOfMemoryError,有老司机教我们用jconsole.exe看内存溢出问题 就是这货启动jconsole后,发现一个 ...