CSS选择器

回忆一下CSS2中得选择器样式：

行内样式>ID选择器>类选择器>标签名选择器

一、第一种分类方式：按照功能上

1、ID选择器   <div id="div1">类选择的优先级最高</div>    #div1{color:black;}

2、类选择器  <div class="div2">类选择最经常用</div>   .div2{text-align:center;}

3、标签名选择器  <div>标签名选择器是最普遍的在所有的样式元素都有里一般采用标签名选择器</div>   单独一个div就ok   div{background:yellow;}

4、群组选择器(就是把有着相同样式的元素合在一起来写)  

每个元素都有相同的属性，

例如：h1{color:red;}

           p{color:red;}

          span{color:red;}

上边那种方式就相当繁琐现在就可以写成这种样式：h1,p,span{color:red;}

5、后代选择器

例如：<div class="div4"><p>后代元素选择器是用处很多，并且也有很多其他的用法，css3中会有很多体现</p></div>

.div4  p{color:black;}

接下来就是CSS3的选择器

CSS 3中的结构性伪类

6、根元素选择器

:root  选择器匹配文档根元素。(选择器匹配到的元素，也就是文档树中最顶层结构的元素。在不同的场景下具体的根元素不同。)

:root{background: pink;border: 1px solid black;}

7、同级选择器(兄弟选择器)

element1~element2     element1 之后出现的所有 element2。

两种元素必须拥有相同的父元素,但是 element2 不必 直接紧随 element1。

例子： p~ul{font-size: 50px;}   (ul在p的下方)

其中有有一个特殊的：相邻的兄弟选择器（紧随到其元素才会有影响）；p+ul{font-size:50px;}

8、子选择器

子选择器使用了大于号.表示父级元素的子元素将有所改变

h1>strong{color:red;}  子元素的样式有所变化

<h1>我是<strong>子选择器<strong>我是子元素样式</strong><h1>

9、属性选择器

(1)    [attribute]   匹配带有指定属性的元素

例子：[title]{color:green}   

<div><a href="#" title="我是特殊的title">属性选择器</a></div>

输出

(2)[attribute=value] 匹配带有指定属性与值得元素；

  [title="title"]{color: #00CCFF;margin-left: 30px;}

<div>
        <a href="#" title="titlehh">属性选择器</a>
        <a href="#" title="title">带title的值得选择器</a>
    </div>

显示的结果为：

（3）[attribute~=value]匹配属性值包含指定的词汇的元素，value必须是独立的字符串

[title~="title"]{color:red;margin-left: 30px;}

<div>
        <a href="#" title="title name">属性选择器</a>
        <a href="#" title="title">带title的值得选择器</a>
    </div>

显示的结果是两个a标签内的颜色都有所变化

（4）[attribute|=value]  匹配所有带有指定值开头的属性值得元素，该值必须是整个单词

   [title|="title"]{color:red;margin-left: 100px;display: inline-block;}

<div>
        <a href="#" title="title">我们都带有title这个单词</a>
        <a href="#" title="title">我们都带有title这个单词</a>
        <a href="#" title="title">我们都带有title这个单词</a>
        
    </div>

显示出来的结果是

（5）[attribute^=valiue] 匹配属性值以指定值开头的每个元素.

指定值可以是单独一个字母或者一个单词或者是数字。最好是单词（便于代码的编辑）

 [title^="title"]{color: green;margin-left: 50px;}

<div>
        <a href="#" title="titleFirst">我们都带有title这个单词</a>
        <a href="#" title="titleSecond">我们都带有title这个单词</a>
        <a href="#" title="title">我们都带有title这个单词</a>
    </div>

（6）[attribute$=value]  匹配属性值以指定值结尾的每个元素

   [title$="title"]{color: #003399;margin-left: 100px;}

    <div>
        <a href="#" title="Firsttitle">我们都带有title这个单词</a>
        <a href="#" title="Secondtitle">我们都带有title这个单词</a>
        <a href="#" title="1title">我们都带有title这个单词</a>
    </div>

（7）[atrribute*=value]匹配属性值包含指定值的每个元素（这个是最常用的属性选择器）

 [title*="ti"]{color: red;margin-left: 100px;}

<div>
        <a href="#" title="Firstitle">我们都带有ti这个单词</a>
        <a href="#" title="Secondtitle">我们都带有ti这个单词</a>
        <a href="#" title="title">我们都带有ti这个单词</a>
        <a href="#" title="ti">我们都带有ti这个单词</a>
    </div>

显示的结果为：

 10、子元素选择器（伪类选择器）

(1):nth-child(n)匹配属于其父级元素的第N个子元素，无论元素的类型

(2):nth-last-child(n)匹配属于其元素的第N个子元素，无论元素类型，从最后一个元素开始算起

(3):first-child 匹配属于其父元素的首个子元素的子元素

(4):last-child 匹配属于其父元素的最后一个子元素的每个元素。

(5):first-of-type 匹配属于其父元素的特定类型的首个子元素的的每个元素

(6):last-of-type 匹配属于其父元素的特定类型的最后一个子元素的每个元素

(7):nth-of-type(n)匹配属于父元素的特定类型的第N个元素子元素的每个元素

     N可以是数字，关键字和公式

(8):nth-last-of-type(n)匹配属于父元素的特定类型的第N个子元素的每个元素，以最后一个子元素开始计数

(9):only-child匹配属于其父元素的唯一子元素的每个元素

(10):only-of-type 匹配属于其父元素的特定类型的唯一子元素的每个元素

 11、表单元素选择器

(1):endabled 匹配每个已启用的元素（大多用在表单元素上）

(2):disabled 匹配每个被禁用的元素（大多用字表单元素上）

(3):checkek 匹配每个已被选中得input元素（只用在单选按钮上和复选框上）

12、其他选择器

(1):empty  匹配没有子元素（包括文本节点）的每个元素

(2):target  URL带有后面跟有瞄名称#，指向文档内某个具体的元素，这个被连接元素

 就是目标元素(target element)。 :target 选择器可用于选取当前活动的目标元素。

点击就会有样式的改变

:target{
         color: red;
         font-size:30px ;
     }

<div>
        <a href="#news" title="Firstitle">并且href有值跳转到new1</a>
        <a href="#" title="Secondtitle">带有href属性</a>
        <p id="news">我有专有的href值,内容1</p>
    </div>

点击第一个a标签，会跳转到对应id的p标签，并且p标签的样式会有改变

(3)::selection 匹配每个已被选中的 input 元素(只用于单选按钮和复选框)

(4):not(selector)(反伪类)

综上就是我对CSS选择器的总结，大家有什么问题可以提出来。后期我还会对对它优化更新。

多多指点意见