css 父选择器 使用方法

css parent用法（实用版）目录1.CSS parent 用法简介2.CSS parent 的语法结构3.CSS parent 的属性4.CSS parent 的实际应用5.总结正文【1.CSS parent 用法简介】CSS（层叠样式表）是一种用于网页设计的样式表语言，可以控制网页的外观和样式。

在 CSS 中，parent 属性是一种选择器，用于选择某个元素的父元素。

通过使用 parent 属性，我们可以对父元素应用样式，从而影响到子元素。

CSS parent 用法可以帮助我们更好地控制网页的样式和布局。

【2.CSS parent 的语法结构】CSS parent 的语法结构相对简单，其基本形式如下：```selector {parent-selector {/* 属性值 */}}```其中，`selector`表示我们要选择的元素，`parent-selector`表示我们要选择的父元素，`attribute`和`value`分别表示属性和属性值。

【3.CSS parent 的属性】CSS parent 属性有许多可用的属性值，以下是一些常见的属性值：- `color`：设置文本颜色- `font-size`：设置字体大小- `background-color`：设置背景颜色- `padding`：设置内边距- `margin`：设置外边距- `border`：设置边框- `display`：设置元素显示方式【4.CSS parent 的实际应用】以下是一个使用 CSS parent 属性的实际例子：假设我们有如下 HTML 代码：```html<div class="container"><p class="text">这是一个段落。

</p><p class="text">这是另一个段落。

.child 的父级设置样式一、概述在网页设计和开发中，CSS（层叠样式表）是一种用于描述HTML元素如何呈现的样式语言。

通过使用CSS，我们可以为HTML元素设置样式，包括颜色、字体、布局等。

其中，父级元素可以通过CSS规则来影响其子元素（child）的样式。

二、父级设置样式的原理在CSS中，一个元素（例如一个HTML元素）的样式可以通过其父元素的样式进行影响。

这是通过CSS的继承机制实现的。

当一个元素继承了其父元素的某些样式属性时，该元素就会使用这些属性的默认值或其父元素的样式值。

因此，父级元素可以设置其子元素的样式，通过影响其子元素的继承属性。

假设我们有一个HTML文档，其中包含一个div元素作为父级元素，该div元素包含一些子元素（例如p元素）。

我们可以通过CSS规则来设置父级div元素的样式，从而影响其子元素的样式。

例如，我们可以设置div元素的背景颜色，从而影响子元素的背景颜色。

```css/* 父级元素的样式规则 */div.parent {background-color: lightblue; /* 设置父级元素的背景颜色 */}/* 子元素的样式规则 */div.parent p {color: white; /* 设置子元素的文字颜色 */}```在这个示例中，所有的div元素如果具有"parent"类名（即通过类选择器`.parent`选择），它们的背景颜色将会被设置为浅蓝色。

而它们所有的子元素（即具有"p"类的p元素）的文字颜色将会被设置为白色。

这样，我们就成功地通过父级元素的样式规则来影响子元素的样式。

四、其他设置方式除了使用类选择器外，我们还可以使用其他选择器，如元素选择器、ID选择器和属性选择器等，来为父级元素设置样式，从而影响其子元素的样式。

具体选择哪种方式取决于具体的应用场景和需求。

五、注意事项在使用父级设置样式的机制时，需要注意以下几点：1. 继承性：如果一个元素继承了其父元素的某些样式属性，那么这些属性的值将根据继承规则进行计算。

CSS选择器以某字端开头的命令一、介绍在CSS（层叠样式表）中，选择器是用来选择要应用样式的元素的模式。

在开发网页时，我们经常需要根据特定的元素选择器来应用样式。

而以某字端开头的命令是指以某个字母或字符串开头的选择器命令。

这些选择器命令在CSS中有着重要的作用，能够帮助我们快速有效地选择到指定的元素，从而实现网页的样式设计和布局。

本文将详细介绍CSS选择器中以某字端开头的命令，以及它们在实际开发中的应用。

二、ID选择器1. #idID选择器是通过元素的id属性来选择元素，id属性是页面上的唯一标识符。

在CSS中，我们可以使用以#符号开头的命令来选择指定id的元素，并为其设置样式。

例如：#header {background-color: #f2f2f2;border: 1px solid #000;}2. #[id^="value"]在实际开发中，有时候我们需要选择以某个值开头的id，这时可以使用以^符号开头的命令来实现。

我们想选择所有id以"menu"开头的元素，可以这样写：#[id^="menu"] {color: red;}三、类选择器1. .class类选择器是通过元素的class属性来选择元素，class属性可以用于多个元素。

在CSS中，我们可以使用以.符号开头的命令来选择指定class的元素，并为其设置样式。

例如：.button {background-color: #ff0000;color: #ffffff;}2. .[class^="value"]同样可以使用以^符号开头的命令来选择class以特定值开头的元素。

我们想选择所有class以"btn"开头的元素，可以这样写：.[class^="btn"] {font-size: 16px;}四、属性选择器1. [attribute=value]属性选择器是通过元素的属性值来选择元素，可以根据属性的值来设置样式。

css_selector定位法
CSS选择器定位法是一种在网页上定位元素的方法，它使用CSS 选择器语法来选择HTML元素。

通过CSS选择器，我们可以精确地定位页面上的元素，从而对其进行操作或者提取信息。

CSS选择器可以根据元素的标签名、类名、ID、属性等特征来定位元素。

首先，我们可以使用元素的标签名来选择元素，例如使用"div" 来选择所有的div元素。

另外，我们还可以通过类名来选择元素，使用 ".classname" 的形式来选择具有特定类名的元素。

此外，我们还可以通过ID来选择元素，使用 "#id" 的形式来选择具有特定ID的元素。

除此之外，CSS选择器还支持使用属性来选择元素，比如选择具有特定属性的元素，或者选择属性值匹配特定模式的元素。

我们还可以使用组合选择器来选择元素，比如选择父元素下的子元素，或者选择兄弟元素等。

总的来说，CSS选择器提供了丰富的选择元素的方法，可以根据元素的不同特征进行精确的定位。

在实际应用中，我们可以结合使用不同的选择器来定位页面上的元素，从而实现自动化测试、网
页数据抓取等功能。

CSS选择器定位法是前端开发和自动化测试中常用的技术，能够帮助我们准确地定位和操作页面上的元素。

css的选择器的详细介绍前言css选择器，是前端的基本功，只要你是一个前端，这个一定要掌握！今天之所以要重温一下css选择器，主要是和大家再复习一下css选择器中的一些常用符号的使用，例如“+、~、^、$、>、*”等的使用！之所以要复习呢，是因为我一个写后端的哥们，前端写的也很好，但是他今天突然问我，css中加号和大于号是啥意思？我说，这个貌似jquery中也有吧！好吧，可能这些符号不常用，造成我们对这些符号的陌生！那么今天，我们一起再来复习一下吧！大家在右侧搜索框中搜索“选择器”，会发现，我之前写过css用伪类nth-child，进行奇偶行的选择。

今天，关于css3伪类选择器，我就不多描述了！同时大家也可以看一下我之前写的“jquery常用选择器总结”，其实，jquery选择器和css选择器类似！特别是在属性选择和组合选择上面！基本选择器ID选择器：#header {}类选择器：.header {}元素选择器：div {}子选择器：ul > li {}后代选择器：div p {}伪类选择器：a:hover {}属性选择器：input[type="text"] {}id优先级高于类class；后面的样式覆盖前面的；指定的高于继承；css选择器之特殊符号1、>(大于号)大于号代表选择子元素，这个我们经常用，值得注意的是h1>strong 和h1 strong的区别这2个都是选择子元素，但是h1>strong 只选择某个元素的子元素。

例如如下：<h1>This is <strong class="haorooms">very</strong> <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1>h1>strong ，只有第一个h1下面的strong被选中，第二个不起作用。

在CSS中，可以使用多种方法选择某个元素的多个子元素。

以下是几种常见的方法：
1. 使用空格选择子元素：可以使用空格将父元素和子元素分开，选择所有符合条件的子元素。

例如，如果要选择所有`div`元素下的`p`元素，可以使用以下选择器：
```css
div p {
/* CSS样式*/
}
```
2. 使用直接子元素选择器(>)：可以使用直接子元素选择器(>)选择父元素的直接子元素。

例如，如果要选择所有`div`元素的直接子元素`p`，可以使用以下选择器：
```css
div > p {
/* CSS样式*/
}
```
3. 使用伪类选择器：可以使用伪类选择器来选择特定位置的
子元素。

例如，`:first-child`选择第一个子元素，`:last-child`选择最后一个子元素，`:nth-child(n)`选择第n个子元素等。

例如，如果要选择第一个`li`元素，可以使用以下选择器：```css
li:first-child {
/* CSS样式*/
}
```
4. 使用类选择器或ID选择器：可以给子元素添加类或ID，并使用类选择器或ID选择器来选择这些子元素。

例如，如果要选择具有相同类名的子元素，可以使用以下选择器：
```css
.className {
/* CSS样式*/
}
```
这些只是一些常见的方法，根据具体的需求，还可以使用其他选择器来选择多个子元素。

css选择器的使⽤css选择器的使⽤⽅法今天给⼤家分享⼀下css常⽤的选择器使⽤。

⾸先我们先了解⼀下为什么要使⽤选择器。

引⼊、要使⽤css对HTML页⾯中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要⽤到CSS选择器。

HTML页⾯中的元素就是通过CSS选择器进⾏控制的，这就要⽤到我们的css选择器。

选择器的类别：1. 类型选择器2. id选择器3. class选择器4. 通⽤选择器5. 群组选择器6. 后代选择器7. 伪类选择器8. 属性选择器9. 层级选择器10. ...⼀、类型选择器的⽤法：样式：<style>div{width: 500px;height: 500px;background: #000;}</style>结构：<body><div></div></body><style>div{width: 500px;height: 500px;background: #000;}</style><body><div></div></body>运⾏结果：css通过类名来控制改变样式代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{width: 200px;height: 100px;background: rgb(248, 2, 2);}</style></head><body><div id="box"></div></body></html>　id选择器⽤法给标签取⼀个id=“名称”的属性与属性值，属性值是⾃⼰命名。

xpath——⽗⼦、兄弟、相邻节点定位⽅式详解转载最后发布于2019-06-15 20:47:17 阅读数 1215 收藏1. 由⽗节点定位⼦节点最简单的肯定就是由⽗节点定位⼦节点了，我们有很多⽅法可以定位，下⾯上个例⼦：对以下代码：1.<html>2.<body>3.<div id="A">4.<!--⽗节点定位⼦节点-->5.<div id="B">6.<div>parent to child</div>7.</div>8.</div>9.</body>10.</html>1想要根据 B节点定位⽆id的⼦节点，代码⽰例如下：1.# -*- coding: utf-8 -*-2.from selenium import webdriver3.4.driver = webdriver.Firefox()5.driver.get('D:\\py\\AutoTestFramework\\src\\others\\test.html')6.7.# 1.串联寻找8.print driver.find_element_by_id('B').find_element_by_tag_name('div').text9.10.# 2.xpath⽗⼦关系寻找11.print driver.find_element_by_xpath("//div[@id='B']/div").text12.13.# 3.css selector⽗⼦关系寻找14.print driver.find_element_by_css_selector('div#B>div').text15.16.# 4.css selector nth-child17.print driver.find_element_by_css_selector('div#B div:nth-child(1)').text18.19.# 5.css selector nth-of-type20.print driver.find_element_by_css_selector('div#B div:nth-of-type(1)').text21.22.# 6.xpath轴 child23.print driver.find_element_by_xpath("//div[@id='B']/child::div").text24.25.driver.quit()1结果：1.parent to child2.parent to child3.parent to child4.parent to child5.parent to child6.parent to child1第1到第3都是我们熟悉的⽅法，便不再多⾔。

css selector extractor使用方法Selector Extractor是一种用于网页爬取的工具，可以提取指定CSS选择器的数据。

以下是使用步骤：1. 安装Selector Extractor在Python终端或命令提示符中执行以下命令安装Selector Extractor：```pip install CSSselect```2. 导入必要的模块在Python代码中导入必要的模块：```pythonfrom cssselect import HTMLTranslatorfrom lxml import html```3. 定义CSS选择器使用CSS选择器定义要提取的数据。

例如，要提取一个网页中所有`<a>`标签的链接，可以使用选择器`a`。

4. 加载网页内容使用`lxml`模块的`html`函数加载网页内容：```pythonpage_content = html.fromstring(html_content)```5. 提取数据使用`CSSSelector`类的`css_to_xpath`方法将CSS选择器转换为XPath表达式，并使用`xpath`方法提取数据：```pythoncss_selector = HTMLTranslator().css_to_xpath(css_selector)data = page_content.xpath(css_selector)```6. 处理提取的数据对提取的数据进行进一步处理，例如打印、存储到文件等。

```pythonfor item in data:print(item.text_content())```注意事项：- CSS选择器必须在网页内容中可以匹配成功。

- CSS选择器可以通过多层级、类名、ID等来缩小匹配范围。

- 可以使用CSS选择器提取单个元素或多个元素的数据。

更多关于CSS选择器的用法，请参考CSSselect的官方文档。

基本选择器,标签选择器的写法在CSS中，选择器是用来选择需要添加样式的元素的。

选择器可以分为基本选择器和标签选择器，它们是CSS中最常用的选择器，下面将分别介绍它们的写法和使用方法。

一、基本选择器的写法基本选择器是用来选择HTML元素的ID、class和元素自身的。

下面列举了基本选择器的写法：1. ID选择器ID选择器以"#"号来定义，后面跟着ID的名称。

ID选择器在页面中只能出现一次。

示例：```css#myId {color: red;font-size: 16px;}```2. class选择器class选择器以"."号来定义，后面跟着class的名称。

一个元素可以有多个class，class选择器可以同时选择多个元素。

示例：```css.myClass {color: blue;font-size: 14px;}```3. 元素选择器元素选择器直接使用元素的名称作为选择器。

p元素选择器将选择所有的p标签元素。

示例：```cssp {text-align: center;line-height: 26px;}```二、标签选择器的写法标签选择器是使用HTML标签名称来定义的，它可以选择指定的标签元素，并为其添加样式。

1. 标签选择器的写法标签选择器直接使用HTML标签的名称来定义样式，如下所示：```cssbody {background-color: #f4f4f4;font-family: Arial, sans-serif;}```2. 标签选择器的嵌套标签选择器可以进行嵌套，例如选择所有p标签元素下的a标签元素，并为其添加样式。

示例：```cssp a {color: blue;text-decoration: none;}```总结基本选择器和标签选择器是CSS中最常用的选择器之一，它们可以根据ID、class和元素名称来选择并为其添加样式。

元素定位之cssselector（选择器定位）CSS选择器是一种用来选择HTML元素的方法，它通过指定元素的一些特征、属性和层次关系来定位元素。

其中，CSS选择器中最强大的定位方法之一是CSS选择器定位（CSS Selector Locators），也称为CSS选择器定位。

CSS选择器定位有以下几种常用的方法：2. 类选择器（Class Selector）：通过选择元素的class属性值来定位元素。

在HTML中，可以通过在元素的class属性值前添加`.`（英文句点）来指定类选择器。

例如，通过`.header`选择所有class属性值为`header`的元素。

3. ID选择器（ID Selector）：通过选择元素的id属性值来定位元素。

在HTML中，可以通过在元素的id属性值前添加`#`（井号）来指定ID选择器。

例如，通过`#logo`选择id属性值为`logo`的元素。

5. 子元素选择器（Child Selector）：通过选择元素的直接子元素来定位元素。

子元素选择器使用`>`符号来表示。

例如，通过`div > p`选择所有直接子元素为`<p>`的`<div>`元素。

6. 后代元素选择器（Descendant Selector）：通过选择元素的后代元素来定位元素。

后代元素选择器使用空格来表示。

例如，通过`div p`选择所有后代元素为`<p>`的`<div>`元素。

7. 兄弟元素选择器（Adjacent Sibling Selector）：通过选择元素的相邻兄弟元素来定位元素。

兄弟元素选择器使用`+`符号来表示。

例如，通过`p + ul`选择所有与`<p>`元素相邻的`<ul>`元素。

以上只是CSS选择器定位的一些常见例子，实际应用中还有更多复杂的选择器定位方法。

通过灵活运用CSS选择器定位，我们可以精确地在HTML页面中定位到想要的元素，从而进行元素操作和页面交互。

在进行深度和广度的探讨之前，我们先来明确一下主题——CSS选取相同子元素不同父元素的写法。

这个主题涉及到CSS选择器的使用，以及如何在HTML文档中准确地定位相同子元素但不同父元素的情况。

在接下来的文章中，我将从简到繁地介绍这个主题，帮助你更深入地理解该问题。

1. 理解CSS选择器我们需要了解CSS选择器的基本概念。

CSS选择器是一种用来选择HTML文档中特定元素的技术，它可以根据元素的标签名、类名、ID等特征进行选择。

在实际应用中，我们需要根据具体的需求来选择相应的元素，这就需要对不同类型的选择器有一定的了解。

2. 选取相同子元素不同父元素的情况在实际的网页布局中，经常会遇到一个子元素被多个不同父元素所包含的情况。

这就需要我们使用CSS选择器准确地选取这些子元素，并对其进行样式设置。

在这种情况下，我们可以使用一些特定的选择器来进行定位，比如nth-child()选择器、通用兄弟选择器等。

3. 使用nth-child()选择器nth-child()选择器可以帮助我们准确定位到某个父元素下的特定子元素。

如果我们需要选取第二个p元素，可以使用:nth-child(2)来实现。

而如果需要在不同父元素下选取相同子元素，则可以结合使用:nth-child()选择器和父元素选择器，从而准确定位到相应的子元素。

4. 进一步探讨CSS选择器的其他用法除了nth-child()选择器之外，还有一些其他的选择器可以帮助我们准确地选取相同子元素但不同父元素的情况。

我们可以使用通用兄弟选择器(~)来选取同一级下的相邻元素；还可以使用父元素选择器来限定在特定的父元素下进行选择。

这些选择器的灵活运用可以帮助我们更好地解决实际的布局问题。

5. 个人观点在实际的网页开发中，准确地选取相同子元素但不同父元素是一个常见并且重要的问题。

对于这个问题，我个人认为需要充分理解和熟练掌握各种CSS选择器的用法，以及它们的组合和嵌套方式。

只有在对选择器有深入的了解之后，我们才能更好地应对各种复杂的布局情况，并且以简洁高效的方式完成样式设置。

css父类子类写法================CSS 是用于描述网页样式的一种语言，它可以使网页的布局、颜色、字体等元素更加美观和易于管理。

在 CSS 中，父类和子类是一种常见的布局概念，它们可以帮助我们更好地控制元素的样式。

一、父类写法------### 1. 设置宽度和高度在 CSS 中，可以通过设置父类的宽度和高度来控制其子类的显示方式。

例如，可以使用 `width` 和 `height` 属性来设置一个父类的宽度和高度，从而控制子类的显示区域。

### 2. 设置 padding 和 margin通过设置父类的内边距（padding）和外边距（margin），可以控制子类与父类之间的距离，从而调整子类的位置。

### 3. 设置背景色和边框通过设置父类的背景色和边框，可以控制其子类的背景和边框样式。

### 4. 使用 Flexbox 或 Grid 布局使用 Flexbox 或 Grid 布局可以更方便地控制父类的子类布局。

通过设置父类的布局方式，可以轻松地调整子类的排列、对齐和尺寸。

二、子类写法------### 1. 设置样式继承在 CSS 中，子类的样式是从父类继承而来的。

如果要覆盖子类的默认样式，需要使用 `!important` 规则或者手动设置相关属性。

### 2. 使用 position 属性使用 `position` 属性可以将子类定位到父类内部的不同位置，从而控制其显示方式和位置。

### 3. 使用 float 或 clear 属性使用 `float` 属性可以将子类浮动到父类的左边或右边，从而控制其排列方式。

而使用 `clear` 属性可以阻止子类浮动到其他位置。

### 4. 使用伪元素和选择器可以使用伪元素和选择器来选择特定的子类，并为其设置特定的样式。

例如，可以使用 `::before` 和 `::after` 伪元素来添加内容到元素的前面和后面。

### 5. 使用 CSS 盒模型CSS 盒模型是 CSS 中一个重要的概念，它可以帮助我们更好地控制元素的布局和尺寸。

css选择器表达式在CSS（层叠样式表）中，选择器用于选择要样式化的HTML元素。

以下是一些常见的CSS选择器表达式：元素选择器：选择所有指定元素。

例如，选择所有段落元素：p {color: blue;}类选择器：选择具有指定类的元素。

类选择器以点号（.）开头，后面跟着类名。

例如，选择所有具有 "highlight" 类的元素：.highlight {background-color: yellow;}ID选择器：选择具有指定ID的元素。

ID选择器以井号（#）开头，后面跟着ID名。

请注意，ID应该是唯一的。

例如，选择具有 "header" ID 的元素：#header {font-size: 24px;}后代选择器：选择元素的后代元素。

后代选择器使用空格分隔元素。

例如，选择所有 div 元素下的段落元素：div p {font-style: italic;}子元素选择器：选择元素的直接子元素。

子元素选择器使用大于号（>）。

例如，选择所有 ul 元素下的直接子元素 li：ul > li {list-style-type: square;}相邻兄弟选择器：选择与指定元素相邻的兄弟元素。

相邻兄弟选择器使用加号（+）。

例如，选择所有 h2 元素后面紧跟的 p 元素：h2 + p {color: red;}通用选择器：选择所有元素。

通用选择器使用星号（*）。

例如，为所有元素设置边框：* {border: 1px solid black;}属性选择器：选择具有指定属性或属性值的元素。

例如，选择所有具有 "data-category" 属性的元素：cssCopy code[data-category] {font-weight: bold;}这只是一小部分CSS选择器表达式的示例。

选择器的组合和使用可以非常灵活，以满足不同的样式化需求。

CSS选择器是Web开发中非常强大和常用的工具，可以帮助你选择和样式化页面上的各种元素。

CSS选择器1.常用选择器常用的选择器有类型选择器和后代选择器。

1.1类型选择器类型选择器用来选择特定类型的元素。

可以根据三种类型来选择。

1）ID选择器，根据元素ID来选择元素。

前面以”#”号来标志，在样式里面可以这样定义：#demoDiv{color:#FF0000;}这里代表id为demoDiv的元素的设置它的字体颜色为红色。

我们在页面上定义一个元素把它的ID定义为demoDiv，如：<div id="demoDiv">这个区域字体颜色为红色</div>用浏览器浏览，我们可以看到因为区域内的颜色变成了红色再定义一个区域<div>这个区域没有定义颜色</div>用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜色还是默认的颜色黑色。

2）类选择器根据类名来选择前面以”.”来标志，如：.demoDiv{color:#FF0000;}在HTML中，元素可以定义一个class的属性。

如：<div class="demo">这个区域字体颜色为红色</div>同时，我们可以再定义一个元素：<p class="demo">这个段落字体颜色为红色</p>最后，用浏览器浏览，我们可以发现所有class为demo的元素都应用了这个样式。

包括了页面中的div元素和p元素。

上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那个一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。

我们可以改成这样来定义。

<div class="demo"><div>这个区域字体颜色为红色</div>同时，我们可以再定义一个元素：<p>这个段落字体颜色为红色</p></div>这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。

css怎么选择⽗元素下的某个元素？css可以通过⼀些选择器来实现选择⽗元素下某个元素的效果。

选择器有：:first-child p:first-child(first第⼀个 child⼦元素)(找第⼀个⼦元素为p):last-child p:last-child(last倒数 child⼦元素)(找倒数第⼀个⼦元素为p):first-of-type p:first-of-type(first第⼀个 type类型)(找第⼀个p):last-of-type p:last-of-type(last倒数 type类型)(找倒数第⼀个p):nth-child(n) p:nth-child(2)(2第⼆个 child⼦元素)(找第⼆个⼦元素为p):nth-last-child(n) p:nth-last-child(2)(last倒数 2第⼆个 child⼦元素)(找倒数第⼆个⼦元素为p):nth-of-type(n) p:nth-of-type(2)(2第⼆个 type类型)(找第⼆个p):nth-last-of-type(n) p:nth-last-of-type(2)(last倒数 2第⼆个 type类型)(找倒数第⼆个p):only-of-type span:only-of-type(only只有⼀个 type类型)(只有⼀个类型为span的):only-child p:only-child(only只有⼀个 child⼦元素)(只有⼀个⼦元素,这⾥只有⼀个那么那⼀个也只能是p了)效果测试html:<div><span>span</span><p>p1</p><p>p2</p><p>p3</p></div><div><p>p1</p><span>span</span><p>p2</p><p>p3</p></div><div><p>p1</p><p>p2</p><p>p3</p><span>span</span></div>p:first-child/*属于其⽗元素的⾸个⼦元素的每个 <p> 元素*//*先找p元素再找p的⽗元素下的第⼀个⼦元素为p的(first第⼀个 child⼦元素)(找第⼀个⼦元素为p)*/p:first-child {background-color: yellow;}p:last-child/*属于其⽗元素的最后⼀个⼦元素的 p 元素*//*先找p元素再找p的⽗元素下的倒数第⼀个⼦元素为p的元素(last倒数 child⼦元素)(找倒数第⼀个⼦元素为p)*/p:last-child {background-color: yellow;}p:first-of-type/*指定⽗元素的⾸个 p 元素*//*先找p元素再找p的⽗元素下的第⼀个p元素(first第⼀个 type类型)(找第⼀个p)*/p:first-of-type {background: #ff0000;}p:last-of-type/*指定⽗元素的最后⼀个 p 元素*//*先找p元素再找p的⽗元素下的倒数第⼀个p元素(last倒数 type类型)(找倒数第⼀个p)*/p:last-of-type {background: #ff0000;}p:nth-child(2)/*规定属于其⽗元素的第⼆个⼦元素的每个 p 的背景⾊：*//*先找p元素再找p的⽗元素下的第⼆个⼦元素为p(2第⼆个 child⼦元素)(找第⼆个⼦元素为p)*/ p:nth-child(2) {background: #ff0000;}p:nth-last-child(2)/*规定属于其⽗元素的第⼆个⼦元素的每个 p 元素，从最后⼀个⼦元素开始计数：*//*先找p元素再找p的⽗元素下的倒数第⼆个⼦元素为p(last倒数 2第⼆个 child⼦元素)(找倒数第⼆个⼦元素为p)*/p:nth-last-child(2) {background: #ff0000;}p:nth-of-type(2)/*规定属于其⽗元素的第⼆个 p 元素的每个 p：*//*先找p元素再找p的⽗元素下的第⼆个p元素(2第⼆个 type类型)(找第⼆个p)*/p:nth-of-type(2) {background: #ff0000;}p:nth-last-of-type(2)/*规定属于其⽗元素的第⼆个 p 元素的每个 p，从最后⼀个⼦元素开始计数：*//*先找p元素再找p的⽗元素下的倒数第⼆个p元素(last倒数 2第⼆个 type类型)(找倒数第⼆个p)*/ p:nth-last-of-type(2) {background: #ff0000;}span:only-of-type/*指定属于⽗元素的特定类型的唯⼀⼦元素的每个 p 元素*//*先找span 再找span的⽗元素下只有⼀个类型为span的元素(only只有⼀个 type类型)(只有⼀个类型为span的)*/span:only-of-type {background: #ff0000;}p:only-child/*规定属于其⽗元素的唯⼀⼦元素的每个 p 元素：*//*先找p 再找p的⽗元素下只有⼀个⼦元素(only只有⼀个 child⼦元素)(只有⼀个⼦元素,这是只有⼀个那么那⼀个也只能是p了)*/p:only-child {background: #ff0000;}。

css子绝父相理解的用法CSS子绝父相是前端开发中常用的一种布局方式，它的原理是通过给父元素设置相对定位，再将子元素设置为绝对定位来实现。

这种布局方式的出现，给网页设计带来了很大的便利性和灵活性。

在CSS子绝父相布局中，父元素使用相对定位（position: relative;）来设置元素相对于其正常位置进行定位。

这样，子元素可以通过设置绝对定位（position: absolute;）来相对于父元素进行定位。

通过调整子元素的left、right、top、bottom属性，我们可以控制子元素在父元素中的具体位置。

这种布局方式的使用非常灵活，可以根据具体需求进行不同的设置。

例如，我们可以通过设置父元素的宽度和高度，再配合子元素的定位属性，来实现自适应和固定大小的布局。

在移动端开发中，子绝父相布局也是非常常用的，可以实现响应式布局和适配不同屏幕尺寸的需求。

在进行CSS子绝父相布局时，一些注意事项需要我们遵守。

首先，我们需要确保父元素的position属性为relative，否则子元素的绝对定位将失效。

其次，子元素的position属性为absolute后，会脱离正常文档流，需要通过调整父元素的padding、margin等属性来保证布局的完整性。

另外，我们也需要注意在使用z-index属性时，确保正确设置元素的层级关系。

为了更好地理解CSS子绝父相布局的使用方法，我们可以通过实际案例来进行练习。

例如，我们可以创建一个包含多个子元素的父容器，使用子绝父相布局来实现元素的层叠效果。

我们可以通过设置子元素的z-index属性和定位属性，来控制元素显示的顺序和位置。

这样，我们可以轻松实现一个具有层次感的网页布局。

总的来说，CSS子绝父相布局是一种非常灵活和实用的布局方式，它在网页设计中有着广泛的应用。

通过灵活运用父元素的相对定位和子元素的绝对定位，我们可以轻松实现各种独特和复杂的布局效果。

在实际开发中，我们需要注意一些使用细节和注意事项，以确保布局的正确性和完整性。

通过子元素设置父元素样式兼容写法
在CSS中，我们可以通过子元素来设置父元素的样式。

但是需要注意的是，这种技巧并不总是100%可靠，因为它依赖于浏览器的特定规则。

以下是一个示例：
```css
.parent > .child {
color: red;
}
```
在上述代码中，所有直接属于`.parent`类的`.child`子元素都将有红色的文本。

但是，如果你想通过子元素来设置父元素的样式，你可能需要使用一些技巧。

例如，你可以使用`:has()`伪类选择器来选择具有特定子元素的父元素：
```css
.parent:has(.child) {
color: red;
}
```
然而，这种技巧并不兼容所有浏览器，因此你可能需要使用JavaScript或jQuery来实现这一目标。

以下是一个使用jQuery的示例：
```javascript
$(document).ready(function() {
if ($('.child').parent().hasClass('parent')) {
$('.parent').css('color', 'red');
}
});
```
在上述代码中，我们首先检查`.child`的父元素是否具有`.parent`类。

如果是，我们将`.parent`的文本颜色设置为红色。

这种方法是跨浏览器的，但需要使用JavaScript或jQuery。

CSS学习记录——⽗⼦元素和后代元素选择器<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>/*为div中的span设置绿⾊后代元素选择器：选中指定元素的指定后代元素语法：祖先元素后代元素{}*/div span{color: green;}/* 选中div元素中的p元素中的span元素 */div p span{font-size: 90px;}/* ⼦元素选择器选中指定⽗元素的制定⼦元素语法：⽗元素>⼦元素*/div>span{background-color: lightcoral;}div>p>span{background-color: lightseagreen;}/* 经常使⽤的是后代选择器 */</style></head><body><!-- 元素之间的关系⽗元素：直接包含⼦元素的元素注意：直接包含⼦元素：直接被⽗元素包含的元素⽗⼦元素是相对来说的祖先元素：直接或简介包含后代元素的元素后代元素：直接或间接被祖先元素包含的元素兄弟元素：拥有相同⽗元素的元素--><div><span>我是div元素中的span。

</span><p><span>我是p元素中的span。

</span></p></div><span>我是body元素中的span。

</span></body></html>。