CSS选择器

最新推荐文章于 2024-09-06 22:20:29 发布

Crrrrrr9

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量60

点赞数 1

文章标签：前端 css

本文链接：https://blog.csdn.net/Crrrrrr9/article/details/129871032

版权

CSS基础知识——选择器

前言

在大学中，通过王老师生动的教学学到了CSS选择器方面的知识，现做以下总结

一、CSS选择器是什么？

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

二、CSS选择器的基本概念

1.五大类CSS选择器

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

2.简单选择器（id选择器）

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

3.组合器选择器

组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

后代选择器 (空格)
子选择器 (>)

（1）后代选择器

后代选择器匹配属于指定元素后代的所有元素。

选择 <div> 元素内的所有 <p> 元素：

实例

div p {
  background-color: green;
}

(2)子选择器

子选择器匹配属于指定元素子元素的所有元素。

选择属于 <div> 元素子元素的所有 <p> 元素：

实例

div > p {
  background-color: green;
}

4.伪类选择器

伪类用于定义元素的特殊状态。

链接能够以不同的方式显示：

常见的有：a:link,a:visited,a:hover,a:active

具体用法请看下例

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

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

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

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

5.伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

它可用于：

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

常见得有：

：before ,:after,::before,::after;

注意：使用伪元素选择器时一定要加上content属性。

6.属性选择器

为带有特定元素的HTML元素设置样式

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

实例：

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*选择选中的额标签中存在的某个属性*/
div[title]{
border: 1px solid black;
}
/*确切的等于某个值*/
input[type="text"]{
background: red;
}
/*属性值包含某个值*/
input[type *="e"]{
background: blue;
}
/*属性值以某个值开头*/
input[type ^="e"]{
background: green;
}
/*属性值以某个值结尾*/
input[type $="rl"]{
background: red;
}
/*+表示下一个标签*/
.msg +p{
border: 1px solid green;
}
/*属性等于某个属性值*/
[title="这是一个标题"]{
color: red;
}
</style>
</head>
<body>
<div class="container">
这是一个div
</div>
<div title="这是一个标题">这是我的第二个div</div>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="李四">
<input type="url" name="" id="" value="王五">
<hr>
<div class="msg">我喜欢听音乐</div>
<p id="msg1" ">这是一个段落</p>
</body>
</html>