CSS选择器

css选择器

CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用

1. .class：类选择器，如下例子，选择所有class="first_list"的元素

 #first_list {
            width: 100px;
            height: 100px;
            border: 1px solid skyblue;
            background-color: hotpink;
        }
        
  <div id="first_list"></div>
  <div id="first_list"></div>

2. #first_list: id选择器，和类选择器同样的用法，不同的是选择器名字前面是号**#**

#first_list {
            width: 100px;
            height: 100px;
            border: 1px solid skyblue;
            background-color: hotpink;
        }
 <div id="first_list"></div>
 <div id="first_list"></div>

3. div,p: 选择所有div和p元素（这个选择器的写法只是其中一种方式，也可用其他选择器中间加逗号的方式，来进行dom选择）比如：

 .first,.second {
          width: 100px;
          height: 100px;
          background-color: blue;
        }
 <div class="first">12</div>
 <div class="second">34</div>

4. div p： 子选择器 选择div元素内部的所有p元素。

   div p{
     color:blue;
   }

5. element > element ： 拥有某父元素的元素 div>p{} //选择所有父元素为div的p元素

div>p{
   font-size:29px;
}

6. element + element ： 相邻选择器 div+p{} //选择所有div后紧挨的p元素

div+p{
   color:red;
}

7. element~element ： 之后选择器 div~p{} //选择所有div后的p元素

div~p{
  color:red;
}

8. [attribute] ： 属性选择器 [width]{} //选择所有拥有width属性的元素

[width]{
    height:100px;
}

9. [attribute=value] : 属性值选择器 [class=“a”] //选择所有拥有class属性且名为a的元素

[class=a]{
   background-color:red;
}

10. [attribute~=value] : 属性值选择器 [class=“a”] //选择所有拥有class属性且名 包含 为a的元素

[class~=a]{
   color:red;
}

11. [attribute|=value] : 属性值选择器 [class=“a”] //选择所有拥有class属性 且名起始以a开头 的元素

[class|=a]{
   clolr:red;
}

12. element[attribute^=value]: 属性值选择器 div[class=“a”] //选择所有拥有class属性 且名以a开头 的div元素

div[class="a"]{ color:red;}

13. ** element[attribute$=value]:\ast \ast 属性值选择器div[class$=“a”] //选择所有拥有class属性 且名以a结尾 的div元素

img[src$=".jpg"]{
width:200px;
}

14. element[attribute=value]:* 属性值选择器 div[class*=“a”] //选择所有拥有class属性 且名包含a 的div元素

div[class*="a"]{ padding:10px 10px;}

伪类选择器

  ：link     正常情况未被访问的样式      a：link{}     //未被访问的超链接a的样式

a:link{
  text-decoration:none;
}

：visited 已经被访问了的样式 a：visited{} //已经访问的样式
：active 当被鼠标点击那一刻时的样式 a：active{} //当超链接被鼠标点击那一刻时的样式
：hover 当鼠标移上去的样式 div：hover{} //当鼠标移在这个层上时的样式
：focus 选择获取焦点的元素 input：focus{}//选择获取焦点的输入框
：before 在该元素前添加的内容样式 p：before{} //在所有的p元素前添加的内容及内容样式
：after 在该元素后添加内容及样式 p：after{} //选择所有的p元素在其后添加内容及样式
：first-letter 选择该元素的第一个字母 p：first-letter{} //选择所有p元素的第一个字母
：first-line 选择该元素的第一行 p：first-line{} //选择所有p元素的第一行
：first-child 该元素为其父元素的第一个子元素 p：first-child{} //指定p元素为其父元素的第一个子级
：first-of-type 该元素的父元素的第一个该元素 p：first-of-type{} //选择作为父元素的第一个p元素
：last-of-type 该元素的父元素的最后一个该元素 p：first-of-type{} //指定其父元素的最一个p元素

：last-child 该元素为其父元素的最后一个子元素 p：last-child{} //选择其父元素最后一个子元素为p元素

：nth-child(n) 该元素其父元素的第n个该子元素 p:nth-child(2){} //选择其父元素正数的第2个p元素
：nth-of-type(n) 该元素其父元素的的第n个子元素
：root 根元素
：emmpty 没有子元素的元素
：target 当前活动的#news元素（包含锚名）
：enabled 当前启用的元素
：disabled 当前禁用的元素
：checked 每个选中的元素
：not 除该元素外的元素
::selection 匹配元素中被用户选中或处于高亮状态下的部分
：out-of-range 匹配值在指定值域外时的样式
：in-range 匹配值在值域内时的样式
：require 匹配设置了require的元素
：optional 匹配可选的元素
：valid 匹配合法时的样式
：invalid 匹配不合法时的样式