CSS3 —— 选择器（带你深入了解 CSS3 选择器）

一、常用选择器

通用兄弟元素选择器（ E~F ）：E 和 F 属于同一父元素之内，并且 F 在 E 之后，通用兄弟选择器会选择符合这样排列的所有的 F 元素。

    .test ~ p{background-color: red;}<div><p>1</p><p class="test">2</p><p>3</p><p>4</p><p>5</p></div><p>6 已脱离 div</p>

二、属性选择器

E[attr^="value"]：该选择器选择属性名为 attr ，属性值以 value 开头的元素。

 a[title^='test']{background: skyblue;}<a href="https://www.lanqiao.cn" title="test">title="test"</a><br /><a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br /><a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br /><a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />

E[attr$="value"]：该选择器选择属性名为 attr，属性值以 value 结尾的元素。

 a[title^='test']{background: skyblue;}<a href="https://www.lanqiao.cn" title="test">title="test"</a><br /><a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br /><a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br /><a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />

E[attr*="value"]：该选择器选择属性名为 attr，属性值包含 value 的元素。

 a[title*='test']{background: skyblue;}<a href="https://www.lanqiao.cn" title="test">title="test"</a><br /><a href="https://www.lanqiao.cn" title="testxxx">title="testxxx"</a><br /><a href="https://www.lanqiao.cn" title="xxtest">title="xxtest"</a><br /><a href="https://www.lanqiao.cn" title="xxx">title="xxx"</a><br />

三、伪类选择器

E:root：该选择器选择文档的根节点，效果和设置 html 相同。

 :root {background-color: skyblue;}// 等同于html{background: lightgreen;}

E:nth-child(n)：该选择器选择 E 元素父元素的第 n 个子元素。

n 取值为整数：子元素不一定是同种类型，只能取正整数

 p:nth-child(3){background-color: red;}<p>1</p><a href="">2</a><p>3</p><p>4</p>

n取值为表达式：取值为表达式时，选择器选择多个值，[n=0,1,2,3…]。当计算结果小于等于 0 或大于子元素总数时，不选取元素。

 p:nth-child(2n + 1){background-color: red;}<p>1</p><p>2</p><p>3</p><p>4</p>

 p:nth-child(even){background-color: red;}<p>1</p><p>2</p><p>3</p><p>4</p>

odd 相当于 2n+1。

even 相当于 2n。

E:nth-last-child(n)：从最后一个往前计数。

 p:nth-last-child(2n+1){background-color: red;}<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p>

E:nth-of-type()：该元素选择的是与 E 相同类型的兄弟元素。

 p:nth-of-type(2n+1){background-color: red;}<p>1th of ele,1th of p</p><p>2th of ele,2th of p</p><a href="https://www.lanqiao.cn">3th of ele,1th of a</a><p>4th of ele,3th of p</p><p>5th of ele,4th of p</p><p>6th of ele,5th of p</p>

.
5. E:last-child：该选择器选择 E 元素的父元素的最后一个子元素。

 p:last-child{color: red;}<p>第一个</p><p>第二个</p><p>第三个（最后一个）</p>

注意：该选择器需要满足父元素的最后一个元素和 E 匹配才会选取，否则不会选取。

 p:last-child{color: red;}<p>第一个</p><p>第二个</p><p>第三个（最后一个）</p><strong>真的最后一个</strong>

E:first-of-type：该选择器选择 E 元素父元素的子元素的第一个与 E 元素类型一致的元素。

 p:first-of-type{color: red;}<h3>好好学习(h3)</h3><p>第一个(p)</p><p>第二个(p)</p>

E:last-of-type：该选择器选择 E 元素父元素的子元素的最后一个与 E 元素类型一致的元素。

 p:last-of-type{color: red;}<h3>好好学习(h3)</h3><p>第一个(p)</p><p>第二个(p)</p>

E:only-child：该元素选择的是 E 是其父元素唯一的子元素。

 .div1{width:100px;border: 2px solid;}.div2{width:100px;margin-top: 10px;border: 2px solid;}p:only-child{background: red;}<div class="div1"><p>好好学习</p></div><div class="div2"><p>好好学习</p><p>天天向上</p></div>

E:only-of-type：该选择器选择的是 E 是其父元素唯一的子元素类型。

 .div1{width:100px;border: 2px solid;}.div2{width:100px;margin-top: 10px;border: 2px solid;}p:only-of-type{background: red;}<div class="div1"><p>好好学习</p></div><div class="div2"><p>好好学习</p><span>天天向上</span></div>

E:empty：该选择器选择的是空元素。

 p:empty{width:200px;height:20px;background-color: red;}<p>好好学习</p><p></p><p>天天向上</p>

E:target：该选择器选择的是一个 id 与当前 url 匹配的元素。

 :target {border: 2px solid;background: lightgreen;}<a href="#p1">jump to p1</a><br /><a href="#p2">jump to p2</a><p id="p1">p1</p><p id="p2">p2</p>

E:not(s)：该选择器匹配不符合参数选择器 s 描述的元素。

 .demo{color: lightblue;}p:not(.demo){color:lightcoral;}:not(.demo){color:lightgreen;}<p class="demo">hello world</p><p>好好学习</p><span>天天向上</span>

第一个否定伪类选择器选择了 class 不为 demo 的 <p> 元素，样式为红色；第二个否定伪类选择器选择了 class 不为 demo 的 <span> 元素，样式为绿色。

13.E:enabled & E:disabled：该选择器匹配的是元素的可用和禁用状态。

 input:enabled{background: pink;}input:disabled{background: lightgreen;}<input type="text" name="test1" placeholder="disabled(不可选中)" disabled="true"><br><input type="text" name="test2" placeholder="enabled(可选中)">

14. E:checked：该选择器一般用于 radio-button 或 checkbox，选择它们的 checked 状态。

 input[type='checkbox']:checked{margin: 100px;}<input type="checkbox" name="checkbox">

不积跬步无以至千里不积小流无以成江海

CSS3 —— 选择器（带你深入了解 CSS3 选择器）相关推荐

html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
伪元素选择器使用场景-字体图标(CSS3)
伪元素选择器使用场景-字体图标(CSS3) <!DOCTYPE html> <html lang="en"><head><meta cha ...
html伪类选择器结构,子元素伪类选择器 - CSS3 | 绿叶学习网
子元素伪类选择器,指的就是选择某一个元素下的子元素.伪类选择器,相信小伙伴也接触过了,最典型的就是超链接的几个伪类:a:link.a:visited.a:hover.a:active. 在CSS3中, ...
什么是css选择器？css3中5种常见的基本选择器-web前端教程
本章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一:什么是css选择器? CSS是一种用于屏幕上渲染html, ...
html 3d立体阴影效果图,CSS3打造带阴影的旋转3D图像
CSS3打造带阴影的旋转3D图像 Sponsor CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D旋转图像,效果很漂亮,这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计,使 ...
CSS3实现带阴影的弹球
实现div上下跳动时,底部阴影随着变化 <!DOCTYPE html> <html lang="en"> <head><meta char ...
CSS/HTML 5简洁带图标的input日期选择器
CSS/HTML 5简洁带图标的input日期选择器说明 css代码 html代码演示效果图说明演示效果分辨率为1980x1080分辨率效果高度可定制修改纯css代码控制使用的input ...
css3旋转带放大缩小效果
下载地址 css3旋转带放大缩小效果,鼠标悬停的时候触发放大或缩小并旋转的动画. dd:
基于Element-ui 封装带分页的下拉选择器组件
使用 Element-ui的 el-select组件时,如果下拉选项过多,一是查找选项困难,二是数据量超大(比如1w+)组件直接会卡死,所以考虑做一个带分页的下拉选择器(样式还可以再优化) 效果图组 ...

CSS3 —— 选择器（带你深入了解 CSS3 选择器）

一、常用选择器

二、属性选择器

三、伪类选择器

CSS3 —— 选择器（带你深入了解 CSS3 选择器）相关推荐

最新文章

热门文章