css都有哪些选择器怎么使用

CSS 选择器是用于选择你想要样式化的 HTML 元素的模式。以下是一些主要的 CSS 选择器及其使用方式:

元素选择器

选择所有指定类型的元素。

css

p {

color: red;

}

这将选择所有的 <p> 元素,并将它们的文本颜色设置为红色。

  1. 类选择器

选择具有指定类的元素。类选择器以点(.)开头。

css

.myClass {

font-size: 20px;

}

在 HTML 中,你可以这样使用它:<div class="myClass">这是一个类为 myClass 的 div。</div>

  1. ID 选择器

选择具有指定 ID 的元素。ID 选择器以井号(#)开头。

css

#myID {

background-color: yellow;

}

在 HTML 中,你可以这样使用它:<div id="myID">这是一个 ID 为 myID 的 div。</div>

注意:ID 在页面上应该是唯一的。

  1. 属性选择器

选择具有指定属性的元素。

* 选择具有指定属性的元素:

```css

input[type="text"] {

width: 200px;

}

```

* 选择具有指定属性和值的元素:

```css

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

color: blue;

}

```

* 选择属性值包含某个字符串的元素:

```css

a[href*="example"] {

font-weight: bold;

}

```

伪类选择器

选择 HTML 元素的特定状态。

* `:hover`:选择鼠标指针浮动在上面的元素:

```css

button:hover {

background-color: green;

}

```

* `:active`:选择被用户激活的元素(如鼠标点击并按住不放):

```css

button:active {

color: white;

}

```

* `:first-child`:选择属于其父元素的第一个子元素:

```css

p:first-child {

color: purple;

}

```

* `:last-child`、`:nth-child()`、`:nth-last-child()` 等也是常见的伪类选择器。

伪元素选择器

选择元素的特定部分,并为其添加样式。

* `::before`:在元素内容之前插入内容:

```css

p::before {

content: "Read this - ";

color: blue;

}

```

* `::after`:在元素内容之后插入内容:

```css

p::after {

content: " - End";

color: red;

}

```

以上只是 CSS 选择器的一部分。实际上,CSS 还提供了许多其他选择器,如组合选择器(如逗号分隔的选择器组、后代选择器、子选择器、相邻兄弟选择器和一般兄弟选择器)等。这些选择器可以帮助你更精确地选择并样式化 HTML 元素。

相关推荐
冰暮流星2 小时前
css3新增背景图片样式
前端·css·css3
天外飞雨道沧桑4 小时前
JS/CSS实现元素样式隔离
前端·javascript·css·人工智能·ai
华仔啊8 小时前
Vue3+CSS实现一个非常丝滑的 input 标签上浮动画,设计师看了都点赞
前端·css·vue.js
Sherry00713 小时前
【译】 CSS 布局算法揭秘:一次思维转变,让 CSS 从玄学到科学
前端·css
夜雨深秋来13 小时前
BEM方法论:构建可维护的前端CSS架构
前端·css
小羊不会c++吗(黑客小羊)15 小时前
HTML教程——1,css
css·html
菜鸟una1 天前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
代码改变世界100861 天前
像素策略游戏:资源战争
css·游戏·css3
luckyPian2 天前
前端+AI:CSS3(二)
前端·css·css3
muyouking112 天前
Tailwind CSS 小白快速入门速查手册
前端·css·css3