Web基本笔记~06.CSS选择器

上一期

关系选择器

后代选择器

定义

选择所有被 E 元素包含的 F 元素，中间用空格隔开

语法

E F{ }

例子

<html><head><title></title><meta charset="utf-8" /><style>ul li{color:green;}</style></head><body><ul><li>蛋糕</li> <li>面包</li> </ul> <ol><li>西瓜</li> </ol></body>
</html>

子代选择器

定义

选择所有作为 E 元素的直接子元素 F，对更深一层的元素不起作用，用 > 表示

语法

E>F{}

例子

<html><head><title></title><meta charset="utf-8" /><style>div>a{color:red}</style></head><body><div><a href="https://www.baidu.com/">子元素 1</a> <p> <a href="https://www.baidu.com/">孙元素</a> </p> <a href="https://www.baidu.com/">子元素 2</a> </div></body>
</html>

相邻兄弟选择器

定义

选择紧跟 E 元素后的 F 元素，用加好表示，选择相邻的第一个兄弟元素

语法

E+F{ }

例子

<html><head><title></title><meta charset="utf-8" /><style>h1+p{color:red;}</style></head><body><div><h1>one</h1> <p>two</p> <p>three</p></div></body>
</html>

伪类选择器

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

link “链接”：超链接点击之前（只适用于 a）

visited “访问过的”：链接被访问过之后（只适用于 a）

hover “悬停”：鼠标放到标签上的时候（适用于所有标签）

active “激活”：鼠标点击标签，但是不松手时。（适用于所有标签）

<html><head><title></title><meta charset="utf-8" /><style>/*让超链接点击之前是红色*/ a:link{ color:red; }/*让超链接点击之后是橘色*/ a:visited{ color:orange; }/*鼠标悬停，放到标签上的时候是绿色*/ a:hover{color:green; }/*鼠标点击链接，但是不松手的时候是黑色*/ a:active{ color:black; }</style></head><body><div><a href="https://www.baidu.com">百度一下，你就知道</a></div></body>
</html>

a:link 、a:visited 、a:hover 、a:active 是固定的顺序,如果顺序不对则会失效

first-child 选择器

定义

first-child 选择器匹配其父元素中的第一个子元素

实例

列表中的第一个 < li >元素选择的样式

li:first-child{ background:yellow; }

last-child 选择器

last-child 选择器用来匹配父元素中最后一个子元素。

p:last-child{ background:#ff0000; }

nth-child ()选择器

nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。 n 可以是一个数字，一个关键字，或者一个公式。

奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是 1）。在这里，我们为奇数和偶数 p 元素指定两个不同的背景颜色

p:nth-child(odd){background:#ff0000;
}
p:nth-child(even){background:#0000ff;
}

only-child 选择器

only-child 选择器匹配属于父元素中唯一子元素的元素

p:only-child{ background:#ff0000; }

first-of-type 选择器

first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。和 :nth-of-type(1) 是一个意思。

last-of-type 选择器

last-of-type 选择器匹配元素其父级是特定类型的最后一个子元素。

nth-last-child() 选择器

nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是一个数字，一个关键字，或者一个公式。

/*   指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色    */
p:nth-last-child(2) { background:#ff0000;}

nth-of-type() 选择器

nth-of-type(n)选择器匹配同类型中的第 n 个同级兄弟元素。n 可以是一个数字，一个关键字，或者一个公式。

/*指定每个 p 元素匹配同类型中的第 2 个同级兄弟元素的背景色*/
p:nth-of-type(2)
{background:#ff0000;
}

nth-last-of-type() 选择器

nth-last-of-type(n)选择器匹配同类型中的倒数第 n 个同级兄弟元素。n 可以是一个数字，一个关键字，或者一个公式。

p:nth-last-of-type(2)
{background:#ff0000;
}

empty 选择器

empty 选择器选择每个没有任何子级的元素（包括文本节点）

p:empty{background:#ff0000;
}

not() 选择器

not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

not(p){background:#ff0000;
}

focus 选择器

focus 选择器用于选择具有焦点的元素。

input:focus{background-color:yellow;
}

checked 选择器

checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

input:checked { height: 50px; width: 50px;}

selection 选择器

selection 选择器匹配元素中被用户选中或处于高亮状态的部分。

selection 只可以应用于少数的 CSS 属性：color, background, cursor,和 outline。Firefox 通过其私有属性 ::-moz-selection 支持。

::selection{ color:#ff0000;
}
::-moz-selection{ color:#ff0000;
}

另外还有伪对象选择器和属性选择器等也可以自行了解一下~

Web全栈~06.CSS选择器相关推荐

Web全栈~04.css入门
Web基本笔记~04.css入门上一期 CSS 的引入方式内联样式(行内样式) <p style="background: orange; font-size: 30px;&quo ...
Web全栈~05.CSS属性
Web基本笔记~05.CSS属性上一期背景属性在上一期字体属性 CSS 字体属性定义字体,加粗,大小,文字样式 color 规定文本的颜色 <html><head>< ...
php web教程视频教程下载,Web全栈 PHP+React系列视频教程下载
Web全栈 PHP+React系列视频教程下载课程介绍: 此套Web全栈 PHP+React系列视频教程覆盖PHP.前端和区块链应用开发三大热门职位,教程对网络基础.前端基础(HTML CSSJav ...
《Web全栈工程师的自我修养》读书笔记
<Web全栈工程师的自我修养>读书笔记 [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://w ...
苏州木渎计算机课程培训,苏州木渎H5/web全栈开发培训
课程名称:H5/web全栈开发课程类型:网页设计班型:全日制/周末班/晚班适用校区:全校区课程详情: 由于网络的发展以及人们使用网络的频繁性,企业需要通过网页呈现产品.服务.理念.文化,或向大 ...
小白都能看懂的实战教程手把手教你Python Web全栈开发(DAY 1)
小白都能看懂的实战教程手把手教你Python Web全栈开发 Flask(Python Web)实战系列之在线论坛系统第一讲博主博客文章内容导航(实时更新) 更多优质文章推荐: 收藏!最详细的P ...
《web全栈工程师的自我修养》阅读笔记
在买之前以为这本书是教你怎么去做一个web全栈工程师,以及介绍需要掌握的哪些技术的书,然而看的过程中才发现,是一本方法论的书.读起来的感觉有点像红衣教主的<我的互联网方法论>,以一些自己的 ...
开课吧python全栈靠谱么-杭州Web全栈
Web全栈招生简章开课吧简介开课吧,中国有口皆碑的互联网人学习平台,为互联网从业者及潜在从业者提供O2O职业学习.就业.职业成长服务,让学习者收获互联网从业技能和能力,从而实现从"校园& ...
Web全栈工程师技能树梳理
FSE-SKILL-TREE Web全栈工程师技能树梳理各个分支正在细化中,欢迎Star.PR. 点击链接加入群[Web全栈QQ群]:https://jq.qq.com/?_wv=1027& ...

Web全栈~06.CSS选择器