css选择器

CSS选择器：起定位查找的作用，定位到对应标签元素设置样式

常用选择器

分为四类，优先级如下：
ID选择器>类选择器>标签选择器>通配符选择器

1. 标签选择器
   直接通过标签名引入
   eg:用内嵌导入样式来设置h1颜色：

<style>
   h1{
        color: aqua;
    }
    </style>

2. ID选择器
   通过#ID名引入
   （前提需要设置对应的id名与之对应）
   eg:有一个id名为one的标签设置颜色:

<style>
   #one{
        color: aqua;
    }
    </style>
    

3. 类选择器
   通过.class名引入
   （前提需要设置对应的class名与之对应）
   eg:有一个class名为two的标签设置颜色:

<style>
   .two{
        color: aqua;
    }
    </style>

4. 通配符选择器
   通配符*引入（*代表所有标签）

<style>
   *{
        color: aqua;
    }
    </style>

记住基本选择器的引入符号，后面选择器都在此基础上发生一点改变，实质还是不变的

5. 包含选择器

顾名思义他们标签之间也存在着包含关系，根据包含的层级划分如下：

• 子代选择器—类似于儿子，它的下一子级
• 后代选择器—类似所有直系亲属，包含在它内部的所有标签（若干子级）
• 分组选择器—用逗号间隔的多个不同标签，同时为他们设置样式

  子代选择器（用>间隔）
  .one>.o{
            color: aqua;
        }--类名为one标签下包含的类名为o的标签

后代选择器（直接引用最外层标签名）
 .one{
            color: aqua;
        }--同标签选择器

分组选择器（用逗号间隔不同标签）
.one,#t,h3{
            color: rgb(96, 229, 94);
        }

特殊选择器

1. 属性选择器（中括号表示[ ]）
   根据特定属性和属性取值来定位
   eg:若已写带有type属性的代码块

常用通配符	示例代码说明
input[type]	选择有type属性的所有元素
input[type=value]	type=value值的所有元素
input[type^=value]	以value值开头的所有元素
input[type$=value]	以value值结尾的所有元素
input[type*=value]	包含value值的所有元素

以a开头的所有元素
input[type^=”a”]{
     background-color:pink;
    }
以a结尾的所有元素
input[type$=”a”]{
     background-color:pink;
    }    
包含com值的所有元素
input[type*=”a”]{
     background-color:pink;
    }    

2. 伪类选择器（冒号表示）
   通常用来设置a标签
   同一个标签，在不同的状态下，显示出不同的样式

引用方式	代码说明
a:link	超链接点击之前
a:visited	超链接访问后
a:hover	鼠标悬停的时候
a:active	超链接被激活后

<style> 一般写的时候不掉换标签顺序
        a:link{
            color: red;
        }
        a:visited{
            color: blue;
        }
        a:hover{
            color: yellow;
        }
        a:active{
            color:orange;
        }
 </style> 

其实本方法同在a标签内用属性style的link、alink、vlink属性值设置的效果是一样的，只是方法不同
3. 伪元素选择器
通常用来设置p标签

引用方式	代码说明
p:before	在p标签的内容之前显示 css2
p:after	在p标签的内容之后显示
p::before	在p标签的内容之前显示css3
p::after	在p标签的内容之后显示

使用时一定要加content

p::before{
   content:”你好呀”；
     }
p::after{
   content:”拜拜”；
     }     

总结

其实每个选择器的引用都是相似的，但是一定要记住一些常用的通配符，比如id名是用#，class名是用.来区分，还需要清楚标签之间的包含关系，因为有时涉及优先级之类的，引用时也遵循逐层引入，从外到内。