CSS选择器详解

目录

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

 

一、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元素是其父级的第一个子级(也就是说,只有p元素是第一个子元素时,才会应用样式;  而不是选择每个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)用户自定义的样式  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*/

 

 

     

 

posted @ 2016-03-03 15:42 雷明nice 阅读(...) 评论(...) 编辑 收藏