(一)CSS选择器:

      1.标签选择器通过HTML的标签名直接选择该标签

      2.类选择器:通过.选择器的名称{} 来对添加了class属性的标签进行选中

      3.ID选择器通过#选择器的名称{} 来对添加了ID属性的标签进行选择,ID是在HTML文档中唯一的

      4.通用选择器通过*{}来选择HTML文档中所有的标签

      5.后代选择器: 选择器1(空格)选择器2 来选择一个标签中对应的所有子标签

      6.子代选择器: 选择器1>选择器2  来选择一个标签中直接一代的子标签,对更深一层的不起作用

      7.交集选择器:选择器1(中间没有空格)选择器2 例如#li.li{} 选择一个ID=li并且class=li的标签

      8.并集选择器:选择器1,选择器2 例如:#li.li{} 选择ID=li或者class=li的标签

二)选择器的优先级:

      1.当作用于同一层的标签,比如都直接作用于标签li:ID选择器>类选择器>标签选择器>通用选择器

      2.最内侧的选择器比外层的优先:div ul li>#ul li标签在ul最内侧,所有能覆盖外层ID选择器的样式

      3.当作用于同一层,而且最后一层选择器一样,那么哪个精准哪个的优先级就高:div ul li>div li

      4.当优先级完全相同的时候,现在后面的样式会覆盖前面的样式

      补充:5.优先级的算法:style = 1000(行内样式表) id = 100(id选择器) class = 10(类选择器) element = 1(标签选择器) 用法:前提是作用在同一层:比如 #ul li{} 和ul #li{} 2者的优先级哪个高呢,#ul li{}优先级用数值表示为101(100+1),后者的优先级数值为101(1+100),所以优先级一样高,前提是2个选择器必须作用于同一层

(三)三种方式链接样式表以import导入样式表

    1.行内样式表:写在HTML标签里面,通过style属性,优先级最高,但是把HTML代码和CSS代码糅合在一块,不符合CSS的标准“内容和样式相分离”,而且不利用后期的维护

    2.内部样式表:写在head的子标签style中,在一定程度上实现了内容与样式分离,但是无法实现样式复用 引用方式:<link rel="stylesheet" href=""/>

    3.外部样式表实现了内容与样式的分离,方便后期的维护与复用,符合W3C的标准,优先级最低 引用:在head标签中通过<link rel="stylesheet" href="CSS资源地址"/>

    4.import导入样式表:在内部样式表style中,通过@import url(CSS资源地址)来导入CSS样式表

    注意:内部样式表和import导入的区别:

       1)link标签是html的标签,而import不是

       2)link可以链接各种资源,而import只能导入CSS样式表

       3)link标签相当于在hmtl代码和css样式中起到桥梁作用,链接css代码,而import是导入css样式表,会在文档加载时,导入CSS文件到HMTL中

       4)link方式是在文档边加载时,边链接CSS样式,而import是在html文档中完之后,在导入css样式

        终上所述:选择link标签链接好

(四)伪类选择器:

      选择器名称:伪类{},伪类标签标签的一个状态,比如:a:link{}:标签a标签为方位是的样式;a:hover{}:当鼠标放在a标签时显示的样式;a:active{}:当鼠标在a标签按下时显示的样式;a:visited{}:当a标签访问后时显示的样式;也可以:a:first-chird{}表示a标签有父容器,而且是父容器下第一个子标签a被选中

      

关于CSS各种选择器,还有各种引入样式表的区别,import导入样式表,在介绍一些伪类选择器的更多相关文章

  1. CSS层叠的问题、标准文档流、伪类选择器

    一.层叠的问题 CSS有两个性质: 1.继承性 2.层叠性:选择器的一种选择能力,谁的权重大就选谁 层叠性又分为: 1).选不中:走继承性  (font.color.text.) 继承性的权重是0 若 ...

  2. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  3. a标签伪类选择器+过度模块

    a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的. 2.格式: 1):link 修改从未被访问过状态下的样式. 2):visited 修改被访问 ...

  4. 如何使用CSS3中的结构伪类选择器和伪元素选择器

    结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...

  5. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  6. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  7. 如何使用CSS伪类选择器

    总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...

  8. 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

随机推荐

  1. Spring Security——核心类简介——获得登录用户的相关信息

    核心类简介 目录 1.1     Authentication 1.2     SecurityContextHolder 1.3     AuthenticationManager和Authenti ...

  2. MVC 与 MVVM

    MVC View直接访问Model,View包含Model信息,包括业务逻辑. MVC模型里Model不变,Model不依赖于View,但是 View依赖于Model.因为View实现了一些业务逻辑, ...

  3. Android环境搭建与HelloWorld

    引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方,还望不吝赐教. 在开始A ...

  4. Php连接及读取和写入mysql数据库的常用代码

    在这里我总结了常用的PHP连接MySQL数据库以及读取写入数据库的方法,希望能够帮到你,当然也是作为我自己的一个回顾总结. 1.为了更好地设置数据连接,一般会将数据连接所涉及的值定义成变量. $mys ...

  5. MySQL删除单列重复或多列同时重复值并保留一条

    在生产环境中,我们有的列是不允许出现重复值的,亦或是某两列不允许同时重复,但由于前端未做限制,或者没限制住,出现了单列重复值,或者两列本应组成唯一组合却也出现重复,这两种情况都是不允许的.现在由于前端 ...

  6. jQuery trigger one用法

    jQuery trigger one用法: <%@ page language="java" import="java.util.*" pageEncod ...

  7. SLS评测报告

    什么是SLS?  简单日志服务(Simple Log Service,简称SLS)是针对日志收集.存储.查询和分析的服务.用户只需简单地配置日志产生的位置和格式等信息,就能实时查询海量日志,并可通过S ...

  8. Java 导出Excel的各种尝试

    最近的一个项目比较忙,一直没时间过来跟新博客.今天过来分享一下在此项目中遇到的一个小问题:导出Excel:相信导出Excel这个功能是特别常见的,也有很多的方式.好了,不多说了,直接说说自己遇到的各种 ...

  9. Hadoop学习笔记-003-CentOS_6.5_64_设置ssh免密码登录

    参考:http://blog.csdn.net/u010270403/article/details/51444677 虚拟机中共五个centos系统,每个系统有两个用户root和hadoop:cdh ...

  10. Spark:使用Spark Shell的两个示例

    Spark:使用Spark Shell的两个示例 Python 行数统计 ** 注意: **使用的是Hadoop的HDFS作为持久层,需要先配置Hadoop 命令行代码 # pyspark >& ...