1.什么是CSS选择器

CSS选择器用于选择你想要的元素的样式的模式。HTML页面中的元素就是通过CSS选择器进行控制的。

2.CSS选择器分类知识

整体代码如下：

  <style>
        /* 元素选择器 */
        body{background-color: floralwhite; text-align: center;}
        h1{color: darkorange;}
        /* 类别选择器 */
        .list_1{color: red; font-size: 30px;}
        /* id选择器 */
        #five{color: yellowgreen; font-family: cursive; font-style: italic; font-weight: bolder;}
        /* 后代选择器 */
        ul em{color: tomato; font-style: initial;}
        ul b{color: lime;font-size: 30px;}
        /* 父子选择器 */
        ul>li{font-size: 40px;}
        /* 下面的一级没有变化 */
        ul>em {font-size: 50px;} 
        /* 同级相邻选择器 */
        ul+ol{font-family: STCAIYUN;}
        /* 同级所有选择器 */
        .number.em ~ .number{background-color: mediumblue;}
        /* 伪类选择器：不分组 */
        /* 第一个子元素 */
        ul > :first-child{background-color: mediumvioletred;}
        /* 最后一个子元素 */
        ul > :last-child{background-color: orange;}
    </style>
</head>
<body>
    <h1>《锦瑟》</h1>
    <h2>锦瑟无端五十弦，一弦一柱思华年。</h2>
    <h3 class="list_1">庄生晓梦迷蝴蝶，望帝春心托杜鹃。</h3>
    <h4>沧海月明珠有泪，蓝田日暖玉生烟。</h4>
    <h5 id="five">此情可待成追忆，只是当时已惘然。</h5>
    <ul>
        <li>江雪</li>
        <li>千 山 鸟 飞 绝</li>
        <li>万 径 人 踪 灭</li>
        <li><em> <b> 孤 舟</b> 蓑 笠 翁</em></li>
        <li>独 钓 寒 江 雪</li>
    </ul>
    <ol>
        <li>鹿柴</li>
        <li class="number em">空 山 不 见 人</li>
        <li class="number">但 闻 人 语 响</li>
        <li class="number">返 景 入 深 林</li>
        <li class="number">复 照 青 苔 上</li>
    </ol>
</body>

元素选择器

/* 元素选择器 */
     body{background-color: floralwhite; text-align: center;}
     h1{color: darkorange;}

例图：

类别选择器

/* 类别选择器 */
     .list_1{color: red; font-size: 30px;}

例图：

id选择器

  /* id选择器 */
     #five{color: yellowgreen; font-family: cursive; font-style: italic; font-weight: bolder;}

例图：

结构伪类选择器（分组）
后代选择器：

 /* 后代选择器 */
     ul em{color: tomato; font-style: initial;}
     ul b{color: lime;font-size: 30px;}

例图：

父子选择器：

     /* 父子选择器 */
     ul>li{font-size: 40px;}
     /* 下面的一级没有变化 */
     ul>em {font-size: 50px;}

例图：

同级相邻选择器：

     /* 同级相邻选择器 */
     ul+ol{font-family: STCAIYUN;}

例图：

同级所有选择器：

    /* 同级所有选择器 */
     .number.em ~ .number{background-color: mediumblue;}

例图：

结构伪类选择器（不分组）
第一个子元素

    /* 第一个子元素 */
     ul > :first-child{background-color: mediumvioletred;}

例图：

最后一个子元素

    /* 最后一个子元素 */
     ul > :last-child{background-color: orange;}

例图：

3.伪类与伪元素

:target:必须与id配合，实现锚点操作
:focus:向拥有键盘输入焦点的元素添加样式
::selection:一般用于设置选择文本的前景色和背景色
:not():用于选择不满足条件的元素
::before:在元素前面加上内容，与content一起使用
::after:在元素后面加上内容，与content一起使用
:hover:向鼠标悬停时向元素添加样式
:active:向被激活的元素添加样式
:link:未被访问的链接添加样式

:visited:向已被访问的链接添加样式

代码如下：*

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=, initial-scale=1.0">
 <title>Document</title>
 <style>
     <style>
 /* 隐藏表单 */
 #form {display: none;}
 /* 利用：target,当鼠标点击按钮时，表单被激活并显示 */
 #form:target {display: block;}
 /* 点击输入框，获得焦点时 */
 input:focus {background-color: palegreen;}
 /* 输入的文本被选中时 */
 input::selection {color: brown; background-color: chartreuse;}
 /* 除了列表中的倒数第三个都改变背景色 */
 ul li:not(:nth-last-child(3)) {color: gold;}
 /* 列表前加内容 */
 ul::before {content: "我的购物车"; font-size: 40px; color:red;}
 /* 列表后面加内容 */
 ul::after {content: "恭喜你被免单了！"; color: red;font-size: 30px;}
 a:link {color: darkorange;}
 a:hover {color: darkred;}
 a:active {color: deeppink;}
 a:visited {color: yellow;}
 </style>
</head>
<body>
 <form id="form">
   <label for="username">用户名：</label
   ><input type="text" name="username" id="username" />
   <label for="cipher">密码：</label
   ><input type="password" name="cipher" id="cipher" />
   <p><!-- <a href="#form">登录</a> --></p>
   <button onclick="location='#form'">登录</button>
 </form>
 <hr />
 <ul>
   <li>华为手机</li>
   <li>联想电脑</li>
   <li>小米电视</li>
   <li>固态硬盘</li>
   <li>内存条</li>
 </ul>
 <hr />
 <a href="#">京东618</a>
</body>

例图：

4.CSS选择器总结

搞清楚元素之间的关系，明白谁是父类。
熟练掌握每种选择器的写法，例如id选择器用 # 、类别选择器用 . 开头。
伪类：（未被访问状态、已被访问状态、鼠标悬停状态、活动状态）的使用。

CSS选择器初体验

1.什么是CSS选择器

2.CSS选择器分类知识

整体代码如下：

3.伪类与伪元素

4.CSS选择器总结

相关文章