css选择器

类型

标签选择器

• 标签

• p {}

类选择器(class)

• 一个元素可以有多个

  • <p class="colorp textp"></p>
  • 即p有两个class：colorp、textp
  • 要求：
    1. 不能数字开头
    2. 不能非法字符
    3. 望名知意
    4. 命名
       • 驼峰：rightTop
       • 蛇形：right_top
       • 连字符：right-top

• .类名

  • .class {}

id选择器(id)

• 一个元素只能有一个；且id不能重复

• 要求：

  • （同上
  • #id名
  • #id {}

* 通配符选择器

• 匹配页面上所有的元素

• * {}

:: 伪元素选择器

• 选择器1::after 在1之后 (作为该选择器的子元素添加)

• 选择器1::before 在1之前 (作为该选择器的子元素添加)

• 选择器1::first-line 选中1的第一行

• 选择器1::first-letter 选中1的第一个字

• 选择器1::selection 选1中用户选中的区域

• 选择器1::first-child 选中1的第一个元素

• 选择器1::last-child 选中1的最后一个元素

• 元素1::nth-child(？) 选中第几个元素1

• 选择器1>元素A::nth-of-type(？) 选中1的第几个元素A {先筛选类型A}

  • 括号里面可以为数值
  • odd 为奇数、even 为偶数
  • 或者表达式(an+b) （n从0开始，a、b为常数

• 选择器1::not() 不选中()中的元素（可嵌套

  • section>p::not(::nth-child(3n))

•     <h1>哈哈哈</h1>
      h1::before {
      	content :'添加的内容';
      	color:内容的颜色;
      }
      
      <h1>添加的内容哈哈哈</h1>
  

<a> 的伪类选择器

镶嵌的伪类选择器 (四个属性的前后顺序固定)

• ::link 默认 （href属性有值时生效
• ::visited 访问后
• ::hover 悬停
• ::active 点击

属性选择器

• [属性=值]

• 选择多值

• ~ 选择包含值的属性值(单词为一个单位)

             [title~=hello]
             {
                 color:blue;
             } 
         
         将适用:
         <h1 title="hello world">Hello world</h1>
         <p title="student hello">Hello CSS students!</p>
         将不适用:
    ​         <p title="student">Hi CSS students!</p>

​

• | 选择包含值的属性值(单词内的单位)

		 [lang|=en] {
                 color:blue;
          }
         
         将适用:
         <p lang="en">Hello!</p>
         <p lang="en-us">Hi!</p>
         <p lang="en-gb">Ello!</p>
         将不适用:
    ​         <p lang="us">Hi!</p>
    ​         <p lang="no">Hei!</p>

​

关系选择

1. 子级选择器

   • 直接关系；可镶嵌多层
   • 父元素>子元素 {}
   • 父元素>套娃中间元素>子元素 {}

2. 后代选择器

   • 后代关系
   • 祖先元素【空格】子代元素 {}

3. 兄弟选择器

   • 兄弟关系
   • 元素+元素兄弟 {} 选择元素的兄弟