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

桃扇骨 2022-11-12 12:52 201阅读 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 条评论，201人围观）

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

相关阅读

相关伪类选择器

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

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

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

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

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

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

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

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

相关复合选择器——后代选择器，子选择器，并集选择器和伪类选择器

复合选择器复合选择器——后代选择器，子选择器，并集选择器和伪类选择器复合选择器是简历在基础选择器之上的，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目

╰+攻爆jí腚メ/ 2022年12月17日 04:27/ 0 赞/ 208 阅读

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

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

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

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

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

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

相关 CSS3练习之通用兄弟选择器、伪元素选择器

![20170115174553325][] 点击按钮出现各图片： ![20170115174631935][] <!doctype html> <

向右看齐/ 2022年07月11日 01:43/ 0 赞/ 278 阅读

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

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

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

相关伪类选择器

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

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

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

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

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