4.CSS选择器

基础选择器

想要将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务规则部分被称为选择器

1. 标签选择器
   • 按标签名分类，为页面某一类标签指定统一css样式，优点：能快速为页面同类型标签设置统一样式，缺点：不能设计差异化样式
   • 基本语法格式如下：

   标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

2. 类选择器
   • 类选择器使用"." 进行标识，后面紧跟类名，其基本语法如下：

   .类名{属性1:属性值1; 属性2:属性值2;属性3:属性值3;}

.class-selector { color: red; }

<p class="class-selector">类选择器</p>

3. 多类名选择器

.class-selector1 { color: red; }
.class-selector2 { font-size: 20px}

<p class="class-selector1 class-selector2">多类名选择器</p>

4. ID选择器

#id-selector { color: blue }

<div id="id-selector">ID选择器</div>

同一个页面中可以出现相同的class，但是不能出现同名的id

5. 通配符选择器
   通配符选择器用 * 表示, 使用通配符选择器，会将所有标签样式都修改

* {
  font-size: 20px;
}

<p>通配符选择器</p>
<div>通配符选择器</div>
<ul>
        <li>通配符选择器</li>
        <li>通配符选择器</li>
        <li>通配符选择器</li>
</ul>

6. 伪类选择器
   伪类选择器用于向某些选择器添加特殊的效果。
   1. 链接伪类选择器
      • :link /* 未访问的链接 */
      • :visited /* 已访问的链接 */
      • :hover /* 鼠标移动到链接上 */
      • :active /* 选定的链接 */
   2. 结构(位置)伪类选择器
      • :first-child /* 选取首个子元素*/
      • :last-child /* 选取最后一个子元素*/
      • :nth-child(n) /* 选取第n个元素*/
      • :nth-last-child(n) /* 选取倒数第n个元素*/
   3. 目标伪类选择器
      : target /选取当前活动的目标元素/

---

复合选择器

1. 交集选择器
   由两个选择器组成，其中一个为标签选择器，第二个为class选择器

h2.class{color:red; font-size:25px;} /*使用较少，不建议使用*/

2. 并集选择器
   各个选择器由逗号连接而成

.class, h2{color:red; font-size:25px;}

3.后代选择器
用于选择元素或者元素组的后代，写法是 外层选择器写在前面，内层标签写在后面，中间用空格隔开

.class h2{color:red; font-size:25px;}

4.子元素选择器（儿子选择器）
使用>符号表示

.item>li {
  color:red; /*将一级菜单设置为红色*/
}

<ul class="item">
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
</ul>

5.属性选择器

选择器	含义
E[attr]	存在attr属性即可
E[attr=val]	属性值完全等于val
E[attr*=val]	属性值包含val并且在“任意”位置
E[attr^=val]	属性值包含val并且在“开始”位置
E[attr$=val]	属性值包含val并且在“结束”位置

6. 伪元素选择器（CSS3）
   1. E::first-letter 文本的第一个单词或字
   2. E::first-line 文本第一行
   3. E::selection 可改变选中文本的样式