CSS-选择器篇

mzl木子李
227 阅读7分钟

一、什么是CSS选择器

要使某个样式应用于特定的HTML元素，首先要找到该元素，而选择器为获取目标元素之后施加样式提供了极大的灵活性

二、CSS选择器的优势

减少开发中对HTML类名和ID名的依赖，已经对HTML元素结构的依赖，使编写代码更加简单轻松

三、CSS选择器的分类

  1. 基本选择器
  2. 层次选择器
  3. 伪类选择器
    1. 动态伪类选择器
    2. 目标伪类选择器
    3. 语言伪类选择器
    4. UI元素状态伪类选择器
    5. 结构伪类选择器
    6. 否定伪类选择器
  5. 伪元素
  6. 属性选择器

3-1 基本选择器

基本选择器是CSS中使用最频繁的，也是CSS中最早定义最基础的选择器 选择器 | 类型 | 功能描述 | | ------------------- | ----- | -------------------------------- | | * | 通配选择器 | 选择文档中所有的HTML元素 | | E | 元素选择器 | 选择指定的类型的HTML元素 | | #id | ID选择器 | 选择指定ID属性值为“id”的任意类型元素 | | .class | 类选择器 | 选择指定class属性值为“class”的任意类型的任意多个元素 | | selector1,selectorN | 群组选择器 | 将每一个选择器匹配的元素集合并（如：p, h1 {}）

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>使用 CSS 基本选择器</title>
  <style type="text/css">
    * { margin: 0; right: 0 } /* 通配选择器的性能很差，不建议使用，建议使用群组选择器 */
    .clearfix:after, .clearfix:before { display: table; content: ''; } /* 群组选择器 */
    .clearfix:after { clear: both; overflow: hidden; } /* 清除浮动 */
    #demo { width: 100%; height: 100%; } /* ID选择器 不建议使用，建议使用类选择器 */
    .demo-ul { width: 300px; border: 1px solid #ccc; padding: 10px; margin: 20px auto; } /* 类选择器 */
    li { list-style: none outside none; float: left; height: 20px; line-height: 20px; width: 20px; border-radius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px; } /* 元素选择器 */
  
    .item { background: green; color: lime }
    .item.important { background: red }
  </style>
</head>
<body>
  <div class="demo" id="demo">
    <ul class="clearfix demo-ul">
      <li class="first" id="first">1</li>
      <li class="active">2</li>
      <li class="important item">3</li>
      <li class="important">4</li>
      <li class="item">5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li class="last" id="last">10</li>
    </ul>
  </div>
</body>
</html>

效果图：

1627528889(1).jpg

注意：IE6 选择器不支持多类名选择器，会已末尾类名为准

3-2 层次选择器

层次选择器通过HTML的DOM元素之前的层次关系获取元素，主要的层次关系：后代、父子、相邻兄弟和通用兄弟

选择器类型功能描述
E F后代选择器(包含选择器)选择匹配的 F 元素，且匹配的 F 元素被包含在匹配的 E 元素内
E>F子选择器选择匹配的 F 元素，且匹配的 F 元素是所匹配的 E 元素的子元素
E+F相邻兄弟选择器选择匹配的 F 元素，且匹配的 F 元素紧位于匹配的 E 元素后面
E~F通用选择器选择匹配的 F 元素，且位于匹配的 E 元素后的所有匹配的 F 元素
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>使用 CSS 层次选择器</title>
  <style type="text/css">
    .demo { width: 300px; margin: 0 auto; color: #fff }


    .demo div { margin: 5px; padding: 5px; border: 1px solid #000; } /* 后代选择器 */
    .demo div div { background: pink; } /* 后代选择器 */
    .demo>div { background: green; } /* 子代选择器 */
    .active+div { color: lime; } /* 兄弟选择器 */
    .active~div { text-align: center; } /* 通用选择器 */
    .active+div~div { color: blue; } /* 兄弟选择器 + 通用选择器 */
  </style>
</head>
<body>
  <div class="demo">
    <div class="active">1</div>
    <div>2</div>
    <div>3</div>
    <div>
      4
      <div>5</div>
      <div>6</div>
    </div>
    <div>
      7
      <div>
        8
        <div>
          9
          <div>10</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

效果图

1627530912(1).jpg

注意：

  • 后代选择器两个选择符之间必须以空格隔开，中间不能有任何其他符号插入
  • 通用选择器选中的是与E元素相邻的后面兄弟元素F，其选中的是一个或多个元素，而相邻兄弟选择器选中的仅是与E 元素相邻并且紧挨的兄弟元素F，选中的仅是一个元素

3-3 动态伪类选择器

动态伪类并不存在于HTML中，当用户和网站交互的时候才能体现出来

选择器类型功能描述
E:link链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过
E:visited链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过
E:active用户行为伪类选择器选择匹配的E元素，且匹配元素被激活。常用于锚点与按钮上。
E:hover用户行为伪类选择器选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus用户行为伪类选择器选择匹配的E元素，且匹配的元素获得焦点
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>使用 CSS 动态伪类选择器梅美化按钮</title>
  <style type="text/css">
    .download { text-align: center; }
    .btn { 
      background-color: #0074cc;
      *background-color: #0055cc;
      /* 渐变 */
      background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
      background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
      background-image: -o-linear-gradient(top, #0088cc, #0055cc);
      background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
      background-image: linear-gradient(top, #0088cc, #0055cc);
      background-repeat: repeat-x;
      display: inline-block;
      /* 兼容 */
      *display: inline;
      border: 1px solid #ccc;
      *border: 0;
      border-color: #ccc;
      /* CSS3 的色彩模块 */
      border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.1);
      border-radius: 6px;
      color: #fff;
      cursor: pointer;
      font-size: 20px;
      font-weight: normal;
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
      filter: progid:dximagetransform.microsoft.gradient(enabled=false);
      line-height: normal;
      padding: 14px 24px;
      text-align: center;
      /* CSS3 文字阴影特性 */
      text-shadow: 0 -1px 0 rgba(0,0,0,.25);
      text-decoration: none;
      vertical-align: middle;
      *zoom: 1;
    }
    /* 悬浮状态下按钮效果 */
    .btn:hover {
      background-position: 0 -15px;
      background-color: #0055cc;
      *background-color: #004ab3;
      color: #fff;
      text-decoration: none;
      text-shadow: 0 -1px 0 rgba(0,0,0,.25);
      /* CSS3 动画效果  */
      -webkit-transition: background-position .1s linear;
      -moz-transition: background-position .1s linear;
      -ms-transition: background-position .1s linear;
      -o-transition: background-position .1s linear;
      transition: background-position .1s linear;
    }
    /* 点击按钮效果 */
    .btn:active {
      background-color: #0055cc;
      *background-color: #004ab3;
      background-color: #004099 \9;
      background-image: none;
      outline: 0;
      /* CSS3 盒子阴影特性 */
      box-shadow: inset 0 2px 4px rgba(0,0,0,.15),
                        0 1px 2px rgba(0,0,0,.05);
      color: rgba(255, 255, 255, .75);
    }
    /* 获得焦点按钮效果 */
    .btn:focus {
      outline: thin dotted #333;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
  </style>
</head>
<body>
  <div class="download">
    <a href="#" class="btn">戳我</a>
  </div>
</body>
</html>

效果图

1627540779(1).jpg

注意：锚点伪类的设置必须遵守一个“爱恨原则”。

3-4 目标伪类选择器

目标伪类选择器“:target”是众多实用的CSS3特性中的一个，用来匹配文档（页面）的URI中某个标志符的目标元素 点击了解URI

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>使用 CSS 目标伪类选择器实现垂直手风琴</title>
  <style type="text/css">
    .menu {
      background: #fff;
      color: #424242;
      font: 12px Arial, Verdana, sans-serif;
      margin: 0 auto;
      padding: 10px;
      width: 500px;
    }


    .menu h2 {
      position: relative;
      margin: 5px 0;
      padding: 0;
    }


    /* 制作向下三角效果 */
    .menu h2:before {
      position: absolute;
      right: 10px;top: 15px;
      border: 5px solid #fff;
      border-color: #fff transparent transparent;
      content: '';
      height: 0;
      width: 0;
    }


    /* 制作手风琴标题栏效果 */
    .menu h2 a {
      display: block;
      background: #8f8f8f;
      background: -moz-linear-gradient(top, #cecece, #8f8f8f);
      background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
      background: -webkit-linear-gradient(top, #cecece, #8f8f8f);
      background: -o-linear-gradient(top, #cecece, #8f8f8f);
      background: linear-gradient(top, #cecece, #8f8f8f);
      border-radius: 5px;
      color: #424242;
      font-size: 12px;
      font-weight: normal;
      margin: 0;
      padding: 10px;
      text-shadow: 2px 2px 2px #aeaeaa;
      text-decoration: none;
    }
    /* 目标标题效果 */
    .menu :target h2 a,
    .menu :target h2 a:focus,
    .menu :target h2 a:hover,
    .menu :target h2 a:active {
      background: #2288dd;
      background: -moz-linear-gradient(top, #6bb2ff, #aa88dd);
      background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#aa88dd));
      background: -webkit-linear-gradient(top, #6bb2ff, #aa88dd);
      background: -o-linear-gradient(top, #6bb2ff, #aa88dd);
      background: linear-gradient(top, #6bb2ff, #aa88dd);
      color: #fff;
    }
    /* 标题栏对应的内容 */
    .menu p {
      margin: 0;
      height: 0;
      overflow: hidden;
      padding: 0 10px;
      -moz-transition: height .5s ease-in;
      -webkit-transition: height .5s ease-in;
      -o-transition: height .5s ease-in;
      transition: height .5s ease-in;
    }
    .menu :target p {
      height: 100px;
      overflow: auto;
    }


    .menu :target h2:before {
      border-color: transparent transparent transparent #fff;
    }
  </style>
</head>
<body>
  <div class="menu">
    <div class="menuSection" id="brand">
      <h2><a href="#brand">Brand</a></h2>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class="menuSection" id="promotion">
      <h2><a href="#promotion">Promotion</a></h2>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class="menuSection" id="event">
      <h2><a href="#event">Event</a></h2>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
</body>
</ht

效果图：

1627542663(1).jpg

注意：目标伪类选择器是动态选择器，只有存在URL指向匹配元素时。样式效果才会生效。

3-5 语言伪类选择器

语言伪类选择器（E:lang）根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者以文档管理，不能从CSS指定。E:lang(language)表示选择匹配E的所有元素，且匹配元素指定lang属性，且其值为language

HTML5设置文档语言的方法

// 方法一
<!DOCTYPE html>
<html lang="en-US">


// 方法二
<body lang="fr">

示例：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>使用 CSS 语言伪类选择器</title>
  <style type="text/css">
    :lang(en) {
      quotes: '"' '"';
    }
    :lang(en) q { background: red; }
  </style>
</head>
<body>
  <p>
    WWF's goal is to:
    <q cite="http://www.wwf.org">
    build a future where people live in harmony with nature</q>
    we hope they succeed
  </p>
</body>
</html>

效果图：

1627543696(1).jpg

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>使用 CSS 语言伪类选择器</title>
  <style type="text/css">
    :lang(fr) {
      quotes: '《' '》';
    }
    :lang(fr) q { background: green; }
  </style>
</head>
<body>
  <p>
    WWF's goal is to:
    <q cite="http://www.wwf.org">
    build a future where people live in harmony with nature</q>
    we hope they succeed
  </p>
</body>
</html>

效果图：

1627543723(1).jpg

3-6 UI元素状态伪类选择器

UI元素状态伪类选择器是CSS3选择器模块租中的一部分，主要用于form表单元素上，已提高网页的人机交互、操作逻辑以及页面的整体美观。一般包括：启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。

选择器类型功能描述
E:checked选中状态伪类选择器匹配选中的复选按钮或单选按钮表单元素
E:enabled启用状态伪类选择器匹配所有启用的表单元素
E:disabled不可用状态伪类选择器匹配所有禁用的表单元素

3-7 结构伪类选择器

根据元素在文档树中的某些特性（如相对位置）定位到它们。也就是说，通过文档树结构的相互关系来匹配特定的元素，从而减少HTMK文档对ID和类名的定义

选择器功能描述
E:first-child父元素E的第一个子元素
E:last-child父元素E的最后一个子元素
E:root元素E所在文档的根元素（一般都是html）
E F:nth-child(n)父元素E 的第 n 个 F 元素，可以是 2n，2n + 1等
E F:nth-last-child(n)倒数
E:nth-of-type(n)选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)倒数
E:first-of-type选择父元素内具有指定类型的第一个E元素
E:last-of-type选择父元素内具有指定类型的最后一个E元素
E:only-child选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type选择父元素只包含一个同类型的子元素，且该子元素匹配E元素
E:empty选择没有子元素的元素，且该元素也不包含任何文本节点
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML DOM 树形结构</title>
</head>
<body>
  <div>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
    <div>abc</div>
    <p>para</p>
    <div>def</div>
    <p>para</p>
    <b>ghi</b>
  </div>
</body>
</html>

HTML DOM 树型结构图

1627545686(1).jpg

CSS3结构伪类选择器

1627545663(1).jpg

注意：

  • “:nth-child(n)”中参数只能是n，不可以使用其他的字母代替，可以使用数字

3-8 否定伪类选择器

否认选择器“:not()”是CSS3的选择器，主要用来定位不匹配该选择器的元素

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>CSS :not 选择器</title>
  <style>
    ul, li, img {
      margin: 0;
      padding: 0;
    }
    ul {
      width: 690px;
      margin: 20px auto;
      letter-spacing: -4px;
      word-spacing: -4px;
      font-size: 0;
    }
    li {
      font-size: 16px;
      letter-spacing: normal;
      word-spacing: normal;
      display: inline-block;
      *display: inline;
      zoom: 1;
      list-style: none outside none;
      margin: 5px;
    }
    .gallery li:nth-child(2) {
      -webkit-filter: grayscale(1);
    }
    .gallery li:nth-child(3) {
      -webkit-filter: sepia(1);
    }
    .gallery li:nth-child(4) {
      -webkit-filter: saturate(.5);
    }
    .gallery li:nth-child(5) {
      -webkit-filter: hue-rotate(90deg);
    }
    .gallery li:nth-child(6) {
      -webkit-filter: invert(1);
    }
    .gallery li:nth-child(7) {
      -webkit-filter: opacity(.2);
    }
    .gallery li:nth-child(8) {
      -webkit-filter: blur(3px);
    }
    .gallery li:nth-child(9) {
      -webkit-filter: drop-shadow(5px 5px 5px #ccc);
    }
    .gallery li:nth-child(10) {
      -webkit-filter: saturate(6) hue-rotate(361deg) brightness(.9);
    }
    .gallery:hover li:not(:hover) {
      -webkit-filter: blur(2px) grayscale(1);
      opacity: 7;
    }
  </style>
</head>
<body>
  <ul class="gallery">
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>
  </ul>
</body>
</html>

效果图：

1627546686(1).jpg

选中其中一个时：

1627546723(1).jpg

3-9 伪元素

3-9-1 ::first-letter

匹配文本块的第一个字母

3-9-2 ::first-line

匹配文本块的第一行文字

3-9-3 ::before和::after

可以额外插入内容

3-10 属性选择器

通过各种各样的属性为元素增加更多的附加信息

选择器功能描述
E[attr]选择匹配具有attr属性的E元素，E可以省略
E[attr=val]选择匹配具有attr属性并且属性值等于val的E元素，E可以省略
E[attr=val]选择匹配具有attr属性并且属性值以val开头或以val-开头的E元素，E可以省略
E[attr~=val]选择匹配具有attr属性并且属性值(可以有多个，以空格隔开)其中一个值等于val的E元素，E可以省略
E[attr*=val]选择匹配具有attr属性并且属性值包含val的E元素，E可以省略
E[attr^=val]选择匹配具有attr属性并且属性值以val开头的E元素，E可以省略
E[attr$=val]选择匹配具有attr属性并且属性值以val结尾的E元素，E可以省略
avatar
文章
阅读
粉丝