css选择器简单整理

最新推荐文章于 2024-07-22 20:38:06 发布

尘埃的故事

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量534

点赞数

分类专栏： web前端文章标签： css html

本文链接：https://blog.csdn.net/u011144425/article/details/78585272

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

简单整理关于css选择器的一些内容，
大体上直观以符号观察是：

，  —— 选择器分组
.   —— 类选择器
#   —— ID 选择器
[]  —— 属性选择器
空格 —— 后代选择器
>   —— 子元素选择器
+   —— 相邻兄弟选择器

一、元素选择器

选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

.e.g
p {color:gray;}

二、选择器分组 ,

用逗号分隔：逗号告诉浏览器，规则中包含两个不同的选择器。
如果没有这个逗号，那么规则的含义将完全不同，表示是后代选择器。
可以将任意多个选择器分组在一起，对此没有任何限制。

 body, h2, p, table, th, td, pre, strong, em {color:gray;}

通配选择器：这个声明等价于列出了文档中所有元素的一个分组选择器。

 * {color:red;}

三、类选择器 .

1、普通单一类选择器：.a {color:red;}

2、结合元素选择器： p.a {color:red;}

类选择器可以结合元素选择器来使用。
选择器现在会匹配 class 属性包含 a 的所有 p 元素.

3、多类选择器 :

.e.g
.a {font-weight:bold;}
.b {font-style:italic;}
.a.b {background:silver;}

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

（两个类选择器链接时中间不可有空格，class属性使用时需要有空格间隔，
即可有各个单选择器的效果，也有多类选择器结合的效果。）

.e.g
<html>
<head>
<style type="text/css">
.a {font-weight:bold;}
.b {font-style:italic;}
.a.b {background:silver;}
</style>
</head>
<body>
<p class="a">This paragraph is very important.</p>
<p class="b">This is a warning.</p>
<p class="a b">This paragraph is a very important warning.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>

四、ID 选择器 #id

ID 选择器类似于类选择器，但不引用 class 属性的值，而要引用 id 属性中的值.
前面有一个 # 号声明

与类选择器区别：

区别 1：只能在文档中使用一次
区别 2：不能使用 ID 词列表，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
区别 3：ID 能包含更多含义

五、属性选择器 []

简单属性选择：如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

可以只对有 href 属性的锚（a 元素）应用

 .e.g
 a[href] {color:red;}

根据具体属性值选择:除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

 .e.g
 a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

六、后代选择器（又称为包含选择器。）空格

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
结构：选择器之间以空格分隔，选择器之间的空格是一种结合符（combinator）。
语法解释：在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

七、子元素选择器 >

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）

.e.g
h1 > strong {color:red;}

语法解释：如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

八、相邻兄弟选择器 +

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

.e.g
h1 + p {margin-top:50px;}

尘埃的故事

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器简单整理

简单整理关于css选择器的一些内容，大体上直观以符号观察是：， —— 选择器分组. —— 类选择器# —— ID 选择器[] —— 属性选择器空格 —— 后代选择器> —— 子元素选择器+ —— 相邻兄弟选择器一、元素选择器选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：.e.gp {color:gray;}二、选择器分
复制链接

扫一扫