关于css选择器的一些事 第一章 基本选择器！

标签：div   意思   color   round   理解   text   splay   元素选择器   分享   

关于选择器，好多人小伙伴只用了最基本的几个选择器，感觉这玩意没有啥学的，讲道理，确实也没啥学的。但是，选择器种类掌握的越多，编写代码起来就会越轻松，为啥呢。举个例子吧！先上一串代码和效果，就知道我想表达什么了！

上面一个五列的li,代码如下

<style>
        *{margin:0;padding: 0;list-style: none}
        ul{display: flex}
        li{flex: 1;text-align: center;border-left: 1px solid red}
        li:nth-child(1){
            border-left:none
        }
    </style>
<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
</ul>

大家仔细看吗，这串代码是给所有的的li一个左边框一个1px的红线，然后在用一个选择器吧第一个li的左边的线给去掉！这样做是不是很麻烦，我们有个一个更简单的方式

*{margin:0;padding: 0;list-style: none}
ul{display: flex}
li{flex: 1;text-align: center;}
li:nth-child(n+2){border-left: 1px solid red}

我们仅仅需要把li:nth-child(n+2)（第二个以及往后的li）给予1px的border-left的红线，这样是不是就是很清晰呢？

甜头尝到了就开始重洗学习一个css的选择器吧!

我把css选择器分成分开成三大板块，我们依次学习，第一部分是我们是基本选择器；第二部分是属性选择器，第三部分伪类选择器！

第一部分，基本选择器

1.通配符选择器（*）

一般大家都是使用*{margin:0;padding:0}比较多吧，哈哈,通配符的意思就是所有元素，

比如：demo  *{color:yellow} 这个意思就是说demo下面所有的元素，字体都是黄色的！！

2.元素选择器

类似于这样子  h1{font-size：100px}   //意思就是说h1的字体为100px;

3.类选择器 

这样子  .item{font-size:20px}    //意思就是说class="item"的元素字体大小都为20px;

　　3-1.类选择器可以联合元素选择器一起使用，比如

　　　　h1.item{color:red} 　　　　//类名为item的h1的元素都是红色

　　3-2.类选择器与类选择器联合使用，比如

　　　　item.tel{color:red}　　　　//同时拥有类名 item 和 tel的元素字体为红色

　　　　**如果元素有一个类名不存在，那么这个css样式也无法添加上去

4.id选择器

#item{ background:red }　　//id为item的元素的背景颜色为红色  

**不同于上面的选择器，id选择器是页面唯一一个值

5.后代选择器

p a{ color:red }　　　　.//p元素下面的a字体颜色为红色

6.子代选择器

p>a{ color:red }　　　　//p元素的所有子元素a颜色为红丝

**后代选择器和子代选择器的区别就是一个是后代选择器只要是后代都能被选中，而子代选择器必须是子代才可以，孙子，重孙都不行！

比如

<style>
        .box .item{
            color:red;
        }

        .box>.item{
            background: yellow
        }
</style>
<div class="box">
    <div class="box-samll">
        <div class="item">
                  哈哈
                </div>
    </div>
    <div class="item">
        呵呵
    </div>
</div>            

这段代码的效果这介样子

哈哈被这个item包裹拥有了color：red这个属性

但是呵呵则是拥有了color:red 和background:yellow；这个就不用说太细了，完全能理解了吧。

7.兄弟选择器 +

p+.item  { color:red } //意思跟在p后面的class名为item的元素(不是被p包含，是p后面一个元素！不是被p包含，是p后面一个元素！不是被p包含，是p后面一个元素！)，有没有觉得用上这个选择器逼格满满。

8.莫慌，这个更有意思     通用兄弟选择器 ~

p~.item  意思就是p的所有class名为,item的元素 （只要是和p在同一个父级元素下面的所有的类名为item的元素）

9.群选择器

这个就是给懒人用的，哈哈（selector1,selector2,...,selectorN）；

举个例子

.frist , .last, .item , #tel{ color:red }   //意思就是说，类名为.frist last item 和id为tel的所有元素字体都为红色

这九种就是基本选择器，但是6.7.8.9这四类选择器是不被ie6认可的，很尴尬，在ie6下面无法被识别，很尴尬是不是，但是，不识别就不识别呗，反正现在也不用兼容到ie6。

进本选择器讲完了，溜了，溜了！

关于css选择器的一些事 第一章 基本选择器！

标签：div   意思   color   round   理解   text   splay   元素选择器   分享   

原文地址：http://www.cnblogs.com/zhengsongjun/p/7460681.html