码迷,mamicode.com
首页 > Web开发 > 详细

CSS选择器

时间:2016-08-01 20:53:00      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:

人的一生至少两件事是总不会错的,一个是多锻炼身体一个是多读书。初学的书没事翻翻也会有新的感触

CSS其实跟JS有相似之处的?Why?其实都是选择dom节点进行操作比如给下面的p标签中的内容加个颜色

要选择p元素(节点 、’标签)不同时期有不用的叫法 然后给它加上属性 在定义属性值: p{color:red} 

p是节点 color是p的属性,red是属性的值。

如果在JS中其实也是一样的var x=document.getElementById("img1"); 选择节点

                                       x.src="img/example.png"       x代表了被选择的节点.   x的src属性的值 改为"img/example.png"   

1 <body>
2 <setion>
3 <p>哈哈哈哈哈哈哈</p>
4 <img src="" alt="什么都没有" id="img1"/>
5 <input type="button" id="btn1" value=“按钮” />

6 </section> 7 </body>

 

下面总结一下不常用的选择器

1子选择符 标签1>标签2

<section>
<h2> an h2 heading</h2>
<p>this is paragraph</p>
<p>paragraph 2 has <a href="#"> a link </a> in it .</p>
<a href="#">link</a>
</section>
 
section>h2{font-style:italic;}//标签1必须是第二个元素的父元素,标签1不能是标签2父元素以外的祖先元素
同时也可以这样使用
!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子选择符</title>
        <style>
            div>h2{color:red}
            .content>.menu{color:yellow}
        </style>
    </head>
    <body>
        <div class="content">
            <h2>Hellow World</h2>
            <p class="menu">子选择符的特性</p>
        </div>
    </body>
</html>

2.紧邻同胞选择符 标签1+标签2   标签2必须紧跟在同胞标签1的后面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>紧邻同胞选择符</title>
        <style>
            h1+h5{color:red;border:1px solid greenyellow}
            h5+.p1{color:pink}
            .p1+.p2{font-size:250%}
        </style>
    </head>
    <body>
        <div>
            <h1>国务院白皮书</h1>
            <h5>XXX发表讲话就三大代表</h5>
            <p class="p1">大笑江湖万万没想到完美世界幻想时空</p>
            <p class="p2">英雄联盟瑟瑟琴女皮城女警一狙爆头</p>
            
        </div>
    </body>
</html>

3 一般同胞选择符~ 标签1 ~标签2   标签2不一定紧跟在同胞元素标签1的后面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>一般同袍选择符</title>
        <style>
            h2~ul{border:1px solid red}
        </style>
    </head>
    <body>
        <div >
            <h2>嘿嘿</h2>
            <p>1123115</p>
            <ul>
                <li>nihao</li>
                <li>heihei</li>
            </ul>
            
        </div>
    </body>
</html>

 

CSS选择器

标签:

原文地址:http://www.cnblogs.com/Tjinhui/p/5726970.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!