CSS-选择器篇

最新推荐文章于 2023-10-16 17:03:56 发布

VIP文章 muzili_henji

最新推荐文章于 2023-10-16 17:03:56 发布

阅读量260

点赞数 1

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/muzili_henji/article/details/119215466

版权

一、什么是CSS选择器

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

二、CSS选择器的优势

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

三、CSS选择器的分类

基本选择器
层次选择器
伪类选择器
1. 动态伪类选择器
2. 目标伪类选择器
3. 语言伪类选择器
4. UI元素状态伪类选择器
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>

效果图：

注意：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>

最低0.47元/天解锁文章

muzili_henji

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-选择器篇

一、什么是CSS选择器要使某个样式应用于特定的HTML元素，首先要找到该元素，而选择器为获取目标元素之后施加样式提供了极大的灵活性二、CSS选择器的优势减少开发中对HTML类名和ID名的依赖，已经对HTML元素结构的依赖，使编写代码更加简单轻松三、CSS选择器的分类基本选择器层次选择器伪类选择器动态伪类选择器目标伪类选择器语言伪类选择器 UI元素状态伪类选择器结构伪类选择器否定伪类选择器伪元素属性选择器3-1 基本选择器.
复制链接

扫一扫