码迷,mamicode.com
首页 > Web开发 > 详细

WEB前端 CSS选择器

时间:2019-11-16 23:22:56      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:eve   嵌套   gre   溢出   伪类   第一个   port   多重   one   

WEB前端-CSS选择器(CSS背景)

交集选择器

交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器
注:用的相对来说比较少,不太建议使用。

h3.title{color:red;}

标签下的类名:h3标签下类名叫title

并集选择器

如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

子元素选择器

子元素选择器: 拥有父类的元素称为子元素

.demo > h3 {color: red;}   类名demo下的子标签h3标签

属性选择器

选取标签带有某些特殊属性的选择器

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
            color: green;
        }
<div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>

伪元素选择器(CSS3)

  1. E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
  2. E::first-line 文本第一行;
  3. E::selection 可改变选中文本的样式;
  4. E::before和E::after
  5. 在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。
p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}
div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

CSS背景

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。

背景缩放(CSS3)

通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下:

a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)

b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
            background-size: 300px 100px;
            /* background-size: contain; */
            /* background-size: cover; */

多背景(CSS3)

以逗号分隔可以设置多背景,可用于自适应布局 做法就是 用逗号隔开就好了。

  • 一个元素可以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
  • 为了避免背景色将图像盖住,背景色通常都定义在最后一组上,
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

凹凸文字

<head>
        <meta charset="utf-8">
        <style>
        body {
            background-color: #ccc;
        }
        div {
            color: #ccc;
            font: 700 80px "微软雅黑";
        }
        div:first-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child {
            /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }

        </style>
    </head>
    <body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
    </body>

CSS 三大特性

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。
一般情况下,按照CSS顺序,以最后的样式为准。

  1. 样式冲突,遵循的原则是就近原则。

CSS继承性

所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号
注:子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)

CSS优先级

继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

CSS特殊性(Specificity)

关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:

specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

继承或者* 的贡献值 0,0,0,0
每个元素(标签)贡献值为 0,0,0,1
每个类,伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 ∞ 无穷大

权重是可以叠加的

例子:

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1
总结优先级:

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则。
同一类选择器则遵循就近原则。

注意: 
继承的 权重是 0
数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0。

WEB前端 CSS选择器

标签:eve   嵌套   gre   溢出   伪类   第一个   port   多重   one   

原文地址:https://www.cnblogs.com/wuyanzu/p/11874289.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!