Code Better

切换日光/暗黑模式

选择器 ​

作用：查找标签，设置样式。

基础选择器 ​

元素选择器 ​

为页面中 某种元素 统一设置样式。

  • 元素选择器选择的是一类元素，而不是单独某一个，因此元素选择器无法实现差异化设置。
  • 元素选择器无论嵌套关系有多深，都能找到对应的元素。
css
tag {
  /* 元素选择器 */
}
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>元素选择器</title>
    <style>
      li {
        color: orange;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </body>
</html>

类选择器 ​

根据元素的 class 值，来选中页面中所有带这个类名的元素。

  • 一个元素可以有多个类名，类名之间以空格隔开。
  • class值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若有多个单词组成，使用 - 做连接，例如：left-menu，且命名要有意义，做到“见名知意”。
css
.className {
  属性名: 属性值;
}

[class~="className"] {
  属性名: 属性值;
}
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>类选择器</title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: orange;
      }

      [class~="box2"] {
        width: 100px;
        height: 100px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

id选择器 ​

根据元素的 id 属性值，来精准的找到页面中带有这个id属性值的元素，设置样式。

  • id属性值在一个页面中是唯一的，不可重复的。
  • id属性值：尽量由字母、数字、下划线(_)、短杠(-)组成，最好以字母开头、不要包含空格、区分大小写。
  • 一个标签上只能有一个id属性值，一个id选择器只能选中一个标签。
  • id选择器通常配合js使用。
css
#idName {
  属性名: 属性值;
}

[id="idName"] {
  属性名: 属性值;
}
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ID选择器</title>
    <style>
      #box1 {
        width: 100px;
        height: 100px;
        background-color: orange;
      }

      [id="box2"] {
        width: 100px;
        height: 100px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>

通配符选择器 ​

可以选中页面中所有的 HTML 元素。

  • 通配符选择器不需要调用，自动就给所有的元素使用样式。
  • 一般用于清除样式。
css
* {
  /* 通配符选择器 */
}
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>通配符选择器</title>
    <style>
      * {
        color: orange;
      }
    </style>
  </head>
  <body>
    <div>div元素</div>
    <p>p元素</p>
    <span>span元素</span>
  </body>
</html>

复合选择器 ​

由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素。

后代选择器 ​

根据html标签的嵌套关系，选择父元素后代中满足条件的元素。

  • 选择器之间用空格隔开
  • 后代选择器，最终选择的是后代，不选中祖先。
  • 儿子、孙子、重孙子，都算是后代
  • 结构一定要符合HTML的嵌套要求，例如：不能 p 中写 h1～h6
css
选择器1 选择器2{
	属性: 值;
}
css
parent posterity{
	属性: 属性值;
}
元素的关系

元素之间的关系主要有：父元素、子元素、祖先元素、后代元素、兄弟元素。

  • 父元素：直接包裹某个元素的元素。

    html
    <!-- div就是span的父元素 -->
<div>
  <span>span元素</span>
</div>

  • 子元素：被父元素直接包含的元素。

    html
    <!-- span就是div的子元素 -->
<div>
  <span>span元素</span>
</div>

  • 祖先元素：父元素的父元素，...一直往外找都是祖先。

    html
    <!-- div就是li的祖先元素 -->
<div>
  <ul>
    <li>li元素</li>
  </ul>
</div>

  • 后代元素：子元素的子元素，...一直往里找都是后代。

    html
    <!-- li就是div的后代元素 -->
<div>
  <ul>
    <li>li元素</li>
  </ul>
</div>

  • 兄弟元素：具有相同父元素的元素，互为兄弟元素。

    html
    <!-- h1和ul就是兄弟元素 -->
<div>
  <h1>h1元素</h1>
  <ul>
    <li>li元素</li>
  </ul>
</div>

子代选择器 ​

根据html标签的嵌套关系，选择父元素子代中满足条件的元素。

子选择器又称「子代选择器」、「子元素选择器」。

  • 选择器之间用 > 隔开
  • 子选择器，最终选择的是子代，不是父级
  • 子、孙子、重孙子、重重孙子....，统称后代，子就是指儿子。
css
father>child {
	属性: 属性值;
}

兄弟选择器 ​


相邻兄弟选择器 ​

选中指定元素后，符合条件的相邻兄弟元素。

所谓相邻，就是紧挨着它的下一个，简记：睡在我下铺的兄弟。

css
选择器1+选择器2{
	属性: 值;
}
css
/*选中紧紧相邻的兄弟元素（睡在我下铺的兄弟）*/
bro1+bro2{
	属性: 值;
}

通用兄弟选择器 ​

选中指定元素后，符合条件的所有兄弟元素。

  • 两种兄弟选择器，选择的都是下面的兄弟
css
选择器1~选择器2{
	属性: 值;
}
css
bro1~bro2{
	属性: 属性值;
}

并集选择器 ​

同时选择多个选择器对应的元素，设置相同的样式，中间用 `,` 间隔，又称「分组选择器」。所谓并集就是或者的含义。

  • 并集选择器，我们一般竖着写
  • 任何形式的选择器，都可以作为并集选择器的一部分。
  • 并集选择器，常用于集体声明，可以缩小样式表体积。
css
选择器1,
选择器2,
...选择器n {
	属性: 值;  
}
css
ele1,ele2 {
	属性: 属性值;
}

交集选择器 ​

选中页面中同时符合多个条件的元素，交集有「并且」的含义。

  • 交集选择器中如果有元素选择器，元素选择器必须写在最前面。
  • id选择器理论上可以作为交集的条件，但是实际应用中几乎不用，因为无意义。
  • 交集选择器中不可能出现两个元素选择器，因为一个元素不可能即是p元素又是span元素。
  • 用的最多的交集选择器是：元素选择器配合类选择器，例如：p.one。
css
选择器1选择器2 {
	属性: 值;
}
css
/* 选中类名为one的p元素*/
p.one {
  color: orange;
}
/* 选中类名包含one和two的元素*/
.one.two {
  color: orange;
}

伪类选择器 ​

动态伪类选择器 ​

作用

选中特殊状态的元素

伪类：像类（class），但不是类，是元素的一种特殊状态。

动态伪类选择器适用范围描述
:linka元素超链接未被访问的状态
:visiteda元素超链接访问过的状态
:hover所有元素鼠标悬停在元素上的状态
:active所有元素鼠标在元素上按下还未弹起的状态
:focus表单元素获取焦点的元素

语法

css
/* 选中的是没有访问过的a元素 */
a:link {
  color: red;
}

/* 选中的是访问过的a元素 */
a:visited {
  color: gray;
}

/* 鼠标悬停在元素上的状态 */
span:hover {
  color: green;
}

/* 鼠标在元素上按下还未弹起的状态 */
span:active {
  color: orange;
}

/* 获得焦点时的状态 */
input:focus {
  background-color: blue;
}

注意

  • :link 和 :visited 是a元素独有的两种状态
  • 如果同时使用四个伪类选择器，必须按照以上顺序依次书写 lvha
  • 表单控件获取焦点时默认会显示外部轮廓线

结构伪类选择器 ​

作用

结构伪类选择器主要根据元素在HTML中的结构关系查找元素

优势：减少对HTML中类的依赖，有利于保持代码整洁

使用场景：常用于查找父级选择器里面的子元素

选择符简介
:first-child所有兄弟元素中的。
:last-child所有兄弟元素中的。
:only-child选择没有兄弟的元素（独生子女）
:nth-child(n)所有兄弟元素中的。
:nth-last-child(n)所有兄弟元素中的。
:first-of-type所有兄弟元素中的。
:last-of-type所有兄弟元素中的。
:only-of-type选择没有同类型兄弟的元素
:nth-of-type(n)所有兄弟元素中的。
:nth-last-of-type(n)所有兄弟元素中的。
:root选中的是根元素（html标签）
:empty内容为空的元素（空格也算内容）

语法

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>结构伪类选择器</title>
    <style>
      /* 选中div的第一个儿子p元素 */
      div > p:first-child {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>first</p>
      <p>secind</p>
      <p>third</p>
      <p>fourth</p>
      <p>fifth</p>
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>结构伪类选择器</title>
    <style>
      /* 选中div的最后一个儿子p元素 */
      div > p:last-child {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>first</p>
      <p>secind</p>
      <p>third</p>
      <p>fourth</p>
      <p>fifth</p>
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>结构伪类选择器</title>
    <style>
      /* 选中div的唯一一个儿子p元素 */
      div > p:only-child {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>p元素</p>
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>结构伪类选择器</title>
    <style>
      /* 选中div的第2个儿子p元素 */
      div > p:nth-child(2) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>first</p>
      <p>secind</p>
      <p>third</p>
      <p>fourth</p>
      <p>fifth</p>
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>结构伪类选择器</title>
    <style>
      /* 选中div的倒数第2个儿子p元素 */
      div > p:nth-last-child(2) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>first</p>
      <p>secind</p>
      <p>third</p>
      <p>fourth</p>
      <p>fifth</p>
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>结构伪类选择器</title>
    <style>
      /* 选中div的所有p元素的第1个 */
      div > p:first-of-type {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <span>first</span>
      <p>secind</p>
      <p>third</p>
      <p>fourth</p>
      <p>fifth</p>
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>结构伪类选择器</title>
    <style>
      /* 选中div的所有p元素的倒数第1个 */
      div > p:last-of-type {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <span>first</span>
      <p>secind</p>
      <p>third</p>
      <p>fourth</p>
      <p>fifth</p>
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>结构伪类选择器</title>
    <style>
      /* 选中div的唯一一个span元素 */
      div > span:only-of-type {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <span>first</span>
      <p>secind</p>
      <p>third</p>
      <p>fourth</p>
      <p>fifth</p>
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>结构伪类选择器</title>
    <style>
      /* 选中div的所有p元素的第二个 */
      div > p:nth-of-type(2) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <span>first</span>
      <p>secind</p>
      <p>third</p>
      <p>fourth</p>
      <p>fifth</p>
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>结构伪类选择器</title>
    <style>
      /* 选中div的所有p元素的倒数第二个 */
      div > p:nth-last-of-type(2) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <span>first</span>
      <p>secind</p>
      <p>third</p>
      <p>fourth</p>
      <p>fifth</p>
    </div>
  </body>
</html>

注意

关于 n 的值：

  1. 形式：an+b

  2. 0 或 不写 ：什么都选不中。

  3. n ：选中所有子元素。

  4. 1~正无穷的整数 ：选中对应序号的子元素。

  5. 2n 或 even ：选中序号为偶数的子元素。

  6. 2n+1 或 odd ：选中序号为奇数的子元素。

  7. -n+3 ：选中的是前3个。

否定伪类选择器 ​

作用

:not(选择器) ：排除满足括号中条件的元素。

语法

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>否定伪类选择器</title>
    <style>
      /* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
      div > p:not(.fail) {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>first</p>
      <p>second</p>
      <p>third</p>
      <p class="fail">fourth</p>
      <p class="fail">fifth</p>
    </div>
  </body>
</html>

UI伪类选择器 ​

作用

:checked ：被选中的复选框或单选按钮。

:disabled ：可用的表单元素（没有 disabled 属性）。

:enabled ：不可用的表单元素（有 disabled 属性）。

语法

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>UI伪类选择器</title>
    <style>
      /* 选中的是勾选的复选框or单选按钮 */
      input:checked {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" />
    <input type="radio" />
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>UI伪类选择器</title>
    <style>
      /* 选中的是被禁用的input元素 */
      input:disabled {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <input type="text" />
    <input type="text" disabled />
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>UI伪类选择器</title>
    <style>
      /* 选中的是可用的input元素 */
      input:enabled {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <input type="text" />
    <input type="text" disabled />
  </body>
</html>

目标伪类选择器 ​

作用

:target ：选中锚点指向的元素。

语法

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>目标伪类选择器</title>
    <style>
      div {
        height: 300px;
        border: 1px solid gray;
        margin-bottom: 10px;
        text-align: center;
        line-height: 300px;
      }
      div:target {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <a href="#first">锚定first</a>
    <a href="#second">锚定second</a>
    <a href="#third">锚定third</a>
    <a href="#fourth">锚定fourth</a>
    <a href="#fifth">锚定fifth</a>
    <a href="#sixth">锚定sixth</a>
    <div id="first">first</div>
    <div id="second">second</div>
    <div id="third">third</div>
    <div id="fourth">fourth</div>
    <div id="fifth">fifth</div>
    <div id="sixth">sixth</div>
  </body>
</html>

语言伪类选择器 ​

作用

:lang() ：根据指定的语言选择元素（本质是看 lang 属性的值）。

语法

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>语言伪类选择器</title>
    <style>
      div:lang(en) {
        color: red;
      }
      div:lang(zh-CN) {
        color: green;
      }
    </style>
  </head>
  <body>
    <div>div元素</div>
    <div lang="zh-CN">code better</div>
  </body>
</html>

属性选择器 ​

作用：选中属性值符合一定要求的元素。

语法：

选择符简介
[属性名]选中具有某个属性的元素
[属性名="值"]选中包含某个属性，且属性值等于指定值的元素
[属性名^="值"]选中包含某个属性，且属性值以指定的值开头的元素
[属性名$="值"]选中包含某个属性，且属性值以指定的值结尾的元素
[属性名*="值"]选中包含某个属性，且属性值包含指定值的元素
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>属性选择器</title>
    <style>
      /* 选中具有active属性的元素 */
      [active] {
        color: red;
      }
      /* 选中具有active属性且属性值为first的元素 */
      [active="first"] {
        font-size: 30px;
      }
      /* 选中具有active属性且属性值为以t开头的元素 */
      [active^="t"] {
        font-weight: 700;
      }
      /* 选中具有active属性且属性值为以h结尾的元素 */
      [active$="h"] {
        font-style: italic;
      }
      /* 选中具有active属性且属性值中包含o的元素 */
      [active*="o"] {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div active="first">第一个元素</div>
    <div active="second">第二个元素</div>
    <div active="third">第三个元素</div>
    <div active="fourth">第四个元素</div>
  </body>
</html>

伪元素选择器 ​

作用

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

什么是伪元素？很像元素，但不是元素（element），是元素中的一些特殊位置。

::first-letter ：选中元素中的。

::first-line ：选中元素中的。

::selection ：选中内容。

::placeholder ：选中输入框的。

::before ：在元素的位置，创建一个子元素（必须用 content 属性指定内容）。

::after ：在元素的位置，创建一个子元素（必须用 content 属性指定内容）。

语法

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>伪元素选择器</title>
    <style>
      /* 选中的是div中的第一个文字 */
      div::first-letter {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>Code Better.</div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>伪元素选择器</title>
    <style>
      /* 选中的是div中的第一行文字 */
      div::first-line {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div>
      Code Better.Code Better.Code Better.Code Better.Code Better.Code
      Better.Code Better.Code Better.Code Better.Code Better.Code Better.
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>伪元素选择器</title>
    <style>
      /* 选中的是div中被鼠标选择的文字 */
      div::selection {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div>
      Code Better.Code Better.Code Better.Code Better.Code Better.Code
      Better.Code Better.Code Better.Code Better.Code Better.Code Better.
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>伪元素选择器</title>
    <style>
      /* 选中的是input元素中的提示文字 */
      input::placeholder {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="text" placeholder="请输入您的用户名" />
    </div>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>伪元素选择器</title>
    <style>
      /* 选中的是p元素最开始的位置，随后创建一个子元素 */
      p::before {
        content: "¥";
      }
      /* 选中的是p元素最后的位置，随后创建一个子元素 */
      p::after {
        content: ".00";
      }
    </style>
  </head>
  <body>
    <p>100</p>
  </body>
</html>

注意

  • 伪元素必须设置content属性才能生效，有文字就写在引号中，没有文字就写空引号。
  • 伪元素相当于行内元素span，能对span设置的样式，对伪元素都好使。
  • 伪元素在文档树中是不显示的。
  • 伪元素选择器和标签选择器一样，权重为 1。

选择器优先级 ​

基本选择器优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式

权重

  1. 计算方式

    每个选择器，都可以计算出一组权重，格式为：(a, b, c)

    • a ：ID选择器的个数。

    • b ：类、伪类、属性选择器的个数。

    • c ：元素、伪元素选择器的个数。

    例如：

    选择器权重
    #code-better(1, 0, 0)
    .code-better(0, 1, 0)
    a(0, 0, 1)

  1. 比较规则

    按照的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：

    (1, 0, 0) > (0, 1, 0)

  1. 特殊规则

    • 行内样式权重大于所有选择器

    • !important 的权重，大于行内样式，大于所有选择器，权重最高！

注意

计算权重时需要注意：。

©2024 Dancy Su