CSS选择器

css 选择器种类

1. 普通选择器

标签选择器 div { color:red }
class属性修饰的类名选择器 .red { color:red }
id选择器 #box { color:red }

2. 多类名选择器

<p class=" red ft30"></p>
//记住ft30和red不能有空格,这句话会导致上面的文字变成30,文字颜色变为red
.ft30.red {
    color:red;font-size:30px 
} 

3. 标签加类名选择器

<div class=" red ft30"></div>
//标签和类名之间不能有空格,这句话会导致上面的文字变红色
div.ft30.red  { 
  color:red;font-size:30 
}

4. 后代选择器

<div> 
    <p>红色</p> 
        <div>
              <p>红色</p>
        </div>
    <span>
            <p>红色</p>
    </span>
</div>

//div 和 p用空格隔开， 只要p标签祖先有div标签则就会变成红色
div p {
  color:red
}

5. 子元素选择器 >

<div> 
    <p>红色</p> 
        <div>
              <p>红色</p>
        </div>
    <span>
            <p>非红色</p>
    </span>
</div>
//注意和4区分开,这里只有子类的p标签会是红色，孙子类不是
div > p {
  color:red
}

6. 多元素选择器,多个元素用逗号隔开

<div>这里是红色</div>
<p>这里是红色</p>
<span>这里是红色</span>
//同时设定多个选择器为红色
div,p,span { 
  color:red 
}

7. 通配选择器,通常用来设置padding,marging

//设置所有的标签padding和marging都为0
*{ 
    padding:0;marging:0 
  }

8. 伪类/伪元素选择器,其中hover和active是对所有标签都适用的，link和visited只有a标签才有

a:link {color:red} //正常连接颜色
a:visited {color:red} //连接点击后的颜色
a:hover {color:red} //鼠标移上去之后颜色
a:active {color:red} //鼠标按下去之后的颜色

伪类选择器
p > i:first-child
p > i:first-line
p > i:first-letter

9. 兄弟(相邻元素)选择器 (选择的是弟) +

<div>div</div>
<p>这个会变红色</p>
//会导致上面的p标签文字颜色变红
div+p  { 
  color:red 
}

10.属性选择器

[属性名] { color:red } //包含属性名的被选中
[属性名=属性值] { color:red } //属性名对应的值和指定的属性值匹配的被选中
[属性名~=属性值] { color:red } // 只要属性名对应的值(数组)包含指定的属性值就可以被选中
[属性名|=属性值] { color:red } //只要属性名对应的值连字符中的第一个和属性值匹配就可以被选中

[name|="username"]
<input type="text"     name="username-aaaaa" />)```

[属性名*=属性值] { color:red } // 多单词多字母的带有其中某个字母就可以匹配

[name*="y"]
//因为usernamey 包含字母y所以可以匹配
<input type="text" name="usernamey" />)

11.CSS3新增属性选择器

[属性名^=属性值] { color:red } 属性名以指定有属性值开头的被选中

//name以 `u` 开头的被选中
[name^="u"] {
  color:red
}
<input name="username"></input>

[属性名=$属性值] { color:red } 属性名以指定有属性值结尾的被选中

//name以 `d` 结尾的被选中
[name=$"d"] {
  color:red
}
<input name="password"></input>

12.新增伪类选择器