理解CSS之选择器|青训营笔记

这是我参与【第四届青训营】笔记创作活动的第二天

CSS的使用

在页面中使用CSS

<!--外部样式表-->
<link rel="stylesheet" href="样式文件URL">

<!--内部样式表-->
<style>
      选择器{属性1：值；属性2：值}
</style>

<!--内联样式表-->
<元素名 style="属性名称:属性值；">

样式表层叠优先级：内联样式表>内部样式表>外部样式表

CSS 是如何工作的

选择器:基于标签和属性定位元素

1. 通配选择器*，样式应用到所有标签

<style>
    *{
    color:red;
    font-size:30px;
   }
</style>
<h1>理解CSS</h1>
<p>第一部分为选择器</p>

运行结果：

*表示所有的标签样式

2. 标签选择器，样式只应用于对应标签
3. ID选择器，为特定某个元素进行样式设定（ID要唯一）

<style>
    #logo{
         color:red;
         font-size:30px;
      }
</style>
<h1 id="logo">理解CSS</h1>
<p>第一部分为选择器</p>

运行结果：

只为id为logo的标签设置了红色及字体为30px样式。

4. 类选择器，为不同元素定义共同的样式

<style>
    .done{
    color:gray;
    text-decoration:line-through;
</style>
<h2>TO DO List</h2>
<ul>
    <li class="done">HTML</li>
    <li class="done">CSS</li>
    <li> javascript</li>
</ul>

运行结果： 5. 属性选择器,通过元素的属性或属性值去选中这个元素

<style>
   [disabled]{
         background-color:gray;
         color:black;
         }
    input[type="password"]{
        color:blue;
        }
</style>
<label>用户名：</label>
<input value="css" disabled>
<label>密码：</label>
<input value="123456789" type="password">

运行结果：

其他：

<--！^=表示href以指定内容开头的元素-->
a[href^="#"]{color:brown;}
<--！$=表示href以指定内容结尾的元素-->
a[href^=".jpg"]{color:brown;}

伪类：不基于状态和标签定位元素

状态伪类

• <a>可定义状态伪类： a:link默认状态下样式；a:visited连接访问过后显示的样式；a:hover鼠标置于连接处；a:active鼠标按下去的状态
• 输入框 ：focus聚焦到输入框上

结构性伪类：根据dom节点在dom树中出现的位置来决定是否选择这个元素

<style>
     li{
        color:black;
        text-decoration: underline;
      }
     li:first-child{color:red;}
     li:last-child{
         color:gray;
         text-decoration: none;
      }
           
</style>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>javascript</li>
</ol>

运行结果：

• first-child指父级中第一个child
• last-child指父级的最后一个child

其他的结构伪类：

选择器组：为不同的元素设置相同样式，标签用逗号隔开

本笔记主要包含css选择器的知识点。