CSS伪元素选择器

1.first-line　　选择文本的首行　　无视嵌套标签

比如：

div
111111
/div
div
p111111/
/div
style
div:first-line{
color:red;
}
/style

以上两个文本内容的颜色都会变成红色。

2.first-letter　　选择文本的首字母 无视嵌套标签

3.::selection 选择被用户选中的部分或者处于高亮状态的部分 不无视嵌套标签

举个例子：下面的例子中，只有aaaaa选中是才会变成我们定义的颜色。

div
aaaaa
pabc你和我 曾经有共同爱好/p
/div
style
div::selection{
height: 100px;
background: burlywood;
}
/style
4. :root　　　　根元素，相当于html
5. :empty　　　　元素为空
6. :only-child　　　　它的父元素只有它这么一个儿子。
举个例子：结果就是，p标签会被加上标签。
style
p:only-child{
width: 100px;
height: 50px;
border: 1px solid blue;
}
/style
div
aaaaa
pabc你和我 曾经有共同爱好/p
/div

7. ：first-of-type 选择第一个指定类型的子元素

比如6中的例子也可以这样写css。也就是选择p的父元素中的第一个p元素。

p:first-of-type{
width: 100px;
height: 50px;
border: 1px solid blue;
}
8. ：last-of-type　　　　　　选择最后一个指定类型的子元素
9. ：nth-of-type(n)　　　　　　选择特定类型的子元素　　　　n可以是数字、关键字、公式
10. ：nth-last-of-type()　　　　选择列表末尾中指定类型的子元素 和9相反，可以理解为倒着选择

CSS伪元素选择器 相关文章

2021-02-02 Python 初学笔记 - 第七章-HTML+CSS

目录 HTML 文档结构 常用标签 CSS 三种引用方式 内联式 内部式 外部式 选择器 标签选择器 组合选择器 类选择器 ID选择器 属性选择器 后代选择器 子代选择器 相邻选择器 伪类 伪元素 选择器权重 基本样式 字体属性 文本属性 继承性 清除默认样式 元素分类 disp

CSS布局

概述 CSS布局分为两个方面，一是盒子模型，二是定位机制。 盒子模型决定页面元素的大小，边框，与其它元素的距离。(元素什么样) 定位机制决定文档流，浮动定位和层定位。(元素放在哪) 盒子模型 组成 盒子模型由几部分组成，内容content，高度height，宽

CSS3 Flex Box 弹性盒子、弹性布局

目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align-self 8. 总结 1. 概要 Flexible Box翻译过来就是弹性盒子、弹性布局，是css3中新增的一种布局方式，是当页面需要适应不同的屏幕大小以

有趣的css—隐藏元素的7种思路

css隐藏元素的7种思路 前言 display 、 visibility 、 opacity 三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在于可访问性树中 display none 否 否 否 visibility hidden 否 否 是 opaci

CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content

一般地，有两种自适应：撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外，还新增了更细粒度的'min-content'和'max-content'。这几个值都可用在 width, height, min-width, min-height, max-width 和 ma

1743 LeetCode 1743. 相邻元素对还原数组 哈希

地址https://leetcode-cn.com/problems/restore-the-array-from-adjacent-pairs/ 存在一个由 n 个不同元素组成的整数数组 nums ，但你已经记不清具体内容。好在你还记得 nums 中的每一对相邻元素。给你一个二维整数数组 adjacentPairs ，大小为 n - 1 ，其中

less中使用js

首先，常规的使用 比如，在css通过js获取高度。参数的话，没有尝试在css传递参数，在js页面处理就好了 @height: `getHeight`; 比如，在css获取js里面的变量 @height: `xxx`; 现在，介绍一下遇到的问题： 因为要做菜单栏，可以收缩的那种。如下图： 希望在css

selenium元素定位陷阱规避

为什么selenium可以在各个浏览器上运行因为selenium在与各个浏览器驱动执行前，会先把脚本转化成webdriver, webdriver wire协议(一种json格式的协议)，这样就与脚本无关，其实都变成了同一个协议与浏览器driver执行。由此，selenium在UI自动化中占有举足轻

css的基本语法

!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titleCSS基本语法/title style /* CSS中的注释, 注释中的内容会自动被浏览器所忽略 CSS的基本语法 选择器 声明块 选择器, 通

css的简介和内联样式表,内部样式表,外部样式表

!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titleCSS简介/title style p{ color: aqua; font-size: 50px; } /style link rel="stylesheet" href="./style.css"/headbody