HTMLCSS选择器

选择器

1.元素选择器 元素名{声明块} 选中页面上所有的元素

h2{
	color:pink; /*字体颜色*/
	font-size:40px;/*字体大小*/
}

2.类选择器 .类名{声明块}

取名要求：1.不能是纯数字开头2.望名知意，驼峰命名法（rightTop），蛇形命名法（right_top）,连字符（right-top）

一个元素可以有多个类名

<h1 title="sss" class="as">你好</h1>
<h1 title="sss" class="as test">你好</h1>

3.**id选择器 ** #id名{声明块}

id不能有多个，且名字不能重复（id右两个唯一，一个元素只能有一个id名，一个id只能在页面上主出现一次）在客户端最好不要用,在js用

<h1 title="sss" id="">你好</h1>

4.子级选择器 父元素>子元素>{声明块}

div>a{
	font-size:40px;  /*字体大小*/   
}

5.后代选择器 祖先元素 后代元素{声明块}

div a{
	font-size:40px;  /*字体大小*/ 
    text-decoration:none; /*去掉a标签下划线*/
    /* 声明的相同时，会覆盖，所以会自上而下的执行 */
    /* 下划线 */
    text-decoration: underline;
    /* 顶划线 */
    text-decoration: overline;
    /* 中划线，删除线 */
    text-decoration: line-through;
    
}

6.属性选择器

//根据元素中的属性或属性值来选取指定元素
[属性名]选取含有指定属性的元素
[属性名=“属性值”]选取含指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值包含指定内容的元素

7.分组选择器

通过它可以同时选中多个选择器对应的元素（通常用于集体声明）

.t1,.t2,.t3{
	//css样式
}

8.复合选择器

作用：选择更准确更精细的目标元素并为其设置属性

注意：不允许有空格

p.t1{  //p标签下的类选择器t1设置样式
	//css样式
}

9.通配符选择器

*{}:用来选中页面中的所有元素

*{
	//css样式
}

10.伪类选择器

1. :first-chil

   /* 匹配第一个元素 */
   section>p:first-child{
       color: cornflowerblue;
   }
   

2. :last-child

   /* 匹配最后一个元素 */
   section>p:last-child{
       background-color: crimson;
   }
   

3. :nth-child(3)

   /*   */
   /* 1.直接写数字 */
   section>p:nth-child(3){
       color: darkcyan;
   }
   

4. :nth-child(2n+1)

   /* 2.an+b */
   section>p:nth-child(2n+1){
       color: darkorange;
   }
   section>p:nth-child(3n){
      font-style: italic;
   }
   

5. :nth-child(even)

   /* 3.关键字 odd(奇数) even（偶数） */
   section>p:nth-child(even){
       background-color: darkseagreen;
   }
   section>p:nth-child(odd){
       background-color: palevioletred;
   }
   

6. 如果对应的元素不是p元素，则不会被选中

   /* 如果对应的元素不是p元素，则不会被选中 */
   /*  <span>Lusamus optio voluptatum assumenda nobis quia?</span> */
   section:p:nth-child(9){
       font-weight: bold;
   }
   

7. :nth-of-type()

   html部分

   <div>
               <p>001 Lorem ipsum dolor sit amet consectetur.</p>
               <h5>002 Lorem ipsum dolor sit amet consectetur.</h5>
               <p>003 Lorem ipsum dolor sit amet consectetur.</p>
               <p>004 Lorem ipsum dolor sit amet consectetur.</p>
               <h5>005 Lorem ipsum dolor sit amet consectetur.</h5>
               <p>006 Lorem ipsum dolor sit amet consectetur.</p>
               <p>007 Lorem ipsum dolor sit amet consectetur.</p>
               <h5>008 Lorem ipsum dolor sit amet consectetur.</h5>
               <p>009 Lorem ipsum dolor sit amet consectetur.</p>
               <h5>000 Lorem ipsum dolor sit amet consectetur.</h5>
           </div>
   

   css部分

   /* :nth-of-type()  先筛选类型*/
   div>p:nth-of-type(3){
       color: palevioletred;
   }
   div>h5:nth-of-type(2n){
       font-size: 50px;
   }
   

8. :not()

   /* 否定选择器
       :not()
   */
   /*除了0，5，10不变颜色，其他都要变颜色*/
   section>p:not(:nth-child(5n))
   {
       background-color: plum;
       background-color: transparent; /*透明色*/
   }
   

9. a标签配对的伪类选择器 (记忆：love=>hate)

   /* a标签配对的伪类选择器 */
   /* 访问前 */
   a:link{
       color: plum;
   }
   /* 访问后 */
   a:visited{
       color: yellow;
   }
   /* 鼠标移入悬停 */
   a:hover{
       color: green;
   }
   /* 点击时 */
   a:active{
       color: blue;
   }
   

11.兄弟选择器

+：选中一个元素后紧挨着的指定的兄弟元素

~：选中后边所有的制定兄弟元素

p+a{   //选中p标签后的第一个a标签
	//css样式
}
p~a{	//选中p标签后面的所有a标签来设置样式
	//css样式
}