css选择器概述

1. 通用选择器

   可以同时选中页面中的所有元素。
   • 语法：
   *{ }

2. 元素选择器

   可以根据标签的名字来从页面中选取指定的元素。

   • 语法：标签名 { }

3. 类选择器

   可以根据元素的class属性值选取元素。

   • 语法： .className { }

4. ID选择器

   可以根据元素的id属性值选取元素。

   • 语法：#id { }

5. 复合选择器

   可以同时使用多个选择器这样可以选择同时满足多个选择器的元素。
   • 语法：选择器1选择器2{ }
   例：div.hello会选中页面中具有hello这个class的div元素

6. 群组选择器（并集选择器）

   可以同时使用多个选择器，多个选择器将被同时应用指定的样式。

   • 语法：选择器1,选择器2,选择器3 { }
   • 比如p,.hello,#lalala会同时选中页面中p元素，
   class为hello的元素，id为lalala的元素

7. 后代选择器

   根据标签的关系，为处在元素内部的代元素设置样式。
   • 语法：
   祖先元素 后代元素 后代元素 { }

   比如p span 会选中页面中所有的p元素
   内的span元素

8. 属性选择器

   可以挑选带有特殊属性的标签。
   • 语法:[属性名]
   [属性名=“属性值”]（指定内容）
   [属性名^=“属性值”]（指定内容开头）
   [属性名$=“属性值”]（指定内容结尾）
   [属性名*=“属性值”]（指定内容包括）

9. 子元素选择器

   子元素选择器可以给另一个元素的子元素
   设置样式

   语法：
   父元素 > 子元素{}
   • 比如body > h1将选择body子标签中的所
   有h1标签。
   其他
   :first-child{ }
   选择第一个子标签
   :last-child{ }
   选择最后一个子标签
   :nth-child{ }
   :only-child
   (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
   选择指定位置的子元素
   :first-of-type{ }
   :last-of-type{ }
   :nth-of-type { }
   :only-of-type { }
   (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
   选择指定类型的子元素
   child ：所有子元素中查找
   type ：当前类型中查找
   index的值从1开始计数！！！！
   index可以为变量n(只能是n)
   index可以为even odd

10. 兄弟选择器

    语法:
    查找后边一个兄弟元素（紧跟上一个兄弟）：
    兄弟元素 + 兄弟元素{ }
    查找后边所有的兄弟元素：
    兄弟元素 ~ 兄弟元素{ }

伪类和伪元素

给链接定义样式
• 正常链接
a:link{ }
• 访问过的链接
a:visited{ }（只能定义字体颜色）
• 鼠标滑过的链接
a:hover{ }
• 正在点击的链接
a:active{ }
id是uri的标识符
:target{ }
• 获取焦点
:focus{ }
选中的元素
::selection{ }
• 指定元素前
:before{ }
• 指定元素后
:after{ }
一般需要和content一起使用
通过content向before和after的位置添加一些内容
p:before{
content:“啦啦啦啦啦啦啦啦啦啦”;
color:red;
}
表单相关伪类

            :enabled    匹配可编辑的表单
            :disable    匹配被禁用的表单
            :checked    匹配被选中的表单
            :focus        匹配获焦的表单

给段落定义样式****
首字母
:：first-letter { }
首行
:：first-line{ }
设置选中的样式
::selection{ }
以帮助我们选择不是其他东西的某件东西。
• 语法:
:not(选择器){ }
• 比如p:not(.hello)表示选择所有的p元素但
是class为hello的除外。
:empty
内容必须是空的，有空格都不行，有attr没关系

选择器的权重

不同的选择器有不同的权重值：
– 内联样式：权重是 1000
– id选择器：权重是 100
– 类、属性、伪类选择器：权重是 10
– 元素选择器：权重是 1
– 通配符：权重是 0
• 计算权重需要将一个样式的全部选择器相加，比如上边的body h1的权重是20，h1的权重是10，所以第一个选择器设置的样式会优先显示。
ps:
相同权重那个选择器在后面用谁
并集选择器的优先级单独计算
可以再样式最后添加！important获得最高的优先级
a伪类的编写顺序：
:link
:visited
:hover
:active