重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
CSS选择器、优先级与匹配原理\x0d\x0a1.id 选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul 通配选择符的权值 0,0,0,0\x0d\x0a2.标签的权值为 0,0,0,1\x0d\x0a3.类的权值为 0,0,1,0\x0d\x0a4.属性选择的权值为 0,0,1,0\x0d\x0a5.伪类选择的权值为 0,0,1,0\x0d\x0a6.伪对象选择的权值为 0,0,0,1\x0d\x0a7.ID的权值为 0,1,0,0\x0d\x0a8.important的权值为最高 1,0,0,0\x0d\x0a使用规则: 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 。\x0d\x0a从上面我们可以得出两个关键的因素:\x0d\x0a1.权值的大小跟选择器的类型和数量有关\x0d\x0a2.样式的优先级跟样式的定义顺序有关
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、虚拟主机、营销软件、网站建设、旺苍网站维护、网站推广。
举一个简单的ul,li的列表例子,实现如下效果:
常规写法(使用last-child选择器):
写法2(使用not选择器):
写法2(使用+选择器):
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
主要的css选择器如下:
1、标签选择器
2、类选择器
3、ID选择器
4、全局选择器
5、组合选择器
6、继承选择器
7、伪类选择器
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS选择器就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
CSS选择器分类:
标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器
1、html标签选择器:
定义:以html标签作为选择器
2、class类选择器:
定义:为HTML标签添加class属性,通过类选择器来为具有此class属性的元素设置css样式。
类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则:
同一个元素可以设置多个类,之间用空格隔开:
3、ID选择器
定义:为HTML标签添加ID属性,通过ID选择器来为具有此ID的元素设置CSS规则
4、群组选择器
定义:集体统一设置样式
5、全局选择器
定义:所有标签设置样式
HTML文档结构图
6、后代选择器
定义:使用后代选择器设置,之间用空格隔开,后代选择器可以多层。
7、伪类选择器
链接的四种状态:激活状态,已访问状态,未访问状态,鼠标悬停状态。
伪类
说明
:link
未访问的链接
:visited
已访问的链接
:hover
鼠标悬停状态
:active
激活的链接
:hover 用于访问的鼠标经过某个元素时;
:active 用于一个元素被激活时(即按下鼠标之后放开鼠标之前的状态)
伪类选择器的属性:link visited hover active
说明:
1) a:hover 必须置于 a:link和a:visited之后,才有效
2) a:active 必须置于 a:hover之后才有效
3) 伪类名称对大小写不敏感
8、CSS其它选择器
css继承特性,从父元素那继承部分css属性
选择器的优先级
ID选择优先级最高(id选择器定义具有唯一性)
class选择器次之(class选择器可以多个)
元素选择器再次之
其它选择器优先级主要根据定义的先后顺序,最后定义的优先级高
!important 加重选择器的优先级,添加在样式规则之后,中间用空格隔开。
CSS选择器命名规则
1:采用英文字母,数字以及"-" 和 "_" 命名
2:以小写字母开头,不能以数字和"-" 和 "_" 开头
3:使用有意义的命名规范
常用CSS命名
header
页头
main
主体
footer
页尾
nav
导航
sidebar
侧栏
container
容器
column
栏目
title
标签
menu
菜单
submenu
子菜单
*列举常用命名,大家根据自身项目及团队的规则命名
耐心学习基础知识,基础是盖房的根基,必须打结实。
如果您觉得有用,记得在下方点赞、关注、留言,我会定期奉 上更多的惊喜哦,您的打赏支持才是我继续努力的动力,么么哒。
每日分享在学习过程中总结的学习经验,学习笔记,笔试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术。陪有梦想的人一起成长!