搜索
首页web前端css教程详解CSS各种选择器和import导入样式表还有一些伪类选择器

(一)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中,在一定程度上实现了内容与样式分离,但是无法实现样式复用 引用方式:

    3.外部样式表:实现了内容与样式的分离,方便后期的维护与复用,符合W3C的标准,优先级最低 引用:在head标签中通过

    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导入样式表还有一些伪类选择器相关文章请关注PHP中文网!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
什么是CSS网格?什么是CSS网格?Apr 30, 2025 pm 03:21 PM

CSS网格是创建复杂,响应式Web布局的强大工具。它简化了设计,提高可访问性并提供了比旧方法更多的控制权。

什么是CSS Flexbox?什么是CSS Flexbox?Apr 30, 2025 pm 03:20 PM

文章讨论了CSS FlexBox,这是一种布局方法,用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法,将其与CSS网格进行了比较,并详细浏览了浏览器支持。

我们如何使用CSS使网站迅速响应?我们如何使用CSS使网站迅速响应?Apr 30, 2025 pm 03:19 PM

本文讨论了使用CSS创建响应网站的技术,包括视口元标签,灵活的网格,流体媒体,媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用,并推荐CSS框架

CSS盒装属性有什么作用?CSS盒装属性有什么作用?Apr 30, 2025 pm 03:18 PM

本文讨论了CSS盒装属性,该属性控制了元素维度的计算方式。它解释了诸如Content-Box,Border-Box和Padding-Box之类的值,以及它们对布局设计和形式对齐的影响。

我们如何使用CSS动画?我们如何使用CSS动画?Apr 30, 2025 pm 03:17 PM

文章讨论使用CSS,关键属性并与JavaScript结合创建动画。主要问题是浏览器兼容性。

我们可以使用CSS向我们的项目添加3D转换吗?我们可以使用CSS向我们的项目添加3D转换吗?Apr 30, 2025 pm 03:16 PM

文章讨论了Web项目的3D转换,关键属性,浏览器兼容性和性能注意事项的讨论。(角色计数:159)

我们如何在CSS中添加梯度?我们如何在CSS中添加梯度?Apr 30, 2025 pm 03:15 PM

文章讨论了使用CSS梯度(线性,径向,重复)来增强网站视觉效果,添加深度,焦点和现代美学。

CSS中的伪元素是什么?CSS中的伪元素是什么?Apr 30, 2025 pm 03:14 PM

文章讨论了CSS中的伪元素,它们在增强HTML样式方面的使用以及与伪级的差异。提供实用的例子。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具