php li 选择器,基本选择器的用法: 属性, 兄弟, 类型, 伪类7.4

桃扇骨 2022-11-12 12:52 217阅读 0赞

选择器类型：

1.标签选择器  如 ul元素

/\*标签选择器\*/

ul\{

margin-top: 0;

margin-bottom: 0;

padding-left: 0;

border: 1px solid red;

\}

2.层级选择器 如 ul li  指的是UL的后代元素LI

ul li\{

list-style: none;

width: 40px;

height: 40px;

\}

3.ID选择器 如\#bg-bule

\#bg-blue \{

/\* 注意: id也可以给多个元素添加样式,但不要这样做 \*/

background-color: lightblue;

\}

4.类选择器 如 .bg-green

.bg-green \{

background-color: lightgreen;

\}

5.属性选择器     指定li元素下 ID属性=bg-bule

li\[id="bg-blue"\] \{

border: 2px solid red;

\}

6.组选择器    指定了 ID选择器\#bg-blue 和 类选择器.bg-green

\#bg-blue,.bg-green \{

border: 1px red solid;

\}

7.相邻选择器  用+号 表示

\#bg-blue + .bg-green \{

background-color: yellow;

\}

8.兄弟选择器,被选择元素后面所有的元素

\#bg-blue ~ \* \{

background-color: blueviolet;

\}

9.伪类：子元素选择器      子元素选择器的重点是 "child" 关键字上,关注的是子元素位置

ul :first-child \{

background-color: black;

\}

可以简化

ul :nth-child(3) \{

background-color: black;

\}

10.伪类：类型选择器    伪类 类型选择器关注点在 "type" 关键字上,重点是元素的类型ul li:last-of-type\{

background-color: blue;

\}

可以简化

ul li:nth-of-type(5) \{

background-color: yellow;

发表评论取消回复

表情：

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

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

相关阅读

相关伪类选择器

/ 作者：呆萌老师 ☑csdn认证讲师 ☑51cto高级讲师 ☑腾讯课堂认证讲师 ☑网易云课堂认证讲师 ☑华为开发者学堂

Myth丶恋晨/ 2024年04月07日 11:41/ 0 赞/ 113 阅读

相关属性选择器，伪类选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF

傷城~/ 2023年10月03日 22:54/ 0 赞/ 32 阅读

相关属性选择器，伪类选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF

谁践踏了优雅/ 2023年09月27日 13:38/ 0 赞/ 169 阅读

相关 CSS-高级选择器，后代选择器、交集选择器、并集选择器，伪类选择器的用法详解

常见的高级选择器有后代选择器、交集选择器、并集选择器后代选择器选择器之间用空格隔开就是后代选择器选择的是后代元素，不一定是儿子元素，后代选择器描述的是

妖狐艹你老母/ 2023年08月17日 16:30/ 0 赞/ 162 阅读

相关 css 基本选择器_层次选择器_结构伪类选择器_属性选择器_优先级_导入方式_字体样式_字体

1、CSS选择器标签选择器，选择一类标签，标签\{\} 类选择器 class，.类名\{\} id选择器，\id名\{\} 优先级：id选择器>class标签选择器

￡神魔★判官ぃ/ 2023年06月28日 08:49/ 0 赞/ 31 阅读

相关 CSS的复合选择器（后代选择器、子选择器、并集选择器、伪类选择器、链接伪类选择器、:focus伪类选择器）

文章目录 1 什么是复合选择器 2 后代选择器 3 子选择器 4 并集选择器 5 伪类选择器 6 链接伪类选择器 7 :focu

末蓝、/ 2022年11月17日 14:58/ 0 赞/ 340 阅读

相关 php li 选择器,基本选择器的用法: 属性, 兄弟, 类型, 伪类7.4

选择器类型： 1.标签选择器如 ul元素 /\标签选择器\/ ul\{ margin-top: 0; margin-bottom: 0; padding-lef

桃扇骨/ 2022年11月12日 12:52/ 0 赞/ 218 阅读

相关 CSS3 选择器——伪类选择器

前面花了两节内容分别在《[CSS3选择器——基本选择器][CSS3]》和《[CSS3选择器——属性选择器][CSS3 1]》介绍了[CSS3选择器][CSS3 2]中的基本选择

た入场券/ 2022年06月10日 05:24/ 0 赞/ 402 阅读

相关伪类选择器

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"/>

冷不防/ 2022年02月04日 13:49/ 0 赞/ 414 阅读

相关 CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器）

CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器） CSS选择器的使用 1. CSS基础选择器的使用 2

缺乏、安全感/ 2021年10月30日 01:01/ 0 赞/ 525 阅读