css选择器

好的文章

CSS选择器常见的有几种?

1. 基本选择器

• *匹配任何元素
• 元素选择器
• #id选择器
• .class选择器

2. 组合选择器

• div,p 多元素选择器,同时匹配div和p元素
• div p 后代元素选择器，匹配div后代下的所有p元素（儿子和孙子可能会有多个。儿子p们和孙子p们都会生效）
• div>p子元素选择器，匹配div元素的子元素p(只有儿子p们会生效)
• div+p直接相邻兄弟选择器，匹配div元素之后，紧邻的p元素（只匹配一个）
• div~p匹配div元素之后，同级的所有p元素（可以匹配多个,不管这些p是否相邻，但p必须和前面的div同级）
  注意p.info { background:#ff0; }匹配类名为.info的 p元素
  .info.error { color:#900; font-weight:bold; }匹配类名同时具有info和error的元素
  p.info.error { color:#900; font-weight:bold; }匹配匹配类名同时具有info和error的 p 元素

3. 伪类选择器
   关于child和type的伪类选择器，可以看我的这篇文章

• p: first-child 两个条件缺一不可：该元素是p元素，该元素是p所在 兄弟 元素中的第一个元素

p:first-child{
            background: yellow
        }
<section>
    <p>asd</p>    //被选中
    <div>
        <p>孙子</p>  //被选中
        <p>孙子</p>
    </div>
    <span>asd</span>  
    <p>儿子</p>
    <p>儿子</p>
</section>

• p:first-of-type 两个条件缺一不可：该元素是p元素，在它的兄弟元素中，第一个该类型的元素
• p:nth-of-type(n)
• p:nth-child(n) 两个条件缺一不可：该元素是p元素，该元素是第n个元素（第一个是1不是0）
  p:nth-child(2n) 偶数
  p:nth-child(2n-1) 奇数

 p:nth-child(2){            //无空格
            background: yellow
        }
 section :nth-child(3){     //有空格
            background: blue
        }
<section>
    <p>asd</p>
    <div>
        <p>孙子</p>
        <p>孙子</p>      //被选中黄色
    </div>
    <span>asd</span>   //被选中蓝色
    <p>儿子p</p>
    <p>儿子p</p>
</section>

• a:link匹配所有未被点击的链接
• a:visited匹配已被点击的链接
• a:active匹配所有鼠标已点击，但还没有释放的元素
• a:hover匹配所有鼠标正在悬停上的元素

• input:focus匹配当前获得焦点的input元素

  
  

span+span{
    border-left:1px solid black
}
//和下面这种写法效果是一样的 
span~span{
    border-left:1px solid black
}

image.png

.logo+.logo{
  margin-top:20px
}

image.png image.png

冷门

input::placeholder{}  //匹配placeholder
[attr*=value]
表示带有以 attr 命名的，且值包含有"value"的属性的元素。