Css高级应用

今天发现一篇文章，名为“征服高级CSS选择器”  再结合我自己的观点和经验。 分享给大家

说实话，接触了网络，编写了近三年的网页还真没接触过css这么高级的应用，虽然这些实现用Jq就可以实现（其实平时遇到也是用jq去做的），但是用css 可以减少浏览器解析网页的压力。好了，进入正题。

一、属性选择器

属性（Attribute selector）选择器可以根据标签内的属性定位某个元素。比如 input 标签的 type、value都是属性，a标签的 href、target、class也是属性、img标签的src、alt、title等。贴代码

CSS:

 

input[type="text"]{color:#ff0000;}

 

类似jq的 $("input[type='text']").css("color","#ff0000");

 

然后再跟大家介绍一下有几种比较方法

1·[att=value]

比如 [class="aa"]，查找class的值是aa的元素。

2·[att ~=value]

比如[class="aa bb cc"]，查找class 是 aa、bb、cc的元素，值中间用空格隔开。

3·[att|=value]

比如[class|="aa"]，查找class的值是 aa-xx元素，值是aa后面必须带个“-”， xx代表任意字符。

4·[att^=value]

比如[class^="a"]，查找class的值以a开头的元素。

5·[att$=value]

比如[class$="a"]，查找class的值只要包含a的元素，无论位置在哪里。

6·[att*=value]

比如[class*="a"]，查找class的值以a结束的元素。

 

二、子选择器

子选择器用符号 “>” 表示，他表示查找此元素的第一代子元素，而不是css的继承。比如下面的这段html代码

 

<div>
<p id="p1" >
我是div的儿子
<p id="p2">我是p的儿子</p> 
</p> 
</div>

Css

div > p{background:#f00;}

上面这段css 只能改变 id="p1" 的style。

类似jq的 $("div > p").css("color","#ff0000");

 

三、兄弟组合

兄弟选择器用“+” 表示，他查找加号之前的标签相邻的下一个元素，用兄弟选择器必须达到两个条件，加好前后的两个元素必须在同一个标签下并且加号后面的标签必须紧接在加号前的元素的后面。

<p>我是p</p>
<h5>我是会h5</h5>

Css

p+h5{color:#f00;}

上面这段css就可以指定p后面的style

类似jq的 $("p+h5").css("color","#ff0000");

 

四、动态伪类

动态伪类就是，当用户与网站产生交互操作的时候才发生的。比如 active、hover、focus。

active是鼠标按下的时候

hover是鼠标经过的时候

focus是控件获取焦点的时候

 

<input type="text" />

 

Css

input:active{background:#f00;}
input:hover{background:#ff0;}
input:focus{background:#0ff;}

 

 

感觉jquery里面的方法跟css的高级应用很相似。 大家如果用过jquery来处理这些效果，还是赶紧改用css吧。这样也节省了浏览器计算的压力。交给css进行页面渲染吧。