CSS选择器

一、常用的选择器
1.标签选择器
语法 : 标签名{}

作用 : 选中对应标签中的内容

例:p{} , div{} , span{} , ol{} , ul{} ......

2.类选择器(class选择器)
语法 : .class属性值{}

作用 : 选中对应class属性值的元素

例子 : <p class="A">段落1</p>

          <p class="B">段落1</p>

          <p class="C">段落1</p>

          .A{} , .B{} , .C{} ......

      

3.id选择器
语法 : #id属性值{}

作用 : 选中对应id属性值的元素

例子 : <p id="A">段落1</p>

          <p id="B">段落1</p>

          <p id="C">段落1</p>

          #A{} , #B{} , #C{} ......

注意 :每个网页不能重复

4.通配符选择器
语法 : *{}

二、复合选择器
语法 : 选择器1,选择器2,选择器3...{}

作用 : 同时选中对应选择器的元素

三.包含选择器

子代选择器：选中亲生儿子

后代选择器：找到后代所有要找的元素

 

属性选择器：

属性选择器一共有7种写法

1.某某[属性]

2.某某[属性=属性值]

3.某某[属性^=属性值]

4.某某[属性$=属性值]

5.某某[属性*=属性值]

6.某某[属性~=属性值]

7.某某[属性|=属性值]

input[type="password"]{}
*：包含
input[type*="m"]{}

^以……开头
input[type^="te"]{}
$：以……结尾

input[type$="te"]{}

伪类选择器：
:hover================鼠标经过时
            
a:hover div{
对div的更改
}

           <a> 
        <div>
        </div>
           </a>
注：a标签与div标签是父子关系

a:hover+div{
对div更改的
}

 <a></a>
<div></div>
注：a标签与div标签是兄弟关系

结构伪类：
E:nth-child()   ；先看nth-child
E:nth-of-type（）       先看E，对所有的E进行编码，然后再看:nth-of-type（）
伪元素

:selection     表示选中的元素

::before         元素开始的位置前

::after            元素结束的位置后

befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)