CSS选择器

最新推荐文章于 2024-07-25 15:36:30 发布

wyzhang0214

最新推荐文章于 2024-07-25 15:36:30 发布

阅读量108

点赞数

文章标签： css

本文链接：https://blog.csdn.net/wyzhang0214/article/details/115050930

版权

文章目录

选择器

选择器

选择器是CSS规则的第一部分。选择器选择的元素，叫做“选择器的对象”

元素、类和ID选择器

/*元素选择器*/
h1 { }

/*类选择器*/
.box { }

/*id选择器*/
#unique { }

/*通配选择器*/
* { }

属性选择器

根据一个元素上的某个标签的属性的存在以选择元素：

a[title] { }

根据一个有特定值的标签属性是否存在来选择：

a[href="https://example.com"] { }

选取属性值包含指定词的元素：

[title~="flower"]{ }

上面的例子会匹配以下属性的元素：title=“flower”、title=“summer flower” 以及 title=“flower
new”，但不匹配：title=“my-flower” 或 title=“flowers”。

选取指定属性以指定值开头的元素：

[class |= "top"] { }

上面的例子选取 class 属性以 “top” 开头的所有元素
注释：值必须是完整或单独的单词，比如 class=“top” 或者后跟连字符的，比如 class=“top-text”。

选取指定属性以指定值开头的元素：

[class^="top"] { }

上面的例子选取 class 属性以 “top” 开头的所有元素
值不必是完整单词

选取指定属性以指定值结尾的元素：

[class$="test"] { }

上面的例子选取 class 属性以 “test” 结尾的所有元素
值不必是完整单词

选取属性值包含指定词的元素：

[class*="te"] { }

上面的例子选取 class 属性包含"te" 的所有元素
值不必是完整单词

还可以设置表单样式

如果需要为不带class或id的表单设置样式，属性选择器会很有用：

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

伪类与伪元素

参考：https://www.w3school.com.cn/css/css_pseudo_classes.asp

伪类

伪类用于定义元素的特殊状态。
例如，可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

伪类的语法：

selector:pseudo-class {
  property: value;
}

锚伪类实例：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。(如果全部都定义的情况下)

栗子：
工具提示的效果

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>鼠标移到我上面来显示 p 元素
  <p>哈哈！我在这里！</p>
</div>

</body>
</html>

:lang伪类

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>

<p>在本例中，:lang 为 lang="en" 的 q 元素定义引号：</p>

</body>
</html>

Some text A quote in a paragraph Some text.

在本例中，:lang 为 lang="en" 的 q 元素定义引号：

下面的图来自https://www.w3school.com.cn/css/css_pseudo_classes.asp

所有的CSS伪类：
from w3school

伪元素

CSS伪元素用于设置元素指定部分的样式
可以用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

伪元素的语法：

selector::pseudo-element {
  property: value;
}

比如：

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

::first-line, ::first-letter只能应用与块级元素，并且注意伪元素中的双冒号的使用(css3中使用双冒号代替了单冒号)，伪类是单冒号

组合器选择器

后代选择器(空格)

后代选择器匹配属于指定元素后代（孙子辈的也算）的所有元素。

div p {
  background-color: yellow;
}

子选择器(>)

子选择器匹配属于指定元素子元素（只算子女，不算孙子辈）的所有元素。

div > p {
  background-color: yellow;
}

相邻兄弟选择器(+)

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素，“相邻”指的是“紧随其后”的一个

<!DOCTYPE html>
<html>
<head>
<style>
/*只有段落3标黄*/
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>相邻兄弟选择器</h1>
<p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

上面只有段落3标黄

通用兄弟选择器(~)

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>通用兄弟选择器</h1>
<p>通用的兄弟选择器（~）选择指定元素的所有同级元素。</p>

<p>段落 1。</p>

<div>
  <p>段落 2。</p>
</div>

<p>段落 3。</p>
<code>一些代码。</code>
<p>段落 4。</p>

</body>
</html>

段落3和段落4都标黄

在这里插入图片描述

wyzhang0214

关注

0
点赞
踩
0

收藏

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

文章目录选择器元素、类和ID选择器属性选择器伪类与伪元素伪类伪元素组合器选择器后代选择器(空格)子选择器(>)相邻兄弟选择器(+)通用兄弟选择器(~)选择器选择器是CSS规则的第一部分。选择器选择的元素，叫做“选择器的对象”元素、类和ID选择器/*元素选择器*/h1 { }/*类选择器*/.box { }/*id选择器*/#unique { }/*通配选择器*/* { }属性选择器根据一个元素上的某个标签的属性的存在以选择元素：a[title] { }根据
复制链接

扫一扫