新浦京81707con > 功能介绍 > 后端程序员前端之路,后端程序员前端之路02

原标题:后端程序员前端之路,后端程序员前端之路02

浏览次数:107 时间:2019-11-20

【种类】后端工程师前端之路(2015/3/24立异卡塔 尔(阿拉伯语:قطر‎,后端2015

  • 后端程序猿前端之路01
  • 后端技术员前端之路02--CSS选用器安详严整
  • 后端技术员前端之路03--HTML语义化
  • 后端程序猿前端之路04--html成分分类
  • 后端程序猿前端之路05--盒子模型精解
  • 后端程序员前端之路06--布局模型,颜色值,长度值

 

 

 

 

--不断更新中,假使有支持到你,请点“推荐”。你的扶植,是作者百折不挠的引力O(∩_∩)O谢谢~

后端技士前端之路01 后端程序猿前端之路02--CSS选取器详细明白后端程序猿前端之路...

【鬼脸原创】后端技术员前端之路02--CSS选择器精解,02--css选取器

目录

  • CSS选择器
  • CSS层叠 
  • CSS继承
  • 体制优先级机制

 

一、CSS选择器?

最基础的选择器
选择器 例子 描述
#id #firstname ID选择器,选取Id=firstname的元素
.class .myclass 类选择器,选取class=myclass的所有元素
element p 标签选择器,选取所有<p>元素

 

 

 

 

伪类选择器
选择器 例子 描述
:link a:link 匹配所有未被点击的链接,通常用于<a>元素。
:visited a:visited 匹配所有已被访问的链接。
:hover a:hover

选择鼠标指针位于其上的链接。

提示: :hover 选择器器可用于所有元素,不仅是链接。

:active a:active

匹配被用户激活的链接--用户按下按键未松开时的状态。

为了产生预期的效果,以上四个选择器必须得按照先后顺序排列   :link — :visited — :hover — :active

:first-child p:first-child 选择每个p元素是其父级的第一个子级
:last-child p:last-child  选择每个p元素是其父级的最后一个子级
:empty p:empty 选择每个没有任何子级的p元素(包括文本节点)
:enabled input:enabled 选择每一个已启用的输入元素
:disabled input:disabled 选择每一个禁用的输入元素
:checked input:checked 选择每个选中的输入元素

 

 

 

 

 

 

 

 

 

 

 

 

基于关系的选择器
选择器 例子 描述
element,element div,p 选择所有<div>元素和<p>元素
element element div p 选择<div>元素内的所有<p>元素 (所有子孙元素)
element>element div>p 选择所有父级是 <div> 元素的 <p> 元素
element element div p 选择所有紧接着<div>元素之后的<p>元素

 

 

 

 

 

属性选择器
选择器 例子 描述
[attribute] [target] 选择所有带有target属性元素
[attribute=value] [target=_blank] 选择所有使用target="_blank"的元素
[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素
[attribute*=value] [title*=flower] 选择标题属性包含字符串"flower"的所有元素
[attribute^=value] [title^=flower] 选择标题属性以“flower”开头的所有元素
[attribute$=value] [title$=flower] 选择标题属性以“flower”结尾的所有元素

 

 

 

 

 

 

伪对象选择器
选择器 例子 属性
:after p:after{content:"hello";} 在每个<p>标签内的最后插入内容“hello” ,通常搭配content来使用
:before p:before{content:"hello";} 在每个<p>标签内的最前插入内容“hello” 
:first-letter p:first-letter 选择每一个<p>元素的第一个字母
:first-line p:first-line 选择每一个<P>元素的第一行

 

 

 

 

 

 

 

二、CSS层叠

      1、一个要素的样式,能够通过各种艺术定义:1卡塔尔国浏览器暗中认可样式   2卡塔 尔(英语:State of Qatar)用户自定义的体裁  3卡塔尔开荒者定义的体裁

      2、上述上中艺术之间的优先级:开采者定义样式 > 顾客自定义样式 > 浏览器默许样式

      3、而开拓者定义的体裁又分为三种情景:

          1卡塔 尔(阿拉伯语:قطر‎定义为单独的CSS文件  :支出中多为这种方式,易维护、扩展   

          2)定义在html页面中的<style></style>标签内  : 这种适用于最近页面独立,样式少之又少的处境

          3卡塔尔直接写在要素上的style属性内 :提议仅测验适用,可爱慕行比较糟糕

          Q:借使波及到相通权重值(见下方第四点卡塔 尔(英语:State of Qatar)的CSS样式时,到底用哪些吧?

          A:一句话总括:“就近原则”,先离的近,用谁。所以三者优先级依次: 3> 2 >1       

三、CSS继承

       CSS世袭是意气风发种法则,它同意或多或少样式不光利用于成分自己,还足以选择于其后裔。

      举个例子:color即可被世袭。下边这段代码,<p>标签连同子级<span>标签的文字都会化为桃红。

p{color:red;}

<p>三年级时,我还是一个胆小如鼠的小女孩。</p>

     而border就不可以预知被一而再三回九转。下边这段代码,只是给p标签设置了边框为1像素、稻草黄、实心边框线,而对于子元素span是没用起到效用的。

p{border:1px solid red;}

<p>三年级时,我还是一个胆小如鼠的小女孩。</p>

四、样式优先级机制

      固然一个标签上使用了不一致体制代码,就能够波及到三个优先级(权重值)的难点,到底最终怎么职能才干见到成效?

 各种选择器的权重值
选择器 权重值
id选择器 100
类选择器 10
伪类选择器 10
属性选择器 10
标签选择器 1
伪对象选择器 1
继承 0.1
通配符(*) 0

      

       

 

 

 

 

 

 

    假诺是各种选用器一齐使用,则要求把各类采取器的权重加起来,才代表最终的权值。比如:    

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1 1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1 1 10=12*/
#footer .note p{color:yellow;} /*权值为100 10 1=111*/

 

 

     

 

目录 CSS选拔器 CSS层叠 CSS世襲 样式优先级机制 生龙活虎、CSS接受器? 最根底的...

前端--关于CSS,前端--CSS

CSS全名层叠样式表,层叠的意义有八个:1.如约特殊性的高低,特殊性高的掩没非常性低的体制注脚;2.不一致种性别质的体裁注脚要合并;3.后现身的同等的样式证明覆盖先现身的。所以要改成样式的事先级也会有三种办法:1.进步选取器的特殊性;2.转移样式的前后相继顺序;3.在需求升高优先级的体制证明分号前面加上!important;

层叠样式表实际上也是后生可畏种语言--样式设计语言。既然是风姿浪漫种语言,它就能够有友好的语法。层叠样式表的语法固然和HTML肖似简单,但还没HTML那么轻易无情一下就全领悟了。那根本是因为css语法则则涉及内容比HTML多一些,所以先介绍以下3条最基本的语法:

1.二个样式准则由两部分组成:采取器和注解块,注解块用大括号括起来。

2.各类证明块由单个评释组成,单个评释是由冒号分开的品质-值对组合,并以分号结尾(最终一个扬言能够不写分号卡塔 尔(阿拉伯语:قطر‎;

3.css注释的写法为/* */,未有双斜线//的笺注写法,那一点和javascript分化。

例如 h2 {color:red;background-color:blue;}

规范的css仿效平时都会有七个有关属性取值的声明,那天本性取值表达也可以有自身的意气风发套法规写法,这里先简介一下,但不用专门介怀那些事物,毕竟本身理解怎么写就能够。

先是是关于属性值的语法:

1.属性值能够是任重先生而道远字 比方 small 、normal等

2.属性值能够是某些项指标值,写法是生龙活虎对尖括号<>中间写上体系的名字  举个例子 <length> 可取20px 30px ...、<color>可取red、blue

其次是有关属性值组合运算符的语法:

1.空格  表示空格分开的属性值都要有同不经常候前后相继顺序不可能乱。

2.&&   表示&&分开的属性值都要有可是先后顺序可以私自。

3.||    表示||分开的属性值起码要现身叁个,顺序能够放肆。

4.|     表示|分开的属性值只可以现身二个

5.[]    []的效果就是分组,把[]用作多少个属性值全部

末段是有关数量符号的语法:

1.属性值后边为空表示只可以现身二次。

2.属性值前面为 号表示该属性值要出新1次上述

3.属性值前面为?号表示该属性值现身0次照旧0次上述

4.属性值后边为{},{1,3}表示该属性值现身1到3次

5.属性值前边为#代表属性值现身一回仍然一遍以上,但各种属性值要用逗号,隔绝

这几个和正则表明式的规规矩矩相似。

比如   letter-spacing  值:<length>|normal    表示letter-spacing只好为数字只怕根本字normal

 

CSS全名层叠样式表,层叠的意义有多个:1.按照特殊性的高低,特殊性高的覆盖极度性低的体制注明;2.不风度翩翩属性的...

本文由新浦京81707con发布于功能介绍,转载请注明出处:后端程序员前端之路,后端程序员前端之路02

关键词: 新浦京81707con

上一篇:Hash Join与NLJOIN及MSJOIN

下一篇:没有了