快捷搜索:
来自 新京葡娱乐场网址 2019-09-12 04:44 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

面包屑导航,神通广大的CSS3选择器

一、基本选用器

 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} //给三个页面元素定义公用的样式

 

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'); 
               // $("#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> 

二、档次采纳器

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>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>

精干的CSS3选取器

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

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

每一个前端程序员大概每天都会写一些css,在那之中选取器是很关键的一片段。不过,大家可能每一天写的大都以#id,.class那样的选拔器,那并不希罕,可是假使我们明白并且熟用css3为我们提供的有力何况优雅的接纳器,就足以简化我们的代码。

自家在念书和整理css3的选择器的时候都不会去考虑它的浏览器的支撑程度,假使有亟待,能够在此处查看它的浏览器援救情况:「caniuse.com」。

 

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:面包屑导航,神通广大的CSS3选择器

关键词: