你的位置:首页 > 网页设计

[网页设计]【鬼脸原创】后端程序员前端之路02


目录

  • CSS选择器
  1. ID选择器
  2. 类选择器
  3. 标签选择器
  4. 伪类选择器
  5. 基于关系的选择器
  6. 属性选择器
  7. 伪对象选择器
  • CSS层叠 
  1. 定义样式的三种方式
  2. 这三种方式的优先级
  3. 开发者定义的样式详解
  • CSS继承
  • 样式优先级机制

 

一、CSS选择器?

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

 

 

 

 

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

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

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

:activea:active

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

基于关系的选择器
选择器例子描述
element,elementdiv,p选择所有<div>元素和<p>元素
element elementdiv p选择<div>元素内的所有<p>元素 (所有子孙元素)
element>elementdiv>p选择所有父级是 <div> 元素的 <p> 元素
element+elementdiv+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”结尾的所有元素

 

 

 

 

 

 

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

 

 

 

 

 

 

 

二、CSS层叠

      1、一个元素的样式,可以通过多种方式定义:1)浏览器默认样式   2)用户自定义的样式  3)开发者定义的样式

      2、上述上中方式之间的优先级:开发者定义样式 > 用户自定义样式 > 浏览器默认样式

      3、而开发者定义的样式又分为三种情况:

          1)定义为单独的CSS文件  :开发中多为这种形式,易维护、扩展   

          2)定义在html页面中的<style></style>标签内  : 这种适用于当前页面独立,样式较少的情况

          3)直接写在元素上的style属性内 :建议仅测试适用,可维护行较差

          Q:如果涉及到相同权重值(见下方第四点)的CSS样式时,到底用哪个呢?

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

三、CSS继承

       CSS继承是一种规则,它允许某些样式不仅应用于元素本身,还可以应用于其后代。

      比如:color就可以被继承 。下面这段代码,<p>标签连同子级<span>标签的文字都会变为红色。

p{color:red;}<p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

     而border就不能够被继承。下面这段代码,只是给p标签设置了边框为1像素、红色、实心边框线,而对于子元素span是没用起到作用的。

p{border:1px solid red;}<p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</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*/