css的五种选择器

 1. 核心选择器

• id选择器      利用了html元素的id属性，是唯一的

 #one {}    选中id为one的元素

•  class选择器   利用html元素的class属性，非唯一

.box {}    选中class为box的元素

• 标签选择器     利用标签名进行选择

 div {}     选中所有的div元素

• 并且选择器

 div.box {} 选中div元素，并且这个div的class为box

• 和选择器

 div,.box{} 选中div元素和class为box的元素

• 普遍选择器

  * {}       选中所有元素

2. 层次选择器( 两个选择器配合使用)

• 子选择器：>    通过父元素选择子元素

.menu > li {} 选中了class为menu的所有li子元素

•  后代选择器：空格

.menu li {}选中了class为menu的所有后代li元素

<ul class="menu">
    <li></li>
        <li>
            <ul>
                <li></li>
                <li></li>
            </ul>
        </li>
</ul>

• 兄弟选择器

~ 当前元素之后的所有兄弟

        ul.rank > li:nth-child(2) ~ *{}，选中了第二个li之后的所有li

+ 当前元素之后的下一个兄弟

        ul.rank > li:nth-child(2) + *{}，选中了第三个li

3. 属性选择器(属性过滤器)，一般应用在表单元素

• input[name]   

        具有name属性input元素

• input[name='username']

        具有name属性，并且name属性值为username的input元素

• input[name^='u']

        具有name属性，并且name属性值以'u'作为开始

• input[name*='u']

        具有name属性，并且name属性值包含'u'

•  input[name$='u']

        具有name属性，并且name属性值以'u'作为结尾

4. 伪类选择器(伪类过滤器)

      :first-child

      :last-child

      :nth-child(n) 第n个孩子

      :visited      访问过的

      :hover        光标悬浮上去

      :active       a标签

      :focus        聚焦

5. 伪元素选择器

      ::after

      ul.menu::after {}在class为menu的ul元素中追加一个子元素

        ::before       

        ul.menu::before {}在class为menu的ul元素中插入一个子元素