您的位置:首页 > Web前端 > CSS

CSS之选择器

2013-06-21 16:01 190 查看
     1、CSS继承性
             是指我们设置上级(父级)的css样式后,上级及以下子级都具有此属性。一般只有文字具有继承性,如文字大小,文字加粗、文字颜色、字体等属性。通过CSS继承,子元素将继承最高元素所拥有的属性,但是一些属性不具备继承性,如:border
        <style type="text/css">
           .E_div{
                font-size:20px;
                color:red;
                border:1px solid #EEE;
            }
        </style>
        <div class="E_div">
            <p>fffff</p>
            <div>测试继承性</div>
            <p>fffff</p>
        </div>
    第二个div,p元素具有其父级的css样式,这就是继承性。第一div具有border的css,而第二个div,p元素(其子级)没有具有border的css,这就是css继承的局限性;
    
    2、派生选择器
        <style type="text/css">
         
        ul li{
                list-style-type: none;
        }
       <style>
       <ul>
            <li>派生选择器<li>
            <li>派生选择器<li>
            <li>派生选择器<li>
       </ul>
       派生选择器允许你根据文档的上下文关系来确定某个标签的样式
    3、id选择器
       <style type="text/css">
        #li{
                list-style-type: none;
        }
       <style>
       <ul>
            <li id="li">派生选择器<li>
            <li>派生选择器<li>
            <li>派生选择器<li>
       </ul>
       id选择器可以为有特定id的html标签设置css样式,在现代布局中,id选择器常常用于建立派生选择器,id选择器可以多次建立派生选择器。
      <style type="text/css">
         
        #li li{
                list-style-type: none;
        }
       <style>
       <ul id="li">
            <h2>id选择器建立多个派生选择器</h2>
            <li>派生选择器<li>
            <li>派生选择器<li>
            <li>派生选择器<li>
       </ul>
    4、类选择器
       <style type="text/css">
         
        .div_0{
                list-style-type: none;
        }
       <style>
        
       <div>
            <div class = "div_0">类选择器</div>
       </div>
   类选择器用一个点号显示“.”,类名的第一个字符不能使用数字,在Firefox中无法起到作用。
    5、属性选择器
        对带有特定属性的属性的Html设置css样
4000
式
        a.属性选择器
        [tittle]{
            color:red
        }
        为所有带有title属性的元素设定样式
    
        b.属性和值选择器
        [tittle = "W3school"]{
            color:red
        }
        为所有title= "W3school" 的元素设定样式
        input[type="text"]{
                width:100px;
                height:20px;
        }
        为表单type = "text"的设置样式
        
                选择器                  描述
        [attribute]           用于选取带有特定属性的元素
        [attribute  = value]  用于选取带有指定属性和值得元素
        [attribute ~= value]  用于选取属性值中包含指定词汇的元素
        [attribute |= value]  用于选取带有以指定值开头的属性值的元素,该值必须是整个单词
        [attribute ^= value]  匹配属性值以指定值开头的每一个元素
        [attribute $= value]  匹配属性值以指定值结尾的每一个元素
        [attribute *= value]  匹配属性值中包含指定值的每一个元素
        
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  CSS 格式化