欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS选择器的用法(详解)

程序员文章站 2022-04-10 09:15:39
这一篇,介绍CSS的各种选择器的用法。我们之前说过html是用来对网页的元素进行布局,那么css就是给这些元素加上一些属性和样式。而选择器就是对这些元素进行选中。那选中的方法自然是多种多样,所以CSS选择器也是分为很多种,这里就来一一介绍。一、CSS 元素选择器最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。我们来看一下。...

这一篇,介绍CSS的各种选择器的用法。
我们之前说过html是用来对网页的元素进行布局,那么css就是给这些元素加上一些属性和样式。
而选择器就是对这些元素进行选中。
那选中的方法自然是多种多样,所以CSS选择器也是分为很多种,这里就来一一介绍。

一、CSS 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。
我们来看一下。

<body> <div>div</div> <p>p</p> <ul> <li>1</li> <li>2</li> </ul> </body> 

我在网页中有一个div,一个p标签,一个ul。
显示出来的话:
CSS选择器的用法(详解)
因为是块级元素,所以自己占一行。
现在我们用元素选择器对他们进行选中:

 <style> div{ background-color: blue; } ul{ background-color:green; } li{ background-color: blueviolet; } p{ background-color: brown; } </style> 

显示出来的话:
CSS选择器的用法(详解)
OK,这就是元素选择器。

二,选择器分组

假设希望 div元素和p标签都有灰色。为达到这个目的,最容易的做法是使用以下声明:

 <style> p,div{ background-color: gray; } </style> 

我们用逗号来进行分割,从而把div和p标签都选中。
CSS选择器的用法(详解)
这里值得注意的是,本例中是相当于把两个元素选择器分组,分组这个方法,同时也可以用于其他选择器。

三、通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。

就像我们在写网页的时候,有时候网页会有一些默认的布局样式,我们不想要这个样式,也就是取消网页自带的一些标签的样式,我们可以这么做。

 *{
            padding: 0;
            margin: 0;
        } 

这就是选中了网页中的所有元素,一个很牛逼的选择器。

四、CSS 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用,也可以与其他元素结合使用。

提示:只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。

要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。

也就是说,我们在使用类选择器的时候,要先给标签加上类。
我们改一下我们的例子:

<body> <div class="boy">div</div> <ul class="boy"> <li>1</li> <li>2</li> </ul> </body> 

在div和ul的内部,我们加上了class=“boy”的代码。现在我们用类选择器来选中他们:

 <style> *{ margin: 0; padding: 0; } .boy{ background-color: blue; width: 300px; height: 300px; margin: 0 auto; list-style: none; } </style> 

在选择器中,我让他们的背景颜色为蓝色,并且设置了宽高,并且在网页居中显示,把ul前面的小点点去掉了。
再来看一下显示吧:
CSS选择器的用法(详解)
类选择器还可以结合元素选择器来使用。

例如:

<body> <div class="girl">div1</div> <p class="girl">p1</p> <p class="girl">p2</p> <p class="girl">p3</p> <p>p4</p> <p>p5</p> </body> 

我现在选中girl的类:

 <style> *{ margin: 0; padding: 0; } .girl{ background-color: blue; width: 100px; height: 100px; margin-bottom: 3px; } </style> 

是不是就选中了div和前三个p标签:
CSS选择器的用法(详解)
可我现在只想选中前三个p标签呢?
这么办:

 <style> *{ margin: 0; padding: 0; } p.girl{ background-color: blue; width: 100px; height: 100px; margin-bottom: 3px; } </style> 

用元素选择器和类选择器进行组合:
CSS选择器的用法(详解)
CSS 多类选择器
在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如:

<body> <p class="girl boy">p1</p> <p class="girl">p2</p> <p class="girl">p3</p> <p class="boy">p4</p> <p class="boy girl">p5</p> </body> 

可以看到p1个p5class中有两个值,所以我们在用类选择器的时候:

 <style> *{ margin: 0; padding: 0; } .girl{ background-color: blue; width: 100px; height: 100px; margin-bottom: 3px; } .boy{ width: 100px; height: 100px; border: 1px solid black; margin: 0 auto; } </style> 

就会有这种效果:
CSS选择器的用法(详解)
哎?这里有个好玩的,如果我们在boy选择器加上一个背景颜色的话:

 <style> *{ margin: 0; padding: 0; } .girl{ background-color: blue; width: 100px; height: 100px; margin-bottom: 3px; } .boy{ width: 100px; height: 100px; border: 1px solid black; margin: 0 auto; background-color: brown; } </style> 

会怎么显示呢?
CSS选择器的用法(详解)
右边三个变成红色了,如果我把这两个选择器调换一下顺序呢?
像这样:

 <style> *{ margin: 0; padding: 0; } .boy{ width: 100px; height: 100px; border: 1px solid black; margin: 0 auto; background-color: brown; } .girl{ background-color: blue; width: 100px; height: 100px; margin-bottom: 3px; } </style> 

颜色就又变了哈哈:
CSS选择器的用法(详解)
所以这说明了我们的代码是顺序执行的。
OK。类选择器就说这么多。

五、CSS ID 选择器

ID 选择器允许以一种独立于文档元素的方式来指定样式。
还是来先看一下这个选择器怎么用的吧:

<body> <ul> <li id="li1">li1</li> <li>li2</li> <li>li3</li> <li>li4</li> </ul> </body> 

我有一个ul然后给第一个li加了一个id;
我们先选中所有的li加上个样式。

 <style> *{ margin: 0; padding: 0; } li{ width: 100px; height: 100px; list-style: none; background-color: cadetblue; margin-bottom: 4px; } </style> 

看一下效果:
CSS选择器的用法(详解)
然后我们在选中第一个li:

 <style> *{ margin: 0; padding: 0; } li{ width: 100px; height: 100px; list-style: none; background-color: cadetblue; margin-bottom: 4px; } #li1{ background-color: chocolate; } </style> 

看一下效果:
CSS选择器的用法(详解)
嘶,这和类选择器好像没差多少啊,是不是一样的啊?不就是一个用“.”一个用“#”吗。

区别 1:只能在文档中使用一次
与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。

区别 2:不能使用 ID 词列表
不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。

区别 3:ID 能包含更多含义
类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。

我们就来看一下刚才的代码:
如果我这么改的话:

 ul#li1{
            background-color: chocolate;
        } 

类选择器是可以这么做的,但是标签选择器这么写就是不会有效果的。

然后我再改:

<body> <ul> <li id="li1 li2">li1</li> <li>li2</li> <li>li3</li> <li>li4</li> </ul> </body> 

我给第一个li加上两个id。

 <style> *{ margin: 0; padding: 0; } li{ width: 100px; height: 100px; list-style: none; background-color: cadetblue; margin-bottom: 4px; } #li1{ background-color: chocolate; } #li2{ width: 300px; } </style> 

CSS选择器的用法(详解)
你看连上一个的选择器都搞得不好使了。
所以这就是标签选择器和类选择器的区别。

六、CSS 属性选择器

CSS 2 引入了属性选择器。

属性选择器可以根据元素的属性及属性值来选择元素。

我们来看一下怎么用:

<body> <a href="https://i.csdn.net/#/uc/profile">一个帅哥的博客主页</a> <a href="https://mp.csdn.net/console/article">一个帅哥的所有博客</a> </body> 

我现在要选中a标签的href属性:

 <style> a[href]{ color: crimson; } </style> 

这样就OK了,但感觉这个选择器不怎么常用。。。。
CSS选择器的用法(详解)
就这样吧,其实这个选择器我好像都没有用过。。。。
有点尴尬。。。。。

七、CSS 后代选择器

后代选择器(descendant selector)又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

这个可以,挺常用的,来我们看一下用法:

<body> <div>div1 <ul> <li>li1</li> <li>li2</li> </ul> </div> </body> 

可以看到div的孩子是ul,ul的孩子是li。那么li就也算是div的后代。

 <style> *{ margin: 0; padding: 0; } div li{ width: 100px; height: 100px; background-color: crimson; margin-bottom: 5px; list-style: none; } </style> 

通过这种空格来选中后代的元素:
CSS选择器的用法(详解)

八、CSS 子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

如果我把刚才的选择器改一下写法:

 <style> *{ margin: 0; padding: 0; } div>ul{ width: 100px; height: 100px; background-color: crimson; margin-bottom: 5px; list-style: none; } </style> 

通过这种>来选中子代的选择器:
CSS选择器的用法(详解)

九、CSS 相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

再把上个例子的结构改一下:

<body> <div>div1 <ul> <li>li1</li> <li>li2</li> </ul> <div>div2</div> </div> </body> 

我再ul后面加了一个div,我现在想通过ul来选中这个div2.

 <style> *{ margin: 0; padding: 0; } ul+div{ width: 100px; height: 100px; background-color: crimson; } </style> 

就这样,通过+来选中相邻兄弟的选择器。
CSS选择器的用法(详解)
还有两个伪类选择器,伪元素选择器,这里就不再介绍了。如果感兴趣的话可以自己再找找资料,可以去w3c的网页上找找。

然后关于选择器,最重要的还类选择器和ID选择器。
在后面的DOM操作中也经常用的是这两种选择器。

关于CSS的选择器,也就说这些。

本文地址:https://blog.csdn.net/weixin_46726346/article/details/107859833

相关标签: HTML+CSS css