高明的CSS3选拔器,具体落成

精干的CSS3拔取器

2016/02/04 · CSS · 2
评论 ·
选择器

原稿出处:
大额_skylar(@大额大额哼歌等日落)   

每种前端工程师只怕每一日都会写一些css,其中采用器是很重点的一片段。不过,大家莫不每一日写的大多是#id,.class那样的采纳器,那并不希罕,可是只要我们询问并且熟用css3为大家提供的雄强并且优雅的采纳器,就可以简化大家的代码。

自家在读书和整理css3的接纳器的时候都不会去考虑它的浏览器的支撑程度,如若有须求,能够在此地查看它的浏览器协理处境:「caniuse.com」。

print?<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; 
<html xmlns=”; 
<head> 
    <title>YanCms右侧导航栏</title> 
    <script src=”js/jquery-1.4.2.min.js”
type=”text/javascript”></script> 
    <script src=”js/jquery-ui-1.8.custom.min.js”
type=”text/javascript”></script> 
    <script type=”text/javascript”> 
        $(document).ready(function () { 
            //#title代表页面中点击的因素 
            $(“.title”).click(function () { 
                var con = $(this).html(); 
                //#getTitle代表页面中想要拿到title的值成分 
                $(“#getTitle”).html(con); 
                //$(this).attr(‘href’)获取超链接 
                var con1 = $(this).attr(‘href’); 
高明的CSS3选拔器,具体落成。               // $(“#getTitle”).attr(“href”, “con1”); 
               // alert(con1); 
            }); 
        }); 
   </script> 
    <script type=”text/javascript”> 
        jQuery().ready(function () { 
            jQuery(“#navigation”).accordion({ 
                header: ‘.head’, 
                event: ‘click’, 
                fillSpace: true, 
                animated: ‘bounceslide’ 
            }); 
        }); 
    </script> 
    <link href=”css/left.css” rel=”stylesheet” type=”text/css”
/> 
    </head> 
<body style=”background-color:#e6f4fa;” > 
        <div class=”subMenuTitle” id=”getTitle”><a
href=”#”>主成效菜单</a></div> 
        <div style=”height:100%;”> 
            <ul id=”navigation”> 
                <li> 
                    <a class=”head”>种类管理</a> 
                    <ul> 
                        <li class=”title”> 
                            <a href=”#1233333″
>博文列表</a> 
                        </li> 
                         
                        <li class=”title”> 
                            <a href=”#”>添加博文</a> 
                        </li> 
                    </ul> 
                </li> 
                <li> 
                    <a class=”head”>连串管理</a> 
                    <ul> 
                        <li> 
                            <a href=”#” target=”rightFrame”>
系列列表</a> 
                        </li> 
                    </ul> 
                </li> 
                <li> 
                    <a class=”head”>友情链接</a> 
                    <ul> 
                        <li> 
                            <a href=”#” target=”rightFrame”>
链接列表</a> 
                        </li> 
                        <li> 
                            <a href=”#”
target=”rightFrame”>添加链接</a> 
                        </li> 
                         
                    </ul> 
                </li> 
                <li> 
                    <a class=”head”>系统管理</a> 
                    <ul> 
                        <li> 
                            <a href=”#”
target=”rightFrame”>修改管理员密码</a> 
                        </li> 
                         
                     
                    </ul> 
                </li> 
                 
                <li> 
                    <a class=”head”>权限管理</a> 
                    <ul> 
                        <li> 
                            <a href=”#”
target=”rightFrame”>暂未开放</a> 
                        </li> 
                        <li> 
                            <a href=”#”
target=”rightFrame”>暂未开放</a> 
                        </li> 
                         
                     
                    </ul> 
                     
                </li> 
亚洲必赢官网,            </ul> 
        </div> 
        
    </body> 
</html> 

亚洲必赢官网 1

复制代码 代码如下:

一、基本接纳器

 1. 通配拔取器 「*」

CSS

*{margin: 0;padding: 0}
//接纳页面中的所有因素并设置margin和padding值为0 .demo
*{background:#000}
//选取类名为demo的要素下边的富有因素并设置背景为土黑

1
2
*{margin: 0;padding: 0} //选择页面中的所有元素并设置margin和padding值为0
.demo *{background:#000} //选择类名为demo的元素下面的所有元素并设置背景为黑色

 

2.成分抉择器 「Element」

CSS

body{background:#ccc} //选择body元素 ul{background:#fff}
//接纳列表ul成分

1
2
body{background:#ccc} //选择body元素
ul{background:#fff} //选择列表ul元素

 

3.ID选择器 「#id」

CSS

html: <div id=”demo”></div> css: #demo{do something}

1
2
3
4
html:
<div id="demo"></div>
css:
#demo{do something}

 

4.类采纳器 「.class」

CSS

html: <ul class=”demo”></ul> css: .demo{do something}
ul.demo{do something} //那样只会挑选有demo类名的ul成分

1
2
3
4
5
html:
  <ul class="demo"></ul>
  css:
  .demo{do something}
  ul.demo{do something} //这样只会选择有demo类名的ul元素

亟需小心的是:多少个页面成分得以有平等的类名,不过成分的id在页面中必须是唯一的。

 

5.群组采纳器 「selector1,…,selectorN」

CSS

html: <div class=”section-1″></div> <div
class=”section-2″></div> <div
class=”section-3″></div> ccss:
.section-1,.section-2,.section-3{do something}
//给多个页面成分定义公用的样式

1
2
3
4
5
6
html:
<div class="section-1"></div>
<div class="section-2"></div>
<div class="section-3"></div>
ccss:
.section-1,.section-2,.section-3{do something} //给三个页面元素定义公用的样式

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
    <title>YanCms右边导航栏</title>
    <script src=”js/jquery-1.4.2.min.js”
type=”text/javascript”></script>
    <script src=”js/jquery-ui-1.8.custom.min.js”
type=”text/javascript”></script>
    <script type=”text/javascript”>
        $(document).ready(function () {
            //#title代表页面中点击的因素
            $(“.title”).click(function () {
                var con = $(this).html();
                //#getTitle代表页面中想要得到title的值成分
                $(“#getTitle”).html(con);
                //$(this).attr(‘href’)获取超链接
                var con1 = $(this).attr(‘href’);
               // $(“#getTitle”).attr(“href”, “con1”);
               // alert(con1);
            });
        });
   </script>
    <script type=”text/javascript”>
        jQuery().ready(function () {
            jQuery(“#navigation”).accordion({
                header: ‘.head’,
                event: ‘click’,
                fillSpace: true,
                animated: ‘bounceslide’
            });
        });
 </script>
    <link href=”css/left.css” rel=”stylesheet” type=”text/css”
/>
 </head>
<body style=”background-color:#e6f4fa;” >
        <div class=”subMenuTitle” id=”getTitle”><a
href=”#”>主功用菜单</a></div>
  <div style=”height:100%;”>
   <ul id=”navigation”>
    <li>
     <a class=”head”>序列管理</a>
     <ul>
      <li class=”title”>
       <a href=”#1233333″ >博文列表</a>
      </li>
      
      <li class=”title”>
       <a href=”#”>添加博文</a>
      </li>
     </ul>
    </li>
    <li>
     <a class=”head”>连串管理</a>
     <ul>
      <li>
       <a href=”#” target=”rightFrame”> 系列列表</a>
      </li>
        </ul>
    </li>
    <li>
     <a class=”head”>友情链接</a>
     <ul>
      <li>
       <a href=”#” target=”rightFrame”> 链接列表</a>
      </li>
      <li>
       <a href=”#” target=”rightFrame”>添加链接</a>
      </li>
      
     </ul>
    </li>
    <li>
     <a class=”head”>系统管理</a>
     <ul>
      <li>
       <a href=”#” target=”rightFrame”>修改管理员密码</a>
      </li>
      
     
     </ul>
    </li>
    
    <li>
     <a class=”head”>权限管理</a>
     <ul>
      <li>
       <a href=”#” target=”rightFrame”>暂未开放</a>
      </li>
      <li>
       <a href=”#” target=”rightFrame”>暂未开放</a>
      </li>
      
     
     </ul>
     
    </li>
   </ul>
  </div>
      
 </body>
</html>

上学了效益一级无敌的jQuery选取器,真的不了然怎么样用言语讲述这个职能了,比葫芦画瓢写了个程序,来证实各个选用器的功效。。。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
    <title>YanCms左边导航栏</title>
    <script src=”js/jquery-1.4.2.min.js”
type=”text/javascript”></script>
    <script src=”js/jquery-ui-1.8.custom.min.js”
type=”text/javascript”></script>
    <script type=”text/javascript”>
        $(document).ready(function () {
            //#title代表页面中点击的要素
            $(“.title”).click(function () {
                var con = $(this).html();
                //#getTitle代表页面中想要拿到title的值成分
                $(“#getTitle”).html(con);
                //$(this).attr(‘href’)获取超链接
                var con1 = $(this).attr(‘href’);
               // $(“#getTitle”).attr(“href”, “con1”);
               // alert(con1);
            });
        });
   </script>
    <script type=”text/javascript”>
        jQuery().ready(function () {
            jQuery(“#navigation”).accordion({
                header: ‘.head’,
                event: ‘click’,
                fillSpace: true,
                animated: ‘bounceslide’
            });
        });
    </script>
    <link href=”css/left.css” rel=”stylesheet” type=”text/css”
/>
    </head>
<body style=”background-color:#e6f4fa;” >
        <div class=”subMenuTitle” id=”getTitle”><a
href=”#”>主功用菜单</a></div>
        <div style=”height:100%;”>
            <ul id=”navigation”>
                <li>
                    <a class=”head”>系列管理</a>
                    <ul>
                        <li class=”title”>
                            <a href=”#1233333″
>博文列表</a>
                        </li>

二、层次采用器

6.子孙选用器「E F」

选料匹配E的成分内的兼具匹配F的因素。

XHTML

html: <div class=”parent”> <div class=”child”></div>
<div class=”child”> <div class=”c-child”> <div
class=”c-c-child”></div> </div> </div> </div>
css: .parent div{do something}
//会接纳parent里面的装有div,不管是子成分.child如故孙元素.c-child和.c-c-child

1
2
3
4
5
6
7
8
9
10
11
12
13
html:
<div class="parent">
        <div class="child"></div>
        <div class="child">
             <div class="c-child">
                  <div class="c-c-child"></div>
            </div>
        </div>    
</div>
 
css:
 
.parent div{do something} //会选择parent里面的所有div,不管是子元素.child还是孙元素.c-child和.c-c-child

 

7.子采取器「E > F」

分选配配E的要素的匹配F的直系子成分。

XHTML

html: <div class=”parent”> <div class=”child”></div>
<div class=”child”> <div class=”c-child”> <div
class=”c-c-child”></div> </div> </div> </div>
css: .parent > div{do something}
//只会选用.parent成分的直系子成分,也等于只会采纳到 .child成分

1
2
3
4
5
6
7
8
9
10
11
12
html:
  <div class="parent">
          <div class="child"></div>
          <div class="child">
               <div class="c-child">
                    <div class="c-c-child"></div>
              </div>
          </div>    
  </div>
 
css:
.parent > div{do something} //只会选择.parent元素的直系子元素,也就是只会选择到 .child元素

 

8.相邻弟兄成分选用器「E + F」

E和F是同辈成分,具有同等的父成分,并且F元素紧邻在E成分的前面,此时得以行使相邻兄弟采取器。

XHTML

html: <div> <div class=”demo”>1</div>
<div>2</div> <div>3</div> </div> css:
.demo + div {do something}//会选中内容为2的div

1
2
3
4
5
6
7
8
9
10
html:
<div>
    <div class="demo">1</div>
    <div>2</div>
    <div>3</div>
</div>
 
css:
 
.demo + div {do something}//会选中内容为2的div

 

9.通用兄弟选拔器「E ~ F」

E和F是同辈成分,具有同样的父成分,并且F成分在E成分之后,E ~
F将选中E成分后边的保有F成分。

XHTML

html: <div> <div class=”demo”>1</div>
<div>2</div> <div>3</div>
<div>4</div> </div> css: .demo ~ div {do
something}//会选中内容为2,3,4的div

1
2
3
4
5
6
7
8
9
10
11
html:
  <div>
      <div class="demo">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
  </div>
 
  css:
 
.demo ~ div {do something}//会选中内容为2,3,4的div

 

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “;
<html xmlns=”;
<head>
    <title></title>

                        <li class=”title”>
                            <a href=”#”>添加博文</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a class=”head”>种类管理</a>
                    <ul>
                        <li>
                            <a href=”#” target=”rightFrame”>
序列列表</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a class=”head”>友情链接</a>
                    <ul>
                        <li>
                            <a href=”#” target=”rightFrame”>
链接列表</a>
                        </li>
                        <li>
                            <a href=”#”
target=”rightFrame”>添加链接</a>
                        </li>

三、伪类拔取器

10.动态伪类选用器「E:link,E:visited,E:active,E:hover,E:focus」

E:link{do something} //拔取定义了超链接但链接还未被访问过的因素
E:visited{do something} //拔取定义了超链接并且链接已经被访问过的要素
E:active{do something}
//接纳匹配的E成分,且成分被激活,常用在锚点和按钮上 E:hover{do
something} //采用鼠标停留的合营的E成分 E:focus{do something}
//采纳匹配的E成分,且成分得到主题

1
2
3
4
5
E:link{do something} //选择定义了超链接但链接还未被访问过的元素
E:visited{do something} //选择定义了超链接并且链接已经被访问过的元素
E:active{do something} //选择匹配的E元素,且元素被激活,常用在锚点和按钮上
E:hover{do something} //选择鼠标停留的匹配的E元素
E:focus{do something} //选择匹配的E元素,且元素获得焦点

 

11.目标伪类拔取器「E:target」

接纳匹配E的持有因素,且匹配成分被相关U智跑L指向。

通俗点说,页面的url假设带有#something那样的字样(https://rawgit.com/zhangmengxue/Practice/master/demo.html\#section-1)那么:target就是用来合营页面中id为#something(section-1)的要素的。

那里有一个demo,利用:target达成纯css的手风琴效果:[查阅源码][运行demo]

 

12.语言伪类采纳器「E:lang(language)」

用来挑选指定了lang属性的因素,其值为language。

CSS

html: <html lang=”en-US”></html> css: :lang(en-US) {do
something}

1
2
3
4
5
html:
<html lang="en-US"></html>
 
css:
:lang(en-US) {do something}

奇迹网页切换不相同的言语版本的时候,能够通过那些选取器做一些不相同平日的拍卖。

 

13.情况伪类选用器「E:checked,E:enabled,E:disabled」

E:checked{do something} //匹配表单中被入选的单选按钮或复选按钮
E:enabled{do something} //匹配所有起用的表单成分 E:disabled{do
something} //匹配所有禁用的表单成分

1
2
3
E:checked{do something} //匹配表单中被选中的单选按钮或复选按钮
E:enabled{do something} //匹配所有起用的表单元素
E:disabled{do something} //匹配所有禁用的表单元素

 

14.社团伪类采纳器「E:first-child,E:last-child,E:root,E:nth-child(n),E:nth-last-child(n),E:nth-of-type(n),E:nth-last-of-type(n),E:first-of-type,E:last-of-type,E:only-child,E:only-of-type,E:empty」

 

14.1 [E:first-child]

用来挑选一定成分的率先个子成分。

XHTML

html: <ul> <li>1</li> <li>2</li>
<li>3</li> <li>4</li> <li>5</li>
</ul> css: ul > li:first-child {do something}
//用来接纳ul中的第三个li成分

1
2
3
4
5
6
7
8
9
10
11
html:
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
css:
 
ul > li:first-child {do something} //用来选取ul中的第一个li元素

 

14.2 [E:last-child]

用来采取一定成分的最终一个子成分。

XHTML

html: <ul> <li>1</li> <li>2</li>
<li>3</li> <li>4</li> <li>5</li>
</ul> css: ul > li:last-child {do something}
//用来采取ul中的最后一个li成分

1
2
3
4
5
6
7
8
9
10
html:
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
  css:
  ul > li:last-child {do something} //用来选取ul中的最后一个li元素

 

14.3 [E:nth-child()],[E:nth-last-child()]

用来抉择某个父元素的一个或多个特定的子成分,其中的n可以是数值(从1初叶),也得以是带有n的说明式,也足以是odd(奇数),even(偶数)。

E:nth-last-child()拔取器的利用办法于E:nth-child()是均等的,不一样的是E:nth-last-child()选拔的因素是从父成分的最终一个子成分开端算起。

XHTML

html: <ul> <li>1</li> <li>2</li>
<li>3</li> <li>4</li> <li>5</li>
</ul> css: ul > li:nth-child(2n+1) {do something}
//用来采取ul中的第2n+1(奇数)个li成分

1
2
3
4
5
6
7
8
9
10
html:
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
  css:
   ul > li:nth-child(2n+1) {do something} //用来选取ul中的第2n+1(奇数)个li元素

 

14.4  [E:root]

用来匹配成分E所在的文档中的根成分,在html文档中根成分就始终是html。

 

14.5 [E:nth-of-type(),E:nth-last-of-type()]

E:nth-of-type()只计算父成分中指定的某连串型的子成分,当某个成分的子成分类型不只是一种时,使用nth-of-type来选取会相比有用。

E:nth-last-of-type()的用法同E:nth-of-type()相同,不一样的是:nth-last-of-type()也是从父成分的终极一个子成分开头算起。

li:nth-of-type(3)的话就会标识它只会挑选第多个li成分,其他成分会忽略掉,如:

XHTML

html: <ul> <li>1</li> <li>2</li>
<div>3</div> <div>4</div> <li>5</li>
<li>6</li> <li>7</li> <li>8</li>
</ul> ul > li:nth-of-type(3){do something}
//会选中内容为5的li成分

1
2
3
4
5
6
7
8
9
10
11
12
13
html:
<ul>
    <li>1</li>
    <li>2</li>
    <div>3</div>
    <div>4</div>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
 
ul > li:nth-of-type(3){do something} //会选中内容为5的li元素

 

唯独利用nth-child就会是那般:

XHTML

html: <ul> <li>1</li> <li>2</li>
<div>3</div> <div>4</div> <li>5</li>
<li>6</li> <li>7</li> <li>8</li>
</ul> ul > li:nth-child(3){do something}
//会选中内容为3的div元素

1
2
3
4
5
6
7
8
9
10
11
12
13
html:
<ul>
    <li>1</li>
    <li>2</li>
    <div>3</div>
    <div>4</div>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
 
ul > li:nth-child(3){do something} //会选中内容为3的div元素

 

14.6 [E:first-of-type,E:last-of-type]

:first-of-type和:last-of-type那八个选用器类似于:first-child和:last-child,不相同的就是点名了成分的系列。

XHTML

html: <ul> <div>1</div> <div>2</div>
<li>3</li> <li>4</li> <li>5</li>
<li>6</li> </ul> CSS: ul > li:first-of-type{do
something} //会选中内容为3的li成分

1
2
3
4
5
6
7
8
9
10
11
html:
  <ul>
      <div>1</div>
      <div>2</div>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
</ul>
CSS:
ul > li:first-of-type{do something} //会选中内容为3的li元素

 

14.7 [E:only-child]

匹配的成分E是其父成分的绝无仅有子成分,相当于说匹配成分的父成分只有一个子成分。

XHTML

html: <div class=”demo”> <p>1-1</p>
<p>1-2</p> </div> <div class=”demo”>
<p>2-1</p> </div> css: .demo > p:only-child{do
something}//会选用到内容为2-1的p成分

1
2
3
4
5
6
7
8
9
10
11
html:
<div class="demo">
   <p>1-1</p>
   <p>1-2</p>
</div>
<div class="demo">
   <p>2-1</p>
</div>
 
css:
.demo > p:only-child{do something}//会选取到内容为2-1的p元素

 

14.8 [E:only-of-type]

:only-of-type用来采取一个因素,他的类型在她父成分的装有子成分中是唯一的。约等于说,一个父成分有不可胜举子成分,而其间只有一个子成分的品种是唯一的,那么就可以运用:only-of-type来采用那个成分。

那些性子说起来有些绕口,写了个简陋的demo表达意思:[翻看源码][运行demo]

 

14.9 [E:empty]

:empty用来选用没有别的内容的要素,哪怕是一个空格都不曾的要素。

 

15 否定伪类采用器「E:not(F)」

可以用来摘取所有除了F外的具有因素。

input:not([type=submit]){do something}
//可以用来给表单的具备input成分定义样式,除了submit按钮之外

1
input:not([type=submit]){do something} //可以用来给表单的所有input元素定义样式,除了submit按钮之外

 

html PUBLIC -//W3C//DTD XHTML 1.0
Transitional//EN
html xmlns= head titleYanCms左侧…

    <script type=”text/javascript” src=”;

                    </ul>
                </li>
                <li>
                    <a class=”head”>系统管理</a>
                    <ul>
                        <li>
                            <a href=”#”
target=”rightFrame”>修改管理员密码</a>
                        </li>

四、伪元素

开首大家使用的伪成分是:first-letter,:first-line,:before,:after,那样的。但css3定义的伪成分变成了双冒号,主要用来区分伪类和伪成分。对于IE6-8,仅匡助单冒号表示方法,可是其他现代浏览器二种表示方法是都足以的,也等于说在现世浏览器中伪元素使用双冒号和单冒号都是会识其他。

16. 「::first-letter」

::first-letter用来挑选文本块的率先个字母,常用来文书排版方面。

XHTML

html: <div> <p>this is test line…..</p>
</div> css: div p::first-letter{do something}
//将会选中<p>中的首个字母t

1
2
3
4
5
6
7
8
html:
<div>
     <p>this is test line…..</p>
</div>
 
css:
 
div p::first-letter{do something} //将会选中<p>中的第一个字母t

 

17. 「::first-line」

::first-line用于匹配成分的率先行文本,也是常用来文书排版。

XHTML

html: <div> <p> this is first line……….省略…….
this is the second line …省略…. </p> </div> css: div
p::first-line{do something} //将会选中<p>中的第一行文字

1
2
3
4
5
6
7
8
9
10
11
html:
  <div>
      <p>
         this is first line……….省略…….
         this is the second line …省略….
     </p>
  </div>
 
css:
 
div p::first-line{do something} //将会选中<p>中的第一行文字

 

18. 「::before,::after」

::before,::after同大家事先熟用的:before和:after使用办法一致,它们不是指存于标记中的内容,是万分使用content属性可以插入额外内容的职分,即便生成的故事情节不会变成DOM的一有些,但它一律可以设置样式。

 

19. 「::selection」

css3新定义的伪成分::selection用来协作优异体现的文本。可是利用前必要肯定浏览器对它的支撑程度。

浏览器暗中认同的动静下,我们选中的公文背景是天灰,字体是反革命。通过使用::selection,我们得以更改它的功能。

::selection{background:#ccc;color:red}
//那样改写后大家选中的文书背景颜色和文字颜色就可以自定义了

1
::selection{background:#ccc;color:red} //这样改写后我们选中的文本背景颜色和文字颜色就可以自定义了

而是急需留意的是,::selection仅收受七个性格,一个是background,一个是color。

 

    <script type=”text/javascript”>
        $(function() {
            $(“#sub”).click(
            function() {
                $(“*”).removeClass(“selitem”);
                $($(“#sel”).val()).addClass(“selitem”);
                $(“#msg”).html(‘当前应用的接纳器:$(“‘ + $(“#sel”).val() + ‘”)’);
            }
            )
        })
    </script>

                    
                    </ul>
                </li>

五、属性选拔器

在html中,通过给成分添加属性,给以给成分添加一些叠加的新闻,属性选取器就足以因而稳定属性来挑选一定的因素。

20. 「 E[attr] 」

用来摘取有某个属性的因素,不论那天天性的值是哪些。

XHTML

html: <div id=”demo”> <a href=”” id=”test”></a> <a
href=”www.taobao.com” class=”taobao”></a> <a href=”#”
id=”show”> </div> css: a[id]{do something}
//将会接纳具有id属性的a标签

1
2
3
4
5
6
7
8
html:
<div id="demo">
  <a href="" id="test"></a>
  <a href="www.taobao.com" class="taobao"></a>
  <a href="#"  id="show">
</div>
css:
a[id]{do something} //将会选择具有id属性的a标签

 

21. 「 E[attr=val] 」

用来抉择具有属性attr并且属性值为val的成分。

XHTML

html: <div id=”demo”> <a href=”” id=”test”
title=”test”></a> <a href=”www.taobao.com”
class=”taobao”></a> <a href=”#” id=”show” title=”test”>
</div> css: a[id=test][title]{do something}
//将会选取具有id属性值为test且具有title属性的a标签

1
2
3
4
5
6
7
8
html:
<div id="demo">
   <a href="" id="test" title="test"></a>
   <a href="www.taobao.com" class="taobao"></a>
   <a href="#"  id="show" title="test">
</div>
css:
a[id=test][title]{do something} //将会选择具有id属性值为test且具有title属性的a标签

 

22. 「 E[attr|=val] 」

E[attr|=val]用来采纳具有属性attr且属性的值为val或以val-起初的要素(其中-是不可或缺的)。

XHTML

html: <div id=”demo”> <a href=”” id=”test” title=”test”
lang=”zh”></a> <a href=”www.taobao.com” class=”taobao”
lang=”zh-cn”></a> <a href=”#” id=”show” title=”test”>
</div> css: a[lang|=zh]{do something}
//将会选用具有lang属性值为zh或属性值以zh初阶的a标签

1
2
3
4
5
6
7
8
html:
  <div id="demo">
    <a href="" id="test" title="test" lang="zh"></a>
    <a href="www.taobao.com" class="taobao" lang="zh-cn"></a>
    <a href="#"  id="show" title="test">
</div>
css:
  a[lang|=zh]{do something} //将会选择具有lang属性值为zh或属性值以zh开头的a标签

 

23. 「 E[attr~=val] 」

当某个成分的某个属性具有三个用空格隔开的属性值,此时使用E[attr~=val]如若attr属性八个属性值中有一个于val匹配成分就会被选中。

XHTML

html: <div id=”demo”> <a href=”” id=”test” title=”test
first”></a> <a href=”www.taobao.com” class=”taobao web”
title=”second test”></a> <a href=”#” id=”show”
title=”test”> </div> css: a[title~=test]{do something}
//将会采取具有title属性且其中一个属性值为test的a标签

1
2
3
4
5
6
7
8
html:
  <div id="demo">
    <a href="" id="test" title="test first"></a>
    <a href="www.taobao.com" class="taobao web" title="second test"></a>
    <a href="#"  id="show" title="test">
</div>
  css:
  a[title~=test]{do something} //将会选择具有title属性且其中一个属性值为test的a标签

 

24. 「 E[attr*=val] 」

那脾气格接纳器使用了通配符,用来采取具有属性attr并且只要属性值中涵盖val字符串的要素。也等于说只要所选属性中有val字符串,不管是否几个用空格分隔的属性值,都将被选中。

XHTML

html: <div id=”demo”> <a href=”” id=”test” title=”test
first”></a> <a href=”www.taobao.com” class=”taobao web”
title=”secondtest”></a> <a href=”#” id=”show”
title=”testlink”> </div> css: a[title*=test]{do something}
//将会拔取具有title属性且其属性值包括test字符串的a标签

1
2
3
4
5
6
7
8
html:
    <div id="demo">
      <a href="" id="test" title="test first"></a>
      <a href="www.taobao.com" class="taobao web" title="secondtest"></a>
      <a href="#"  id="show" title="testlink">
   </div>
  css:
    a[title*=test]{do something} //将会选择具有title属性且其属性值包含test字符串的a标签

 

25. 「 E[attr^=val] 」

用来摘取属性attr的属性值是以val早先的享有因素,注意它与E[attr|=val]的界别,attr|=val中-是少不了的,也等于说以val-开头。

XHTML

html: <div id=”demo”> <a href=” ”
id=”test” title=”test first”></a> <a href=”www.taobao.com”
class=”taobao web” title=”secondtest”></a> <a href=”#”
id=”show” title=”testlink”> </div> css: a[href^=http]{do
something} //将会采取href属性以http开始的a标签

1
2
3
4
5
6
7
8
html:
     <div id="demo">
       <a href=" http://zhangmengxue.com" id="test" title="test first"></a>
       <a href="www.taobao.com" class="taobao web" title="secondtest"></a>
       <a href="#"  id="show" title="testlink">
    </div>
  css:
     a[href^=http]{do something} //将会选择href属性以http开头的a标签

 

26. 「 E[attr$=val] 」

其一选拔器刚好跟E[attr^=val]反而,用来摘取具有attr属性且属性值以val结尾的要素。

XHTML

html: <div id=”demo”> <a href=”
” id=”test” title=”test
first”></a> <a href=”www.taobao.com/title.jpg” class=”taobao
web” title=”secondtest”></a> <a href=”#” id=”show”
title=”testlink”> </div> css: a[href$=png]{do something}
//将会选用href属性以png结尾的a标签

1
2
3
4
5
6
7
8
html:
     <div id="demo">
        <a href=" http://zhangmengxue.com/header.png" id="test" title="test first"></a>
        <a href="www.taobao.com/title.jpg" class="taobao web" title="secondtest"></a>
        <a href="#"  id="show" title="testlink">
     </div>
css:
      a[href$=png]{do something} //将会选择href属性以png结尾的a标签

1 赞 6 收藏 2
评论

亚洲必赢官网 2

    <style type=”text/css”>
        *
        {
            font-size: 14px;
            padding: 2px;
            margin: 1px;
            font-family: 宋体;
            font-size: 12px;
        }
        #msg
        {
            height: 24px;
            background-color: Yellow;
            font-weight: bold;
            padding: 6px;
        }
        ul
        {
            padding-left: 8px;
            margin-left: 10px;
            list-style-type: decimal;
        }
        .level02
        {
            padding-left: 16px;
        }
        .level03
        {
            padding-left: 24px;
        }
        .selitem
        {
            border: solid 1px #F00;
        }
    </style>
</head>
<body>
    <div>输入:<input id=”sel” type=”text” /><input id=”sub” type=”button” value=”确定” /></div>
    <div id=”msg”></div>
    <div>
        <ul id=”listAll” class=”level01″>
            <li>
                <div>
                    上海市内</div>
                <ul id=”listShanghai” class=”level02″>
                    <li><div><a href=”jingan.htm”>静安区</a></div></li>
                    <li><div><a href=”minhang.htm”>闵行区</a></div>
                        <ul id=”listMinhang” class=”level03″>
                            <li><div>梅陇镇</div></li>
                            <li><div><a href=”xinzhuang.htm”>莘庄镇</a></div></li>
                            <li><div><a href=”qibao.htm”>七宝镇</a></div></li>
                            <li><div>虹桥镇</div></li>
                        </ul>
                    </li>
                    <li><div>浦东区</div></li>
                    <li><div>松江区<a href=”songjiang.htm”>详细</a></div></li>
                </ul>
            </li>
            <li>
                <div>国内其它地域</div>
                <ul id=”listguonei” class=”level02″>
                    <li><div>河南省<a href=”henan.htm”>详细</a></div></li>
                    <li><div>河北省<a href=”hebei.htm”>详细</a></div></li>
                    <li><div>东北省</div></li>
                    <li><div>浙江省</div></li>
                    <li><div>江苏省</div></li>
                </ul>
            </li>
            <li><div>国外</div></li>
        </ul>
    </div>
</body>
</html>

                <li>
                    <a class=”head”>权限管理</a>
                    <ul>
                        <li>
                            <a href=”#”
target=”rightFrame”>暂未开放</a>
                        </li>
                        <li>
                            <a href=”#”
target=”rightFrame”>暂未开放</a>
                        </li>

 1.基本的CSS选择器

                    
                    </ul>

 亚洲必赢官网 3

                </li>
            </ul>
        </div>

亚洲必赢官网 4

    </body>
</html>

亚洲必赢官网 5

复制代码 代码如下:

亚洲必赢官网 6

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
    <title>YanCms左侧导航栏</title>
    <script src=”js/jquery-1.4.2.min.js”
type=”text/javascript”></script>
    <script src=”js/jquery-ui-1.8.custom.min.js”
type=”text/javascript”></script>
    <script type=”text/javascript”>
        $(document).ready(function () {
            //#title代表页面中点击的成分
            $(“.title”).click(function () {
                var con = $(this).html();
                //#getTitle代表页面中想要拿到title的值成分
                $(“#getTitle”).html(con);
                //$(this).attr(‘href’)获取超链接
                var con1 = $(this).attr(‘href’);
               // $(“#getTitle”).attr(“href”, “con1”);
               // alert(con1);
            });
        });
   </script>
    <script type=”text/javascript”>
        jQuery().ready(function () {
            jQuery(“#navigation”).accordion({
                header: ‘.head’,
                event: ‘click’,
                fillSpace: true,
                animated: ‘bounceslide’
            });
        });
 </script>
    <link href=”css/left.css” rel=”stylesheet” type=”text/css”
/>
 </head>
<body style=”background-color:#e6f4fa;” >
        <div class=”subMenuTitle” id=”getTitle”><a
href=”#”>主作用菜单</a></div>
  <div style=”height:100%;”>
   <ul id=”navigation”>
    <li>
     <a class=”head”>种类管理</a>
     <ul>
      <li class=”title”>
       <a href=”#1233333″ >博文列表</a>
      </li>

亚洲必赢官网 7

      <li class=”title”>
       <a href=”#”>添加博文</a>
      </li>
     </ul>
    </li>
    <li>
     <a class=”head”>种类管理</a>
     <ul>
      <li>
       <a href=”#” target=”rightFrame”> 序列列表</a>
      </li>
        </ul>
    </li>
    <li>
     <a class=”head”>友情链接</a>
     <ul>
      <li>
       <a href=”#” target=”rightFrame”> 链接列表</a>
      </li>
      <li>
       <a href=”#” target=”rightFrame”>添加链接</a>
      </li>

上述用法与CSS包容,不仅如此jQuery还开展了增加(可能符合下一代的CSS)

     </ul>
    </li>
    <li>
     <a class=”head”>系统管理</a>
     <ul>
      <li>
       <a href=”#” target=”rightFrame”>修改管理员密码</a>
      </li>

E>F 匹配标签名为F为E的直接子节点的有着因素

    
     </ul>
    </li>

亚洲必赢官网 8 

    <li>
     <a class=”head”>权限管理</a>
     <ul>
      <li>
       <a href=”#” target=”rightFrame”>暂未开放</a>
      </li>
      <li>
       <a href=”#” target=”rightFrame”>暂未开放</a>
      </li>

E+F 匹配前边是邻近兄弟节点E的有着成分F(E和F紧挨)

    
     </ul>

E~F 匹配前边是贴近兄弟节点E的保有成分F(E和F可以不紧挨)

    </li>
   </ul>
  </div>

亚洲必赢官网 9

 </body>
</html>

  例子没有办好 不能区分E+F和E~F的区别。

代码如下: !DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“” html
xmlns=”…

E:has(F)匹配标签名称为E,至少有一个标签名称过为F的后生节点的保有因素,(可以直接包括)

亚洲必赢官网 10

E[A]协作带有特征A的富有成分E(不管A的值)
E[A=V]协作带有特征A的有所成分E,并且A的性质等于V
E[A^=V]极度带有特征A的拥有成分E,并且A的质量以V开端
E[A$=V]匹配带有特征A的享有成分E,并且A的本性以V截止
E[A*=V]合作带有特征A的有所成分E,并且A的习性包罗V

亚洲必赢官网 11亚洲必赢官网 12

透过岗位来摘取成分

:first 页面的首先的同盟(所有节点中的首个)
:last 页面的末尾的协作

亚洲必赢官网 13
:first-child 开端的子成分(兄弟节点中的第三个)
:last-child 最终的子成分

亚洲必赢官网 14

**:only-child 再次回到没有兄弟节点的兼具因素

亚洲必赢官网 15
:nth-child(n)返回第n个节点

亚洲必赢官网 16
:nth-child(even|odd)再次回到偶数或奇数的子节点(针对兄弟节点的话)
:even偶数(页面范围内,与:nth-child(even)不同
:odd奇数(页面范围内,与:nth-child(odd)不同

亚洲必赢官网 17亚洲必赢官网 18
:nth-child(xn+y)根据公式统计再次回到的节点
亚洲必赢官网 19
:eq(n)整个页面 第n个门当户对的因素(n从0发轫)
:gt(n)总体页面
第n个门当户对的要素(不分包)之后的元素(n从0开始)**
:lt(n)
漫天页面第n个门当户对的成分(不带有)此前的要素(n从0开始)
**亚洲必赢官网 20亚洲必赢官网 21


网站地图xml地图