CSS样式之选择器

、CSS概述

CSS是Cascading Style Sheets的简称，中文称为层叠样式表，对html标签的渲染和布局

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

二、CSS的四种引入方式

1.行内式

行内式是在标记的style属性中设定CSS样式这种方式没有体现出CSS的优势，不推荐使用。

2.内嵌式

 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签中。

3.链接式

建一个index.css的文件存放样式，在主页面中把index.css引入。

![](https://images2017.cnblogs.com/blog/1184802/201709/1184802-20170919160320009-479572808.png)

4.导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>

标记也是写在<head>标记中。使用格式 @import "index.css"

注意：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会像导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。所以还是推荐用链接式。。。。。。。。。。。

三、注意嵌套规则

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列。

五、CSS选择器

1.基础选择器

“选择器”指明了{}中的“样式”的作用对象，也就是"样式"作用与网页中的哪些元素

1.通用元素选择器 *: 所有的标签都变色

　　2.标签选择器：匹配所有使用p标签的样式 p{color:red}

　　3.id选择器：匹配指定的标签 #p2{color:red}

　　4.class类选择器：谁指定class谁的变色，可选多个 .c1{color:red} 或者 div.c1{color:red}

#注意

可以对块级标签设置长宽

不可以对内联标签设长宽（它只会根据他的文字大小来变）

2.组合选择器

1.后代选择器 (不分层级，只让p标签变色) .c2 p{color:red}

2.子代选择器（只在儿子层找） .c2>p{color:red}

3.多元素选择器：同时匹配所有指定的元素 .div,p{color:red} 　　　　　　　　　　　　　　　　　　　　　　或者

　　　　　　　　　　　　　　　　　　　　　　　　.c2 .c3,.c2~.c3{

　　　　　　　　　　　　　　　　　　　　　　　　　　　color: red;

　　　　　　　　　　　　　　　　　　　　　　　　　　 background-color: green;

　　　　　　　　　　　　　　　　　　　　　　　　　　　font-size: 15px;

　　　　　　　　　　　　　　　　}

3.属性选择器

1. E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。）比如“[cheacked]”。以下同。） p[title] { color:#f00; }

2.E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

3.E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }

4.E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}

5.E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}

6.E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}

4.伪类

anchor伪类：专用于控制链接的显示效果

before after伪类

:before p:before 在每个<p>元素之前插入内容

:after p:after 在每个<p>元素之后插入内容

例：p:before{content:"hello";color:red;display: block;}

5.CSS优先级和继承

css的继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。　

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

css的优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；

2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100

3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

Web前端开发中，树形级联菜单，是一种常见且实用的界面交互组件。它不仅可以提供清晰的导航和大量信息分类展示，还能让用户更方便地进行操作和查询。然而，除了其直观的功能外，树形级联菜单，还可以被用于学习和应用CSS选择器以及CSS技巧。本文将通过代码和实例，分步骤地讲解如何通过树形级联菜单，来理解和运用CSS选择器与CSS技巧。

基本示例

接下来，我们通过上一篇文章的例子，来了解本文的信息点。

HTML

<ul id="tree-menu">
    <li><label>Device 1</label>
        <ul>
            <li><label>Subdevice 1-1</label></li>
            <li><label>Subdevice 1-2</label>
                <ul>
                    <li><label>Subdevice 1-2-1</label></li>
                    <li><label>Subdevice 1-2-2</label></li>
                    <li><label>Subdevice 1-2-3</label></li>
                    <li><label>Subdevice 1-2-4</label></li>
                    <li><label>Subdevice 1-2-5</label></li>
                    <li><label>Subdevice 1-2-6</label></li>
                    <li><label>Subdevice 1-2-7</label></li>
                    <li><label>Subdevice 1-2-8</label></li>
                    <li><label>Subdevice 1-2-9</label></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><label>Device 2</label></li>
</ul>

基础样式

CSS

<style type="text/css">
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 默认隐藏子项 */
#tree-menu ul {
    display: none;
}
/* 点击节点展开子项 */
#tree-menu li.collapsed>ul {
    display: block;
}
</style>

层级样式

CSS

<style type="text/css">
#tree-menu li ul {
    padding: 0.5rem 1rem;
} 
</style>

边框及选中样式

CSS

<style type="text/css">
#tree-menu li ul {
    padding: 0.5rem 1rem;
}

#tree-menu li {
    border: 1px solid #ddd;
}

// 第一个子节点之后所有兄弟节点
#tree-menu li+li {
    border-top: 0;
}

#tree-menu label {
    display: block;
    padding: 0.5rem 1rem;
}

#tree-menu label:hover {
    background-color: aliceblue;
}
</style>

圆角样式1

CSS

<style type="text/css">
#tree-menu li ul {
    padding: 0.5rem 1rem;
} 
#tree-menu li {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom:0.5rem;
}
/* #tree-menu li+li {
    border-top: 0;
}  */
#tree-menu label {
    display: block;
    padding: 0.5rem 1rem;
}

#tree-menu label:hover {
    background-color: aliceblue;
    border-radius: 10px;
}
</style>

圆角样式2

li label{ }
这个示例表示：li元素下面所有层级的label
li>label{ }
这个示例表示：li元素孩子级层级的label

CSS

#tree-menu li ul {
    padding: 0.5rem 1rem;
} 
#tree-menu li {
    border: 1px solid #ddd;
    /* border-radius: 10px;
    margin-bottom:0.5rem; */
}
/* 第一个子节点之后的所有兄弟节点 */
#tree-menu li+li {
    border-top: 0;
}
/* 第一个子节点 设置顶部圆角 */
#tree-menu li:first-child,
#tree-menu li:first-child>label {
    border-radius: 10px 10px 0 0;
}

/* 最后一个子节点 设置底部圆角  */
#tree-menu li:last-child,
#tree-menu li:last-child>label {
    border-radius: 0 0 10px 10px ;
}

/* 只有唯一 一个子节点时，顶部底部都设置圆角 */
#tree-menu li:only-child,
#tree-menu li:only-child>label {
    border-radius: 10px ;
}

/* 
    展开时背景圆角修复 
    :first-child 第一个子节点

    :not(:only-child)非唯一子节点
    这里表示这个子节点有子项

*/
#tree-menu li.collapsed:first-child:not(:only-child)>label {
    border-radius: 10px 10px 0 0;
}
#tree-menu li.collapsed:not(:only-child)>label {
    border-radius: 0;
}

#tree-menu label {
    display: block;
    padding: 0.5rem 1rem;
}
/* 
 :hover 鼠标在元素上面时
*/
#tree-menu label:hover {
    background-color: aliceblue;
    /* border-radius: 10px; */
}

节点标记样式

CSS

#tree-menu li label {
    position: relative;
    padding: 0.5rem 1rem 0.5rem 1.5rem;
}

/**
  如果有子项，添加展开或折叠的标记符号。
  默认折叠标记 
*/
#tree-menu li label::before {
    position: absolute;
    content: '-';
    left: 0;
    width: 1.6rem;
    height: 1.2rem;
    text-align: center;
    line-height: 1.2rem;
    color: #333;
}

/** 
  :only-child表示没有兄弟元素 
  不显示标记
*/
#tree-menu li label:only-child::before {
    content: ' ';
}

/* 显示展开标记 */
#tree-menu li.collapsed>label::before {
    content: '+';
}

到此，一个还比较美观的树形菜单，基本完成了。

但是，有朋友说，我要实现以下需求呢？

1、不要边框；
2、保留缩进；
3、保留展开折叠标记；
4、横向拉通选择；

横向拉通选择样式

CSS

#tree-menu label {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
}

#tree-menu label:hover {
    background-color: aliceblue;
}

/** 缩进拉通选择*/
#tree-menu li label {
    padding-left: 0;
}
#tree-menu li li label {
    padding-left: 0.5rem;
}
#tree-menu li li li label {
    padding-left: 1rem;
}
#tree-menu li li li li label {
    padding-left: 1.5rem;
}
#tree-menu li li li li li label {
    padding-left: 2rem;
}
#tree-menu li li li li li li label {
    padding-left: 2.5rem;
}


/**
  如果有子项，添加展开或折叠的标记符号。
  默认折叠标记 
*/
#tree-menu li label::before {
    float: left;
    content: '-';
    width: 1.6rem;
    height: 1.2rem;
    text-align: center;
    line-height: 1.2rem;
    color: #333;
}

/** 
  :only-child表示没有兄弟元素 
  不显示标记
*/
#tree-menu li label:only-child::before {
    content: ' ';
}

/* 显示展开标记 */
#tree-menu li.collapsed>label::before {
    content: '+';
}

如果层级很深，我不是得写很多个li才能实现多级缩进？

比如：tree-menu li li li li li li li li li li li label{}

JavaScript方式

查找所有 label 元素，然后看 label 元素上面有多少个 li 元素，以此判断所属层级。

CSS

<script>
  function parents(element, selector) {
  var parentsArray=[];
  var parent=element.parentNode;
  
  while (parent && parent !==document) {
    if (parent.matches(selector)) {
      parentsArray.push(parent);
    }
    parent=parent.parentNode;
  }
  return parentsArray;
}

  const items=document.querySelectorAll('#tree-menu label');
  items.forEach((item)=> {
    const level=parents(item.parentElement, 'li').length
    const padding=10  * level;
    item.style.paddingLeft=`${padding}px`;
  });
</script>

1、我不想写JavaScript；
2、我不想写多个li li li li li li li；
3、我不想写多个.level1{} .level2{} .level3{}；
4、我想写少量CSS代码，来解决这个问题，一劳永逸；
5、我想它支持无限层级的缩进；

有这样CSS代码吗？我怎么不知道？

你别说，还真有这样得CSS代码。

当然，这也是本文得重点，算一个CSS得小技巧吧。

counters() 简介

CSS 函数 counters() 是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。counters() 函数有两种形式： counters(name, string) 或 counters(name, string, style) 。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最外层到最内层，之间由指定字符串分隔。计数器以指示的样式呈现，如果未指定样式，则默认为十进制。

先看一个例子：

HTML

<ol>
  <li>
     <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>
  </li>
  <li></li>
  <li></li>
  <li>
     <ol>
        <li></li>
        <li>
           <ol>
              <li></li>
              <li></li>
              <li></li>
           </ol>
        </li>
      </ol>
  </li>
</ol>

CSS

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
   content:  counters(listCounter, '.', upper-roman) ') ';
}
li::before {
  content:  counters(listCounter, ".") "==" counters(listCounter, ".", lower-roman) ;
}

counters() 示例

通过上面的例子，我们看到了类似word的多级列表。此时很多朋友可能已经有思路了，那么我们将利用CSS这个特性，来实现上面的要求。

修改了部分样式

#tree-menu label {
    position: relative;
    display: block;
    /* padding: 0.5rem 1rem; */
    padding: 0.5rem 1rem 0.5rem 0;
}
/* #tree-menu li label::before {} */
#tree-menu li label::after {}
  
/* #tree-menu li label:only-child::before {} */
#tree-menu li label:only-child::after {}
  
/* #tree-menu li.collapsed>label::before {} */
#tree-menu li.collapsed>label::after {}

counters属性样式


/** 缩进拉通选择 修改前*/
/* #tree-menu li label {
    padding-left: 0;
}
#tree-menu li li label {
    padding-left: 0.5rem;
}
#tree-menu li li li label {
    padding-left: 1rem;
}
#tree-menu li li li li label {
    padding-left: 1.5rem;
}
#tree-menu li li li li li label {
    padding-left: 2rem;
}
#tree-menu li li li li li li label {
    padding-left: 2.5rem;
} */

/* 修改后 */
#tree-menu,
#tree-menu ul {
    counter-reset: listCounter;
}

#tree-menu label {
    counter-increment: listCounter;
}

#tree-menu label::before {
    float: left;
    /* 把标记设置成透明 */
    color:transparent;
    /* 默认数字*/
    content: counters(listCounter, "");
}

完整的CSS

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/** 
折叠状态与展开状态样的样式
 */
#tree-menu ul {
    display: none;
}

#tree-menu li.collapsed>ul {
    display: block;
}

#tree-menu label {
    position: relative;
    display: block;
    padding: 0.5rem 1rem 0.5rem 0;
}

#tree-menu label:hover {
    background-color: aliceblue;
}

/** 缩进拉通选择*/
/* 修改后 */
#tree-menu,
#tree-menu ul {
    counter-reset: listCounter;
}

#tree-menu label {
    counter-increment: listCounter;
}

#tree-menu label::before {
    float: left;
    /* 将序号设置为透明 */
    color:transparent;
    /***/
    content: counters(listCounter, "");
}



/**
  如果有子项，添加展开或折叠的标记符号。
  默认折叠标记 
*/
#tree-menu li label::after {
    float: left;
    content: '-';
    width: 1.6rem;
    height: 1.2rem;
    text-align: center;
    line-height: 1.2rem;
    color: #333;
}

/** 
  :only-child表示没有兄弟元素 
  不显示标记
*/
#tree-menu li label:only-child::after {
    content: ' ';
}

/* 显示展开标记 */
#tree-menu li.collapsed>label::after {
    content: '+';
}

通过树形级联菜单，学习CSS选择器与CSS技巧，是一种非常有效的学习方法。我们不仅可以学会如何使用各种选择器，来控制页面元素，还能掌握一些实用的CSS技巧和概念。希望本文对您了解树形级联菜单、CSS选择器和CSS技巧有所帮助，并能为您在Web前端开发中的工作提供一些启发。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，我们一起加油吧。

CSS 中，类选择器（class selectors）是一种强大的选择器类型，它们允许我们根据 HTML 元素的 class 属性来选择元素。在这篇文章中，我们将深入探讨 class selectors 的各种优势和巧妙使用方法。

优势：

元素多显示：通过使用类选择器，我们可以将同一属性的应用 Style 与某个类相对联系，从而使一个类下的多个元素拥有相同的样式，提高了编码的效率。
项目可维护性：类选择器可以实现在不同的上下文中通过修改类的定义，来动态更改样式。这些类可以被任何 HTML 元素重用，从而降低冗余代码和重复工作，提高了项目可维护性。
网站应用中的流程：在编写和维护一个 Web 项目的过程中，通过类选择器，你可以将样式与HTML的内容和结构解耦。这使得类可以在不同页面和模块之间轻松重用，这增加了网站的灵活性并减小了维护代码的困难。

巧妙用法：

引用和复杂选择器：类选择器可以与其他选择器一起使用，以创建复杂的选择器。例如，你可以将类选择器与 id 选择器和属性选择器一起使用，以选择具有特定类和特定属性的元素。
动态适应：通过为选择器添加 JavaScript 事件，我们可以动态地更改类的显示和应用，从而让网站具有更强的交互性和响应能力。
CSS Reset：通过使用一个通用的类选择器，我们可以将所有的 HTML 元素重置為默认样式，这有助于统一üngabe，并解决)浏览器差异问题。

在线咨询

上一篇：php采集网页数据（php采集系统）
下一篇：网站建设完成后维护的内容包括哪些？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS样式之选择器

#注意

这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

css的优先级

基本示例

基础样式

层级样式

边框及选中样式

圆角样式1

圆角样式2

节点标记样式

横向拉通选择样式

JavaScript方式

counters() 简介

counters() 示例

完整的CSS

您的项目需求