初识CSS-样式选择符的种类与特点

怼烎@ 2022-05-15 14:26 375阅读 0赞

### 选择符，是根据元素特征来定位。因此，元素标签与属性，以及位置都可以当做选择符来使用。 ###

### 选择符种类很多，常用的有以下八种： ###

## 1，标签选择符： ##

### 用标签名称表示，用来描述网页元素类型的，通常与其他选择符组合使用，返回一组元素 ###

p{text-align: center;}

## 2，id选择符： ##

### 用\#号表示，用来选择网页中用id属性声明的元素，只返回一个元素 ###

#abc{color:red;}

## 3，类选择符： ##

## 用.来表示，用来选择使用了class属性声明的元素，通常返回一组相关元素 ##

.abc{background-color:blue;}

## 4，属性选择符： ##

## 除了class和id和style以外的属性，都可以使用 ##

### 属性放在一对方括号中，可同时指定多个属性 ###

### 还可以对属性值进行正则查询 ###

[title="abc"]{font-size:20px;}

## 5，群组选择符： ##

## 可以设置多个元素公用样式，用逗号分隔每个选择符 ##

h1,h2,h3,h4{font-weight:lighter;}

## 6，后代选择符： ##

## 根据元素之间隶属关系来选择，多个选择符之间，用空格分隔 ##

section h1{color:red;}

### 将section元素下面所有的h1元素文本设置为红色 ###

## 7，子代选择符： ##

## 子代选择符，只选择当前元素直接子元素，用>号表示 ##

### 子代选择符，非常的复杂，里面应用了大量的伪类元素，是我们学习的重点 ###

div>h1{color:green;}

### 将div元素下面子集h1元素文本设置为绿色 ###

## 8，伪类选择符： ##

## 伪类主要应用在特别标签上，表示当前元素的状态 ##

### 例如a标签的四种状态：未访问，已访问，鼠标悬停，点击中等 ###

a:visited{color:gray;}

### 将访问过的连接文本颜色设置为灰色 ###

## 9，伪元素选择符： ##

## 伪元素选择符主要有：first-letter和first-line ##

### first-letter:设置段落首行的首字母样式； ###

### first-line：设置段落首行文本的样子 ###

## 10，通用和同辈选择符： ##

## 通用选择符星号\*，同辈选择符加号+ ##

### 通用选择符：\*\{font-size:12px;\}设置网页中文本均为12像素； ###

### 同辈选择符：p + a\{color:pink;\}设置p和相邻a标签文本为粉色 ###

发表评论取消回复

表情：

评论列表（有 0 条评论，375人围观）

还没有评论，来说两句吧...

相关阅读

相关 css样式表和选择符

css语法一、选择符有七种： 1. 类型选择符：所有的html标签都可以直接当作选择符 2. id选择符：一个页面只能使用一次 \名称\{ 属性:

古城微笑少年丶/ 2023年07月17日 05:57/ 0 赞/ 125 阅读

相关初识CSS：丰富多彩的网页样式

丰富多彩的网页样式 1、任务描述 2、相关知识 2.1 CSS基本概念 2.2 一个简单地实例 2.3 CSS基本语法

我会带着你远行/ 2022年11月13日 00:48/ 0 赞/ 306 阅读

相关初识CSS-子代选择符

我们上次学习了后代选择符，如图： <style> body h2{ color:red; } </style>

亦凉/ 2022年05月15日 14:41/ 0 赞/ 308 阅读

相关初识CSS-后代选择符

网页中的元素，具有明显的层级关系可以利用他们的相对位置和隶属关系，来定位元素，以简化选择符的设计第一个选择符是起始点，用空格与后面的选择符分隔开，可以找到所有

拼搏现实的明天。/ 2022年05月15日 14:41/ 0 赞/ 319 阅读

相关初识CSS-群组选择符

群组选择符，从字面意义上看，就是一次性的选择多个元素，统一进行样式设置每个选择符之间，用逗号隔开，然后把公共样式写到声明块中即可选择符1，选择符2，选择符3｛

墨蓝/ 2022年05月15日 14:40/ 0 赞/ 372 阅读

相关初识CSS-属性选择符

标签中的属性，可以用来详细的描述元素，当然也可以用来选择元素。 CSS的属性选择符中，属性名是放在一对方括号\[\]中的如果要使用多个属性，可以连续写多个，例如

快来打我*/ 2022年05月15日 14:39/ 0 赞/ 335 阅读

相关初识CSS-类选择器

物以类聚人以群分，网页中的元素也是一样的在页面中总有很多元素拥有一模一样的外观，比如：一样的大小，同样的颜色那么我们如果继续使用id选择器一个一个去设置样式就会很麻烦

待我称王封你为后i/ 2022年05月15日 14:39/ 0 赞/ 411 阅读

相关初识CSS-id选择符

用id选择符选择的元素，必须在当前页面中是唯一的 <style> red{ color: red;

墨蓝/ 2022年05月15日 14:38/ 0 赞/ 425 阅读

相关初识CSS-样式选择符的种类与特点

选择符，是根据元素特征来定位。因此，元素标签与属性，以及位置都可以当做选择符来使用。选择符种类很多，常用的有以下八种： 1，标签选择符：用标签名称表示，

怼烎@/ 2022年05月15日 14:26/ 0 赞/ 376 阅读

相关初识CSS-样式选择符与声明块

在CSS中如何快速定位元素呢，是通过不同的选择符来定位的。 CSS中的样式由两部分组成：选择符和声明块。选择符\{声明块\} 下面我们用一个例子来展示一下：

红太狼/ 2022年05月15日 14:25/ 0 赞/ 363 阅读