通用选择器

  • * {color:red;}
    • 选取所有的元素设置样式，一般用于清除浏览器默认样式
    • PS：效率比较低，尽量不要使用

元素选择器

  • div {color:red;}
    • 给所有的div元素设置样式

类选择器

  • .one {color:red;}

    • 给class属性值为one的元素设置样式

    • PS：一个元素可以有多个类名，多个类名之间以空格进行分割 

        1. <div class="one two"></div>

    • 类名的规范：以kobe-case命名

id选择器

  • #one {color:red;}

    • 给id属性值为one的元素设置样式
    • 注意：一个HTML文档里面的id值是唯一的，不能重复
    • id选择器只会匹配第一个匹配到的元素

      群组选择器

      div,p,h1 {
background-color: yellow;
}

      后代选择器

      /* 找到被div包裹的p标签 */
div p{
background-color: yellow;
}

      伪类选择器

      什么是伪类

  • 伪类专门用来表示元素的一种的特殊的状态

    • 比如：访问过的超链接、普通的超链接、获取焦点的文本框
    • 当我们需要为处在这些状态的元素设置样式时，就可以使用伪类

目标伪类

  • a:target：可用于选取当前活动的目标元素(配合锚点使用)

元素伪类

  • input:disabled： 匹配每个被禁用的元素，只支持表单元素

动态伪类

  • a:link ：未访问的链接
  • a:visited：已访问的链接
  • a:hover ：鼠标挪动到链接上
  • a:active ：激活的链接（鼠标在链接上长按住未松开）
  • 以上编写顺序是 :link、:visited、:hover、:active
  • 除了a元素，:hover、:active也能用在其他元素上
  • :hover表示获取鼠标经过时的元素
  • input:focus 获取当前拥有输入焦点的表单元素

使用：

<style type="text/css">
   a:link{
       color: yellow;
   }
   a:visited{
       color: blanchedalmond;
   }
   a:hover{
       color: black;
   }
   a:active{
       color: green;
   }
</style>


<a href="http://www.baidu.com">访问百度</a>

效果图：
image.png

结构伪类

  • 作用：专门用于匹配子元素的
    • ele:nth-child(n) ：匹配指定元素的第 N 个子元素
    • ele:nth-child(odd)：匹配指定元素的奇数的子元素的
    • ele:nth-child(even)：匹配指定元素的偶数的子元素的
    • ele:nth-last-child(n)：匹配指定元素的的倒数第 N 个子元素
  • 其他的结构伪类（了解）：
    • ele:first-child，等同于:nth-child(1)
    • ele:last-child，等同于:nth-last-child(1)
    • ele:only-child，匹配父元素中唯一的子元素
    • ele:root：根元素，就是HTML元素
    • ele:empty代表里面完全空白的元素

否定伪类

  • 作用：可以从已选中的的元素中剔除某些元素
  • 语法： :not(选择器)
    • div:not('.box1') { }：获取所有div但是除了class为box1的div元素

伪元素选择器

什么是伪元素

  • 伪元素选择器用于表示元素中的一些特殊的位置
  • 伪元素注意细节：
    • 为了区分伪元素选择器和伪类选择器，建议伪元素使用2个冒号，比如::first-line

伪元素选择器

  • ele::before和ele::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片） 

    ele::after {
 content: '要插入的内容';
 color: red;
}

  • input::placeholder：获取input元素中的占位字符元素 

    • input::placeholder {
color: pink;
}

      选择器权重

      当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生了冲突，会选择权重高的执行。
      image.pngimage.png