01-CSS基础选择器与CSS3新增选择器

 一、CSS

(一)、什么是 CSS

CSS 指 层叠 样式 表 (Cascading Style Sheets)
​
WEB标准中的表现标准语言
简单说就是如何修饰网页信息的显示样式
目前推荐遵循的是W3C发布的CSS3.0
1998年5月21日由w3C正式推出的css2.1

(二)、CSS 特性

1、层叠性  ---  长江后浪推前浪,前浪死在沙滩上
    多种CSS样式的叠加,是浏览器处理冲突的一个能力,
    如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
​
    一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准
​
    1.样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式
    2.样式不冲突,不会层叠
​
2、继承性  ---  龙生龙,凤生凤,老鼠生的孩子会打洞
    指书写CSS样式表时,子标签会继承父标签的某些样式
    想要设置一个可继承的属性,只需将它应用于父元素即可
        可继承的属性有:
            字体系列属性:font、font-family、font-weight、font-size、font-style
            文本系列属性:color、text-align、line-height、text-decoration、
                        text-indent......
            列表系列属性: list-style
            光标系列属性:cursor
            元素可见属性:visibility
3、优先级  --- 胜者为王,败者为寇
    定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题
​
    1.继承样式的权重为0
        即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式
    2.行内样式优先
        应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级
    3.权重相同时,CSS遵循就近原则
        也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大
    4.CSS定义了一个!important命令,该命令被赋予最大的优先级
        也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级

(三)、CSS 权重

优先级规则:
        规则1:最近的祖先样式比其他祖先样式优先级高
        规则2:"直接样式"比"祖先样式"优先级高
        规则3: 优先级关系:内联样式 > ID 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器
        
        规则4:权重原则     (内联)        1000、
                         (id)          0100、
                         (类,伪类,属性) 010、
                         (元素,伪元素)  0001、
                          其他           0000、继承属性没有权重
        规则5:属性后插有 !important 的属性拥有最高优先级,若同时存在,则再利用规则 3、4 判断优先级

(四)、CSS 权重CSS 设置样式

1、CSS基础选择器(设置样式的元素)

基本选择器
​
    1、通配符选择器
        * {
​
        }
        * 选择的是当前页面中所有的元素
​
    2、元素选择器  =======  权重为1
        元素名称 {
​
        }
        选择的是 当前页面中的 某一类元素
​
    3、id 选择器  =======  权重为100
        # id {
​
        }
        id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
        id 是独一无二的
​
    4、class 选择器 =======  权重为10
        .class {
​
        }
        class 选择器用于描述一组元素的样式,
        class 选择器有别于id选择器,class可以在多个元素中使用
        一个元素可以设置多个类名
​
    5、群组选择器
        使用逗号(,)表示
        把多个选择器写在一起,方便样式的组织管理,组内的选择器是任意类型的
​
    6、伪类选择器=======  权重为10
        伪类,用于向某些选择器添加特殊的效果。
        用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上
​
        设置 a标签 的四种状态
        :link访问前的状态
        :visited访问后的状态
        :hover鼠标移入效果
        :active激活状态(按下未松开)
        l-v-h-a : love-hate按照顺序书写
​
        需要注意的是:除了超链接的4种伪类选择器之外,其他伪类和伪对象选择器不被 IE6 及其以下版本浏览器支持
​
    7、后代选择器
        使用空格( )表示
        前面的一个选择器表示包含框对象的选择器,而后面的选择器表示被包含的选择器
​
    8、伪元素选择器  =======  权重为1
        伪元素,是html中不存在的元素,仅在css中用来渲染的,伪元素创建了一个虚拟容器,
        这个容器不包含任何DOM元素,但是可以包含内容
​
        ::after         在选择器后增加内容
        ::before        在选择器前增加内容
        ::placeholder   设置input元素的placeholder内容的样式
        ::first-letter  选择器的首字母
        ::first-line    选择器的首行
        ::selection     改变被用户选取的部分文字的样式

二、CSS3 新增

(一)、什么是 CSS3

CSS3是CSS(层叠样式表)技术的升级版本,
于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,
主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
​
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块
浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,
CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性
但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂

(二)、渐进增强和优雅降级(面试题)

渐进增强(Progressive Enhancement):
    一开始就针对低版本浏览器进行构建页面,完成基本的功能,
    然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验
    渐进增强相当于向上兼容
​
优雅降级(Graceful Degradation):
    一开始就构建站点的完整功能,然后针对浏览器测试和修复
    比如一开始使用 CSS3 的特性构建了一个应用
    然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览
    优雅降级相当于向下兼容
​
区别
    优雅降级是从复杂的现状开始,并试图减少用户体验的供给
    而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要
    降级(功能衰减)意味着往回看
    而渐进增强则意味着朝前看,同时保证其根基处于安全地带

(三)、CSS3 新增选择器

1、层级选择器 
    使用大于号(>)表示 E > F
        子选择器 选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素
    使用波浪线(+)表示 E + F
        相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面
    使用波浪线(~)表示 E ~ F
        相邻选择器类似,选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素
​
2、属性选择器  =======  权重为10
    E[attr]:只使用属性名,但没有确定任何属性值
    E[attr="value"]:指定属性名和属性值(值完整)
    E[attr~="value"]:指定属性名,并且具有属性值,
    此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词
    E[attr^="value"]:属性值是以value开头的(一部分也可以)
    E[attr$="value"]:属性值是以value结束的(一部分也可以)
    E[attr*="value"]:属性值中包含了value(一部分也可以)
    E[attr|="value"]:属性值是value或者以“value-”开头的值
​
3、结构伪类选择器   =======  权重为10
    (el):first-child            匹配属于任意元素的第一个子元素的 el 元素
    (el):first-of-type          选择父元素中的第一个 el 元素
    (el):last-child             选择所有 el 元素的最后一个子元素
    (el):last-of-type           选择父元素中最后一个 el 元素
    
    (el):empty                  匹配没有子元素(包括文本节点)的 el 元素
    
    (el):nth-child(n)           选择所有 el 元素的父元素的第 n 个子元素
    (el):nth-of-type(n)         选择所有p元素第 n 个为 el 的子元素
    (el):nth-last-child(n)      选择所有 el 元素倒数的第 n 个子元素
    (el):nth-last-of-type(n)    选择所有p元素倒数的第 n 个为 el 的子元素
        odd  even  numN
    (el):only-child             选择所有仅有一个子元素,并且子元素是 el 元素
    (el):only-of-type           选择所有仅有一个子元素中为 el 的元素
​
4、否定伪类选择器 =======  权重为10
    :not(el)                选择所有 el 以外的元素
​
5、状态(表单元素)伪类选择器 =======  权重为10
    :focus                      选择元素输入后具有焦点
    :enabled                    匹配每个已启用的元素
    :disabled                   匹配每个被禁用的元素
    :checked                    匹配每个已被选中的  元素
    :required                   选择有"required"属性指定的元素属性
    :optional                   选择没有"required"的元素属性
    :read-only                  选择只读属性的元素属性
    :read-write                 选择没有只读属性的元素属性
    :valid                      选择所有有效值的属性
    :invalid                    在表单元素中的值是非法时设置指定样式
    :in-range                   用于标签的值在指定区间值时显示的样式
    :out-of-range               选择指定范围以外的值的元素属性
​
6、目标伪类选择器  =======  权重为10
    E:target
    用来匹配文档中url中某个标志符的目标元素
    url中的标志通常会包含一个#,后面带有一个标志符名称
    
    target的大白话总结:
        ●指定选择器:#brand:target 对应的 a标签一点击,则会触发此样式!
        ●自动匹配全部选择器:target 只要对应的a标签点击,则匹配的选择器就自  动触发样式!
​
    target 实现 tab 切换的案例
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值