程序员经验分享-hwhale

【CSS】CSS 选择器

2023-11-07

CSS 选择器

1.基础选择器

1.1 元素选择器

语法：标签名{...}

元素选择器会选中对应标签名的HTML元素，例如：p{...}，div{...}，span{...}等

1.2 类选择器

语法：.类名{...}

类选择器会选中class属性为指定类名的HTML元素，例如：

<div class="div1">test</div>

.div1 {
	...;
}

需要注意的是，HTML元素的class属性值不能以数字开头，如果要以符号开头，只能为_或-。同时，一个元素的class属性中可以有多个属性值，意味着其可以被多个类选择器选中！

1.3 id选择器

语法：#id属性值{...}

id选择器会选中id属性为指定值的HTML元素，例如：

<div id="div1">test</div>

#div1 {
	...;
}

与类不同，HTML元素的id属性只能有一个！

1.4 通配符选择器

语法：*{...}

通配符选择器会选中页面中的所有HTML元素，并对所有元素都执行其中的样式，一般可以用来清除间距。

2.群组选择器

语法：

选择器1,选择器2,选择器3,...{
	...;
}

群组选择器会同时选中多个选择器对应的元素！例如：

<div>盒子1</div>
<p>段落1</p>
<p>段落2</p>
<h3>文本标题3</h3>
<h3 class="text3">文本标题3</h3>
<ol>
    <li>有序列表</li>
    <li class="li2">有序列表</li>
    <li>有序列表</li>
</ol>

<style>
    div,p,h3,.li2{
        font-size: 30px;
    }
    div,.li2,.text3{
        color: red;
    }
    p{
        color: blue;
    }
    h3{
        color: pink;
    }
</style>

最终的效果为：
在这里插入图片描述

群组选择器一般用于简化代码，可以将对多个元素的统一操作放在一个群组选择器中，

3.关系选择器

3.1 后代选择器

后代选择器也叫包含选择器，即祖先元素直接或间接地包含后代元素。

语法：

选择器1 选择器2 选择器3 ...{
	...;
}

下面看两个例子：

<div class="box">
    <p>0000</p>
    <div>
        <p>11111</p>
        <p>22222</p>
    </div>
    <div class="box2">
        <p>333</p>
    </div>
    <p>444</p>
</div>

<style>
    .box p{
        width: 200px;
        height: 200px;
        background-color: yellow;
    } 
</style>

效果如下：
在这里插入图片描述

可以看到，此时选中的是 box 类下的所有 p 元素！即使是 box 类的子类 box1 中的 p 元素也被选中了。

再来看第二个例子：

<div class="box">
    <p>0000</p>
    <div>
        <p>11111</p>
        <p>22222</p>
    </div>
    <div class="box2">
        <p>333</p>
    </div>
    <p>444</p>
</div>

<style>
    .box div p {
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
</style>

效果如下：

在这里插入图片描述

可以看到，此时选中的是 box 类下的所有 div 元素中的 所有 p 元素！

3.2 子代选择器

语法：

选择器1>选择器2{
    ...;
}

子代选择器与后代选择器的区别在于：子代选择器要求父元素直接而非间接地包含子元素！

看下面这个例子：

<div class="box">
    <p>0000</p>
    <div>
        <p>11111</p>
        <p>22222</p>
    </div>
    <div class="box2">
        <p>333</p>
    </div>
    <p>444</p>
</div>

<style>
    .box>p{
        width: 200px;
        height: 200px;
        background-color: yellow;
    } 
</style>

效果如下：

在这里插入图片描述

可以看到，此时只选中了 box 类下直接包含的所有 p 元素，而对于间接包含的，例如：box 类下的 div 中包含的所有 p 元素；box 类下的 box2 类中包含的所有 p 元素，则均未选中！

再来看下面这个例子：

<div class="box">
    <p>0000</p>
    <div>
        <p>11111</p>
        <p>22222</p>
    </div>
    <div class="box2">
        <p>333</p>
    </div>
    <p>444</p>
</div>

<style>
    .box>div>p{
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
</style>

效果如下：

在这里插入图片描述

可以看到此时选中的是 box 类下的所有 div 元素中包含的所有 p 元素。

3.3 相邻兄弟选择器

语法：

选择器1+选择器2{
    ...;
}

其效果不方便用文字描述，看下面这个例子：

<p>000</p>
<div class="box">盒子1</div>
<p>111</p>
<p>222</p>
<p>333</p>
<div>
    <p>44444</p>
</div>
<p>5555</p>

在以上的HTML代码中，除了内容为 “4444” 的 p 标签，其他所有元素均为兄弟元素。那么什么叫做相邻兄弟元素呢？实际上就是两个紧挨着的兄弟元素！

下面给以上HTML代码添加样式：

<style>
    .box+p{
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
</style>

效果如下：

在这里插入图片描述

可以看到，此时选中的是 box 类的相邻兄弟元素，即内容为 “111” 的 p 元素。

那么如果我们再加上一个+呢？

<style>
    .box+p+p{
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
</style>

会变成下面的样子：
在这里插入图片描述

即选中了 box 类的相邻兄弟元素的相邻兄弟元素，也就是内容为 “222” 的 p 元素！

如果进一步嵌套，则会继续向后选中。

实际上，此时的 CSS 选择器可以理解为：(.box+p)+p，即其实际上仍是两个选择器，只不过第一个选择器是一个嵌套罢了。这样的嵌套在实际使用中是十分常见的。

3.4 通用兄弟选择器

语法：

选择器1~选择器2{
	...;
}

同样是上面那个例子：

<p>000</p>
<div class="box">盒子1</div>
<p>111</p>
<p>222</p>
<p>333</p>
<div>
    <p>44444</p>
</div>
<p>5555</p>

为其添加以下样式：

<style>
    .box~p{
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
</style>

效果如下：
在这里插入图片描述

可以看到，此时选中的是所有 box 类后面所有的兄弟 p 元素！所以，通用兄弟选择器的效果是：选中选择器1对应元素后面的所有对应选择器2的兄弟元素。

另外，需要注意的是，相邻兄弟选择器和通用兄弟选择器是可以结合在一起使用的！比如对于上面的例子，我们想要单独修改内容为 “5555” 的 p 元素的样式，那么我们可以使用下面的 CSS 代码实现：

<style>
    .box~div+p{
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
</style>

效果如下：
在这里插入图片描述

4.属性选择器

属性选择器一共有以下7种写法：

  1. 选择器[属性名]
  2. 选择器[属性名 = 属性值]
  3. 选择器[属性名 ^= 属性值]
  4. 选择器[属性名 $= 属性值]
  5. 选择器[属性名 *= 属性值]
  6. 选择器[属性名 ~= 属性值]
  7. 选择器[属性名 |= 属性值]

下面用一个例子，来说明这7种写法各自的效果：

<div class="demo">
    <a href="http://www.baidu.com" target="_blank" class="li nks item first" id="first" title="link">1</a>
    <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
    <a href="sites/file/test.html" class="links item" title="link-1 aa" lang="zh-cn">3</a>
    <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
    <a href="sites/file/image.jpg" class="links item" title="link-23 aa">5</a>
    <a href="mailto:baidu@hotmail" class="links item" title="website link" lang="zh">6</a>
    <a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
    <a href="/abc.pdf" class="linksitem" title="close the website" lang="en-zh">8</a>
    <a href="abcdef.doc" class="links item" title="http://www.sina.com">9</a>
    <a href="abd.doc" class="linksitem last" id="last">10</a>
</div>

<style>
    .demo {
        width: 300px;
        border: 1px solid #ccc;
        padding: 10px;
        overflow: hidden;
        margin: 20px auto;
    }

    .demo a {
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        text-align: center;
        background: #aac;
        color: blue;
        font: bold 20px/50px Arial;
        margin-right: 5px;
        text-decoration: none;
        margin: 5px;
    }
</style>

以上是基本样式，效果如下：

在这里插入图片描述

下面按照每一种写法，向其中添加样式。

4.1 写法1：选择器[属性名]

添加如下样式：

a[title]{
	background: yellow;
}

效果如下：

在这里插入图片描述

即此时选中的是所有身上有title属性的 a 标签！

如果添加以下样式：

a[lang][target]{
	background: yellow;
}

效果如下：

在这里插入图片描述

此时选中的是所有身上同时拥有lang属性和target属性的 a 标签！

4.2 写法2：选择器[属性名 = 属性值] — 重点

向其中添加以下样式：

a[lang="zh"]{
    background: yellow;
}

效果如下：

在这里插入图片描述

此时选中的是身上lang属性值为 “zh” 的所有 a 标签！注意这里属性值必须为一模一样，多一个字符、一个空格都不会被选中。

当然，前面的选择器也不是只能指定标签，同样也可以指定类、id，甚至可以使用上面的群组选择器、关系选择器等。

例如向其中添加以下样式：

/* 选中类为item，身上的lang属性值为 "zh-cn" 的元素 */
.item[lang="zh-cn"]{
    background: yellow;
}
/* 选中id为last，身上配置了title属性，且身上的lang属性值为 "zh-cn" 的元素 */
#last[title][class="links"]{
    background: yellow;
}

效果如下：

在这里插入图片描述

此时，选择器.item[lang="zh-cn"]选中了3，而选择器#last[title][class="links"]未能选中，因为此时不存在class属性仅为 “links” 的元素！

4.3 写法3：选择器[属性名 ^= 属性值]

添加以下样式：

a[class^="li "]{ /* 注意这里有一个空格！ */
    background-color: yellow;
}

效果如下：

在这里插入图片描述

此时选中的是身上class属性的值以 "li " 开头的所有 a 标签，而其他class属性以 “li” 开头的 a 标签则未被选中，即这里^=运算符匹配时也会匹配空格！

但需要注意的是，在实际开发中，若元素的class属性值前面有空格，此时这个空格是可能会被自动去掉的！所以使用^=运算符匹配时尽量不要去匹配前面带空格的值，可能会导致无法选中。

例如：

<a class=" links item first">1</a>

<style>
    a[class^=" li"]{
        background-color: yellow;
    }
</style>

此时是无法选中 a 标签的！

4.4 写法4：选择器[属性名 $= 属性值]

添加以下样式：

a[href$=".pdf"]{
    background-color: yellow;
}
a[href$=".doc"]{
    background-color: red;
}
a[href$=".png"]{
    background-color: green;
}

效果如下：

在这里插入图片描述

此时首先选中了身上href属性以 “.pdf” 结尾的 a 标签，即7、8，将其背景色置为黄色；然后选中了身上href属性以 “.doc” 结尾的 a 标签，即9、10，将其背景色置为红色；最后选中了身上href属性以 “.png” 结尾的 a 标签，即4，将其背景色置为绿色。

即$=运算符的作用是匹配结尾的字符。

4.5 写法5：选择器[属性名 *= 属性值]

添加以下样式：

a[href*="b"]{
    background-color: green;
}

效果如下：

在这里插入图片描述

此时选中的是身上href属性值中包含 “b” 的 a 标签！即，*=运算符的作用是与整个字符串进行匹配，只要包含目标字符，则为true。

4.6 写法6：选择器[属性名 ~= 属性值]

添加以下样式：

a[class~="item"]{
    background-color: green;
}

效果如下：

在这里插入图片描述

此时选中的是身上class属性值中包含单独且完整的 “item” 的所有 a 标签。

什么叫单独且完整？当一个元素属于多个类时，其身上的class属性是这样的：

<a class="class1 class2 class3">2</a>

此时其身上单独且完整的类就有class1、class2、class3。此时 CSS 选择器a[class~="class1"]就可以选中该元素，而当一个元素身上的class属性为下面这样时：

<a class="clas s1class2 class3">2</a>

此时其身上单独且完整的类为clas、s1class2、class3。此时 CSS 选择器a[class~="class1"]就无法选中该元素！

对应上面的例子，元素8、10身上的class属性值均为 “linksitem”，这是一个单独的类，所以无法选中这两个元素。

真正来说，出现这种情况是因为，此时的~=运算符不再是像前面几种写法中的运算符一样是字符串匹配了，而是与元素身上的某个属性的多个值进行匹配！

4.7 写法7：选择器[属性名 |= 属性值]

添加以下样式：

a[title|="link"]{
    background-color: green;
}

效果如下：

在这里插入图片描述

此时选中的是身上title属性值中只有1个是 “link” 的或者属性值有多个但是得是 “link-” 开头的所有 a 标签。

具体来说|=运算符的匹配：

  • 当元素该属性值只有一个时，其值必须是指定的值
  • 当元素该属性的值有多个时，该属性值开头必须为 “指定值-” 的形式。(注意此时为字符串匹配！)

5.伪类选择器

5.1 常用的伪类选择器1
  1. :first-child第一个子元素
  2. :last-child最后一个子元素
  3. :nth-child()选中括号中指定的元素，这里的括号内可以填入以下内容
    • n — 第n个元素，n的范围是从0到正无穷，正无穷代表全选。
    • even或2n — 选中偶数位的元素
    • odd或2n+1 — 选中奇数位的元素

注意：以 child 结尾的是在所有元素中选择！

用一个例子来理解：

<ul class="box">
    <p>1111</p>
    <p>222</p>
    <li>无序列表的li1</li>
    <p>33333</p>
    <li>无序列表的li2</li>
    <li>无序列表的li3</li>
    <p>44444</p>
    <li>无序列表的li4</li>
    <p>555</p>
    <li>无序列表的li5</li>
    <p>666</p>
</ul>

先来试试:first-child，下面为其添加样式：

.box   :first-child{
    border: 2px solid blue;
}

效果如下：

在这里插入图片描述

此时选中的为 box 类下的第一个子元素，即内容为 “1111” 的 p 元素。

如果添加下面的样式：

.box   li:first-child{
    border: 2px solid blue;
}

此时不会选中任何元素，因为此时效果是 box 类下的第一个子元素为 li 标签时，其中的样式才会生效。

如果将 li 换成 p：

.box   p:first-child{
    border: 2px solid blue;
}

效果如下：

在这里插入图片描述

此时则可以选中元素。

接下来是:last-child，其使用方法与:first-child是完全相同的，只不过其判断的是最后一个子元素。

/* 根据上面的结果，可以知道，此时的效果是当最后一个子元素为p元素时，将样式作用到其身上 */
.box   p:last-child{
    border: 2px solid blue;
}

效果如下：

在这里插入图片描述

然后是:nth-child()。其同样有和上面一样的使用方法：

/* 选中box类下的第三个子元素 */
.box  :nth-child(3){
    border: 2px solid blue;
}

/* 当box类下的第七个子元素为p元素时，将样式应用到其身上 */
.box  p:nth-child(7){
    border: 2px solid red;
}

效果如下：
在这里插入图片描述

但:nth-child()的括号中不仅仅能填入数字，还有一些特殊用法，在使用之前，首先要知道，下面的所有 n 指代的是一个从0开始的数列！

/*
	n 为从0开始的数列，所以 n+3 指代的是第3、4、5、6、7...个子元素
*/
.box  :nth-child(n+3){
    border: 2px solid blue;
}

效果如下：
在这里插入图片描述

可以看到从第三个子元素开始往后的所有元素均被选中！

同样其也可以判断元素的标签类型：

/* 即box下的第3、4、5、6...个子元素为li时，将样式应用到它们身上 */
.box  li:nth-child(n+3){
    border: 2px solid blue;
}

效果如下：
在这里插入图片描述

甚至，n 的前面还可以加上负号：

/* 
	n=0 -n=0 -n+3=3
	n=1 -n=-1 -n+3=2
	n=2 -n=-2 -n+3=1
	n=3 -n=-3 -n+3=0
	...
	所以此时选中的是box下的第3、2、1个子元素
*/
.box  :nth-child(-n+3){
    border: 2px solid blue;
}

效果如下：
在这里插入图片描述

还可以指定偶数和奇数：

/* 此时选中的是box里面的第2,4,6,8,10,12....个为li标签的元素，将样式应用到它们身上 */
.box li:nth-child(2n){
    border: 2px solid blue;
}

/* 当然选中第偶数个元素也可以直接用 even，其和2n是一样的 */
.box li:nth-child(even){
    border: 2px solid blue;
}

效果如下：

在这里插入图片描述

指定奇数：

/* 此时选中的是box下的所有奇数子元素 */
.box :nth-child(2n+1){
      border: 2px solid blue;
}
/* 奇数也可以用 odd 来指定 */
.box :nth-child(odd){
    border: 2px solid blue;
}

效果如下：
在这里插入图片描述

当然，并不是只能按上述几种固定的方式使用，我们可以自己定义，同时还可以搭配前面的:first-child、:last-child一起使用！

/* 此时选中的是第5、7、9...个子元素 */
.box :nth-child(2n+5){
    border: 2px solid blue;
}
/* 此时选中的是从后数，第2、4、6、8...个子元素 */
.box :nth-last-child(2n){
    border: 2px solid blue;
}
5.2 常用的伪类选择器2
  1. :first-of-type第一个子元素
  2. :last-of-type最后一个子元素
  3. :nth-of-type()选中括号中指定的元素，这里的括号内可以填入以下内容
    • n — 第n个元素，n的范围是从0到正无穷，正无穷代表全选。
    • even或2n — 选中偶数位的元素
    • odd或2n+1 — 选中奇数位的元素

注意：以 type 结尾的是在相同元素中选择！

其具体的使用与前一节中一样，这里仅给出几个例子，用于理解其与 -child 结尾的伪类选择器的区别。

.box  :first-of-type{
    border: 2px solid blue;
}

效果如下：
在这里插入图片描述

可以看到，box 类下的第一个 p 元素和第一个 li 元素均被选中！

为什么？从结构上看，box 类的下面有两个类型：p 标签和 ul 标签，所以是选中这两类中的第一个元素。

这里就体现了与 -child 的选择器的区别：-child 选择器是看父元素下的所有子元素，而 -type 选择器则是看父元素下的同类型的子元素。打个比方，-child 选择器是从一个班级内的所有学生中进行筛选，而 -type 选择器则是从班级内的所有女生、所有男生中进行筛选。

那么既然是同类型，自然能够指定类型：

/* box下的所有p元素中的最后一个 */
.box  p:last-of-type{
    border: 2px solid blue;
}
/* box下的所有li元素中的第偶数个 */
.box li:nth-of-type(2n){
    border: 2px solid red;
}

效果如下：
在这里插入图片描述

5.3 否定伪类

:not() — 将符合条件的元素排除

例：

<div class="test">
    <p>1111</p>
    <p>2222</p>
    <p>3333</p>
    <p>4444</p>
</div>

添加如下样式：

.test {
    margin: 10px 10px 10px 10px;

    :not(:first-of-type):not(:last-child){
        color: red;
    }
}

效果如下：
在这里插入图片描述

所以，这个选择器的效果就是，排除相同类型中的第一个，然后再排除 test 下的最后一个子元素！

5.4 元素的伪类
  • :link — 表示未访问过的a标签
  • :visited — 表示访问过的a标签

以上两个伪类是超链接所独有的！另外，由于隐私的问题，所以:visited这个伪类只能修改链接的颜色。

以下两个伪类是所有标签都可以使用：

  • :hover — 鼠标移入后，元素的状态
  • :active — 鼠标点击后，元素的状态

6.伪元素选择器

与伪类一样，伪元素也是不存在的元素，其代表了元素的特殊状态。

常见的几个伪元素：

  • ::first-letter — 表示第一个字母
  • ::first-line — 表示第一行
  • ::selection — 表示选中的元素
  • ::before — 元素开始的位置前
  • ::after — 元素结束的位置后

befor和after必须配合content一起使用(before,after所写的内容无法选中且永远在最前和最后)。

下面给出几个例子帮助理解。

对于下面的HTML结构：

<div class="test">
    <p>hello hello hello hello</p>
    <p>world，我们要相信明天会更好。</p>
</div>

添加如下样式：

/* 让文字的首字母一直为字体为24px */
p::first-letter {
    font-size: 24px;
}
/* 让文字的第一行添加背景色灰色 */
p::first-line {
    background-color: #ccc;
}

效果如下：
在这里插入图片描述

添加如下样式：

 /* 让选中的内容，字体为绿色(此时鼠标选中 "我们")*/
::selection{
    color: red;
}
/* 在元素开始的位置前+'你好' */
p::before{
    content: '你好';
    color:red
}

效果如下：
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

前端

【CSS】CSS 选择器 的相关文章

随机推荐

  • CSRF 漏洞原理详解及防御方法

    跨站请求伪造 攻击者可以劫持其他用户进行的一些请求 利用用户身份进行恶意操作 例如 请求http x com del php id 1 是一个删除ID为1的账号 但是只有管理员才可以操作 如果攻击者把这个页面嵌套到其他网站中 img src

  • 各种操作系统支持的磁盘格式对比

    各种操作系统支持的磁盘格式对比 操作系统 支持的磁盘格式 Windows FAT32 exFAT NTFS macOS HFS APFS Linux EXT2 EXT3 EXT4 XFS Btrfs BSD UFS Solaris ZFS

  • MacOS搭建Flutter 环境

    流程 第一步 官网下载对应版本的flutter SDK MacOS有两个版本 x64和 arm64 查看命令 uname a 官网链接 Flutter SDK archive Flutter 下载成功后会自动解压 把Flutter文件放到自

  • 【4】Docker容器相关命令

    1 查看 容器 1 查看正在运行的容器 docker ps 2 查看所有容器 包括 运行中的容器 和 没有运行的容器 docker ps a a 是 all 缩写 3 查看最后一次运行的容器 docker ps l l 是 last 的缩写

  • easyexcel功能扩展：读取excel日期格式（包括日期格式和文本格式）

    实体类属性 ExcelProperty value 时间 index 11 private String time 调用DateUtil DateUtil setParams yyyy MM dd yyyy MM dd DateUtil f

  • 两台计算机如何组成局域网,教你两台电脑如何建立局域网,win10系统为例

    虽然我们可以通过第三方的工具来传输文件 但是如果我们的电脑无法上网怎么办 想要两台电脑建立局域网发送大文件怎么操作呢 今天就这个两台电脑建立局域网的方法给大家讲解一下 希望可以帮助到有需要的朋友们 两台电脑建立局域网步骤 1 点击网络图标

  • 2.1 zio入门——把函数作用作为工作蓝图

    ZIO标准库的核心数据类型是ZIO R E A 这种类型的值被称为函数式作用 函数式作用是并发工作流的一种蓝图 如图1所示 该蓝图本质上是纯描述性的 必须执行才能观察到任何副作用 例如与数据库的交互 日志记录 流传输 网络中的数据 或接受请

  • js MediaSource h264

    https stackoverflow com questions 24102075 mediasource error this sourcebuffer has been removed from the parent media so

  • Topaz DeNoise AI for Mac(AI智能图像降噪工具)

    Topaz DeNoise AI for Mac是最好用的AI智能图像降噪工具 DeNoise AI通过消除噪点的同时恢复原始图像细节 帮助您获得100 的最佳质量 Topaz DeNoise AI for Mac AI智能图像降噪工具

  • Python xml 读取之 ET.parse

    Python xml 读取之 ET parse 前一篇写到了xml 读取方法 一 dom minidom 本次再介绍一种方法 ET parse 常用操作 tree ET parse xml path root tree getroot 获取

  • 刷脸支付赋予日常场景更多的功能和应用

    刷脸支付推出将近一年 已广泛应用于餐饮零售等商业场景 据预测 2019年POS机总保有量约为5000万台 这也意味着刷脸支付至少有500亿的市场空间 不少连锁餐饮品牌相继引入刷脸支付收银机 除了可以提升收银效率 还可以通过打通线上线下 平台

  • 【数据集】目标检测常用数据集

    一个性能优良 极度完美的数据集 具有较小偏差的大数据集 对于计算机视觉领域算法的研究是很重要的 具体非常重要的作用 在目标检测中 知名的数据集一个接着一个的被发布 被公开 被广大研究者使用 本文是总结目标检测领域的权威数据集 既总结也供有需

  • location protocol 属性（http、https）

    location protocol 属性 protocol 属性是一个可读可写的字符串 可设置或返回当前 URL 的协议 语法 location protocol location protocol http 使用场景 vue配置api地址

  • 部署CDN的网站如何找真实IP

    部署CDN的网站找真实IP 1 概述 目前很多网站使用了cdn服务 用了此服务 可以隐藏服务器的真实IP 加速网站静态文件的访问 而且你请求网站服务时 cdn服务会根据你所在的地区 选择合适的线路给予你访问 由此达网站加速的效果 cdn不仅

  • Java面向对象编程

    如下SQL语句中 可能返回null值 1 select count from t1 2 select max col1 from t1 3 select concat max max col1 from t1 A 1 可能 2 和 3 不可

  • 费杰：产品经理修炼之道

    前言 写在 产品经理修炼之道 之前 由于市场对产品经理的需求量增加 加之媒体把产品经理的重要性放大 于是导致大量人员涌进产品经理队伍 但是由于行业本身还不是很成熟 各个企业对产品经理的认识不够深入 大量产品经理处于尴尬的境地 产品经理岗位对

  • StringUtils的方法详解

    StringUtils方法详解 前言 方法详解 字符串为null或空的判断 空字符串的判断 trim相关方法 去除字符串两端指定的字符串 前言 StringUtils是一个处理字符串非常强大的类 能够让我们在处理字符串时少写很多代码 方法详

  • 解决excel导入异常：org.apache.poi.poifs.filesystem.OfficeXmlFileException: The supplied data appears to be

    记录一下开发中使用POI中的HSSFWorkbook来读取Excel数据时 遇到的 excel 导入出现的异常问题 先上部分解析代码 获取excel文件流 POIFSFileSystem fileSystem new POIFSFileSy

  • 解决Ubuntu中you are in emergency mode(紧急模式)问题

    我安装的ubuntu18 04 win10的双系统 不知道为什么我的ubuntu开机出现you are in emergency mode 有人说是未正常关键导致 但是我关机都是shutdown 我们现在来解决you are in emer

  • 【CSS】CSS 选择器

    CSS 选择器 1 基础选择器 1 1 元素选择器 语法 标签名 元素选择器会选中对应标签名的HTML元素 例如 p div span 等 1 2 类选择器 语法 类名 类选择器会选中class属性为指定类名的HTML元素 例如 div c

热门标签