css3选择器总结

    
div1
    
div2
    9
    
1
    
2
    
3


    
1
    
2
    
3


    



    
1
    
2
    
3
    
4


    

        
content
        
content
        
content
        
content
        
content
        
content
        
content
    


    go to demo1
    go to demo2
    
demo1
    
demo2

    

        red
        green
        gray
    
    
 
    

    




111
fff

    
1
    
2
    
3


    
1
    
2
    
3

44

2

    1


    1




    
1
    
2
    
3
    
4
    
5

/*关系选择器*/
div + p {
  color: red; }
/*点亮的只有与div并列的下一个兄弟元素节点p*/
div ~ p {
  background-color: #ff0; }
/*点亮的只有与div并列的后续兄弟元素节点p元素*/

/*属性选择器、可以是自定义属性和默认属性class*/

div[data~="a"] {
  background-color: red; }
/*含有波浪线表示匹配该属性值含有独立的a的div标签

li[class|='a'] {
  background-color: blue; }
/*匹配class属性中以a开头或者a-text的li标签

li[class^='a'] {
  background-color: aqua; }
/*正则匹配以a开头的li标签*/

li[class$='t'] {
  background-color: red; }
/*正则匹配以t结尾的li标签*/
li[class*='b'] {
  background-color: #f40; }
/*正则匹配含有t的li标签不在乎t存在的位置 特例可以匹配空格*/

/*伪元素选择器、区别于伪类选择器*/

input {
  border: 1px solid; }
/*placeholder仅仅可以改变input文字的属性，属于input的自有属性*/

input::placeholder {
  color: aquamarine; }
/*伪类选择器、整个选择器最重要的*/
/*描述的是 被选中的元素的一种状态*/
/*:not() 括号里可以是任意其他的选择器例如类、属性等等*/

div:not(.demo) {
  background-color: blue; }

div:not([class=demo]) {
  background-color: red; }
/*选中没有class属性的div*/

div:not([class]) {
  background-color: aquamarine; }
/*ul中除掉最后一个li标签，都要添加一个border线*/

ul {
  width: 300px;
  border: 1px solid; }
  ul li:not(:last-of-type) {
    margin: 20px 0;
    border-bottom: 1px solid rosybrown; }
/*:root 与 html标签是等效的 在此不做重复*/
/*：target 被锚点标记  指的是a元素被标记锚点之后*/
/*等同于localtion.hash = 'xxx'之后。即某一个元素id成为了a元素的锚点值之后 。*/
/*哪一个人div就变成了target状态。锚点通过href 和 id实现*/

div:target {
  border: 1px dashed #ff4400; }
/*锚点导航target选择器的应用*/

:root,
body {
  margin: 0;
  height: 100%; }
  /*涉及到height属性的继承问题、当html、body有确定height时后续才可以继承*/

div.buttonWrapper {
  position: absolute;
  width: 300px;
  top: 300px; }
  div.buttonWrapper a {
    color: #fff;
    margin-right: 20px;
    background-color: #fcc; }

div[id] {
  width: 100%;
  height: 100%; }

#red {
  background-color: #ff4400; }

#gray {
  background-color: gray; }

#green {
  background-color: green; }

div[id]:not(:target) {
  display: none; }
/*:first-child和 :last-child一样  选中的一大堆同级别元素中的第一个子元素*/
/*只要选中的元素是别人的第一个儿子就可以选中,不管是谁的都可以*/
/*div:first-child {*/
/* background-color: #ffcccc;*/
 /*全体变色，*/
/*}*/

p:first-child {
  background-color: #ffcccc; }
/*only-child 当选中的元素作为父级元素唯一的独生子时生效，其他不生效*/
/*同样的是这个方式也不限制所选元素的级别，只要是唯一独生子就可以*/

span:only-child {
  background-color: #ffcccc; }
/*:nth-child(n) 前提必须是儿子元素才可以选出来 n可以调节奇数偶数*/
/*css的n从1开始、区别于js编程语言的从0开始*/

li:nth-child(2n+1) {
  background-color: green; }
/*nth-child 正向查、nth-last-child 反向查*/

li:nth-last-child(n) {
  background-color: #ffcccc; }
/*注意以上伪类选择器中带有child的五种都要考虑其他子元素给他们本身位置*/
/*带来的影响*/

/*一下是最常用的五种伪类选择器，均不考虑其他元素带来的影响*/

/*# sourceMappingURL=index.css.map */

最常用的css3伪类选择器如下

    1
    
0
    
1
    
1
    
1
    
1


 
1



    nice:
    
    

* {
  padding: 0;
  margin: 0; }
/*注意一下五种伪类选择器是使用最为常见的选择器，区别于*/
/*带child的五种选择器。他们不受其他元素对于他们元素位置的影响*/

/*first-of-type 选中满足元素种类的第一个元素*/

p:first-of-type {
  width: 100px;
  height: 100px;
  background-color: green; }
/*last-of-type 倒叙查找

p:last-of-type {
  width: 100px;
  height: 100px;
  background-color: red; }
/*only-of-type 元素必须只有唯一一个才可以作用。必须是独生子*/

span:only-of-type {
  display: block;
  width: 100px;
  height: 100px;
  background-color: yellow; }
/*nth-of-type 只在同类型中查找就可以了*/

p:nth-of-type(odd) {
  width: 100px;
  height: 100px;
  background-color: pink; }

p:nth-of-type(n+2) {
  width: 100px;
  height: 100px;
  background-color: gray; }
/*nth-last-of-type只在同类型中查找就可以了 倒叙*/

p:nth-last-of-type(1) {
  width: 100px;
  height: 100px;
  background-color: blue; }
/*选中div中没有节点的那几个 空格也算有内容，但是注释不算*/

div:empty {
  width: 200px;
  height: 30px;
  border: 1px solid; }

input:checked + span {
  background-color: green; }

input:checked + span::after {
  content: 'hello';
  color: #ffffff; }

/*# sourceMappingURL=index.css.map */