(一)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. Delphi拷贝目录(含子目录)的方法

    要实现目录级的拷贝,可以利用Windows API函数ShFileOperation( ),其函数声明如下: WINSHELLAPI int WINAPI SHFileOperation( LPSHF ...

  2. endnote X7使用方法

    网页版的endnote不能添加新模版,只能用模版库里的那些,所以转而试试离线版客户端. 1.下载安装完以后(下载地址就不给了,网上有很多),在word里可以看到顶栏有插件,如果你同时也安装了在线版本, ...

  3. DPM,DEM,DDPM的区别

    此文来自我在CFD中国论坛中的一篇回复:http://www.cfd-china.com/topic/58/dem%E5%92%8Cdpm/21 正好这几天在研究fluent里的DEM,DPM和DDP ...

  4. BOM总结

    一.BOM概念 BOM:Browser Object Model  浏览器对象模型,定义了JS操作浏览器的一些方法和属性 二.BOM方法 (在BOM里面大部分的方法都是调用window对象下的方法得到 ...

  5. UltraISO制作linux启动盘(包含写入不完整解决方法)

    网上教程挺多,主要是自己记录一下.

  6. HTML5 简介、浏览器支持、新元素

    什么是 HTML5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供 ...

  7. Android学习笔记总结

    第一步: Android(1) - 在 Windows 下搭建 Android 开发环境,以及 Hello World 程序 搭建 Android 的开发环境,以及写一个简单的示例程序 · 在 Win ...

  8. 一个web应用的诞生--使用模板

    经过了第一章的内容,已经可以做出一些简单的页面,首先用这种方式做一个登录页面,首先要创建一个login的路由方法: @app.route("/login",methods=[&qu ...

  9. 蓝桥网试题 java 基础练习 矩阵乘法

    ------------------------------------------------------------ 第一次感觉到好好学习的重要性QAQ 在做这道题之前请先学会 :矩阵乘法(百度百 ...

  10. HTML5中的WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...