CSS常用的选择器，web开发视频教程

最新推荐文章于 2024-06-13 02:48:16 发布
最新推荐文章于 2024-06-13 02:48:16 发布
阅读量526 收藏 29
点赞数 7
分类专栏： 2024年前端程序员 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61549674/article/details/136820357
版权
  • Opera

10. X[title]

a[title] {

color: green;}

这个叫属性选择器，上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。那再想想如果你想更加具体的去筛选？那…

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

11. X[href=“foo”]

a[href=“http://strongme.cn” rel=“external nofollow” target=“_blank” ] {

color: #1f6053; /* nettuts green */}

上面这片代码将会把 href 属性值为[http://strongme.cn]( )的锚点标签设置为绿色，而其他标签则不受影响。

注意我们将值用双引号括起来了。那么在使用 Javascript 的时候也要使用双引号括起来。可以的话，尽量使用标准的 CSS3 选择器。

这样可以用了，但是还是有点死，如果不是这个链接，而是类似的链接，那么这时就得用正则表达式了。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

12. X[href=“strongme”]

a[href=“strongme”] {

color: #1f6053;}

Tada,正是我们需要的，这样，就指定了strongme这个值必须出现在锚点标签的href属性中，不管是strongme.cn还是strongme.com还是www.strongme.cn都可以被选中。

但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是strongme相关的站点，如果要更加具体的限制的话，那就使用^和$，分别表示字符串的开始和结束。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

13. X[href^=“href”]

a[href^=“http”] {

background: url(path/to/external/icon.png) no-repeat;

padding-left: 10px; }

大家肯定好奇过，有些站点的锚点标签旁边会有一个外链图标，我也相信大家肯定见过这种情况。这样的设计会很明确的告诉你会跳转到别的网站。

用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头。如果我们想定位锚点属性href中以http开头的标签，那我们就可以用与上面相似的代码。

注意我们没有搜索​http://​，那是没必要的，因为它都不包含​https://​。

那如果我们想找到所有指向一张图片的锚点标签呢？那我们来使用下&字符。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

14. X[href$=“.jpg”]

a[href$=“.jpg”] {

color: red; }

这次我们又使用了正则表达式$，表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接，或者其它链接是以.jpg结尾的。但是记住这种写法是不会对gifs和pngs起作用的。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

15. X[data-*=“foo”]

a[data-filetype=“image”] {

color: red;}

在回到第8条，我们如何把所有的图片类型都选中呢png,jpeg,’​jpg​’,'​gif​’？我们可以使用多选择器。看下面：

a[href$=“.jpg”],

a[href$=“.jpeg”],

a[href$=“.png”],

a[href$=“.gif”] {

color: red; }

但是这样写着很蛋疼啊，而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性data-filetype指定这个链接指向的图片类型。

[html]

Image Link 那有了这个钩子，我们就可以去用标准的办法只去选定文件类型为image的锚点了。

a[data-filetype=“image”] {

color: red; }

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

16. X[foo~=“bar”]

a[data-info~=“external”] {

color: red; }

a[data-info~=“image”] {

border: 1px solid black; }

这个我想会让你的小伙伴惊呼妙极了。很少有人知道这个技巧。这个~符号可以定位那些某属性值是空格分隔多值的标签。

继续使用第15条那个例子，我们可以设置一个data-info属性，它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。

Click Me, Fool

给这些元素设置了这个标志之后，我们就可以使用~来定位这些标签了。

/ Target data-info attr that contains the value “external” /

a[data-info~=“external”] {

color: red;}

/ And which contain the value “image” /

a[data-info~=“image”] {

border: 1px solid black;}

17. X:checked

input[type=radio]:checked {

border: 1px solid black; }

上面这个伪类写法可以定位那些被选中的单选框和多选框，就是这么简单。

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

18. X:after

before和after这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。

当使用.clear-fix技巧时许多属性都是第一次被使用到里面的。

.clearfix:after {

content: “”;

display: block;

clear: both;

visibility: hidden;

font-size: 0;

height: 0;

}

.clearfix {

display: inline-block;

_height: 1%;

}

上面这段代码会在目标标签后面补上一段空白，然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当overflow:hidden方法不顶用的时候，这招就特别管用了。

根据 CSS3 标准规定，可以使用两个冒号::。然后为了兼容性，浏览器也会接受一个双引号的写法。其实在这个情况下，用一个冒号还是比较明智的。

兼容性

  • IE8+

  • Firefox

  • Chrome

  • Safari

  • Opera

19. X:hover

div:hover {

background: #e3e3e3; }

不用说，大家肯定知道它。官方的说法是user action pseudo class.听起来有点儿迷糊，其实还好。如果想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法可以办到。

注意旧版本的IE只会对加在锚点a标签上的:hover伪类起作用。

通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。

a:hover {

border-bottom: 1px solid black;

}

专家提示：​border-bottom:1px solid black​;比​text-decoration:underline​;要好看很多。

兼容性

  • IE6+(IE6只能在锚点标签上起作用)

  • Firefox

  • Chrome

  • Safari

  • Opera

20. X:not(selector)

div:not(#container) {

color: blue;

}

取反伪类是相当有用的，假设我们要把除id为container之外的所有div标签都选中。那上面那么代码就可以做到。

或者说我想选中所有出段落标签之外的所有标签。

:not§ {

color: green;

}

兼容性

  • IE9+

  • Firefox

  • Chrome

  • Safari

  • Opera

21. X::pseudoElement

p : : first-line {

font-weight: bold;

font-size:1.2em;

}

我们可以使用::来选中某标签的部分内容，如第一段，或者是第一个字没有。但是记得必须使用在块式标签上才起作用。

伪标签是由两个冒号 ​::​ 组成的。

定位第一个字

p::first-letter {

float: left;

font-size: 2em;

font-weight: bold;

font-family: cursive;

padding-right: 2px;

}

上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。

它通常在一些新闻报刊内容的重点突出会使用到。

定位某段的第一行

p::first-line {

font-weight: bold;

font-size: 1.2em;

}

跟::first-line相似，会选中段落的第一行 。

为了兼容性，之前旧版浏览器也会兼容单冒号的写法，例如:first-line,:first-letter,:before,:after.但是这个兼容对新介绍的特性不起作用。

兼容性

  • IE6+

  • Firefox

  • Chrome

  • Safari

  • Opera

22. X:nth-child(n)

li:nth-child(3) {

color: red;

}

还记得我们面对如何取到推跌式标签的第几个元素是无处下手的时光么，有了nth-child那日子就一去不复返了。

请注意nth-child接受一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是li:nth-child(2).

我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用li:nth-child(4n)去每隔3个元素获取一次标签。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {

color: red;

}

假设你在一个ul标签中有N多的元素，而你只想获取最后三个元素，甚至是这样li:nth-child(397)，你可以用nth-last-child伪类去代替它。

这个技巧可以很正确的代替第16个TIP，不同的就是它是从结尾处开始的，倒回去的。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

  • Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {

border: 1px solid black;

}

曾几何时，我们不想去选择子节点，而是想根据元素的类型来进行选择。

想象一下有5个ul标签。如果你只想对其中的第三个进行修饰，而且你也不想使用id属性，那你就可以使用nth-of-type(n)伪类来实现了，上面的那个代码，只有第三个ul标签会被设置边框。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {

border: 1px solid black;

}

同样，也可以类似的使用nth-last-of-type来倒序的获取标签。

兼容性

  • IE9+

  • Firefox3.5+

  • Chrome

  • Safari

  • Opera

26. X:first-child

ul li:first-child {

border-top: none;

}

这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。

假设有个列表，每个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

27. X:last-child

ul > li:last-child {

color: green;

}

跟first-child相反，last-child取的是父标签的最后一个标签。

例如

标签

List Item

List Item

List Item

这里没啥内容，就是一个了 List。

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img
img
img
img

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
img

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

用这个伪类来处理这种情况了。

兼容性

  • IE7+

  • Firefox

  • Chrome

  • Safari

  • Opera

27. X:last-child

ul > li:last-child {

color: green;

}

跟first-child相反，last-child取的是父标签的最后一个标签。

例如

标签

List Item

List Item

List Item

这里没啥内容，就是一个了 List。

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-pJ4HwNh7-1710764316683)]
[外链图片转存中…(img-fXH3kjL2-1710764316683)]
[外链图片转存中…(img-PDC0StUi-1710764316684)]
[外链图片转存中…(img-BTVuDY94-1710764316684)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-eoNhKhSm-1710764316685)]

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

美好前端开发者
关注
  • 7
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
写给Web开发人员看的HTML5教程,响应式Web开发项目教程（HTML5+CSS3+Bootstrap）
weixin_33216916的博客
06-05 1834
内容简介互联网的世界离不开前端开发，大前端时代最大的特点在于一次开发，同时适用多个平台，可以说是Web统一的时代。本书将当前热门响应式Web开发与HTML5和CSS3完美的结合起来，以项目为导向，深刻且通俗地揭示了Web前端开发的内幕。全书共8个单元，详细讲解了HTML5、CSS3、JavaScript基础、响应式Web设计、Bootstrap等技术的应用。第1单元从宏观角度介绍了响应式Web开发...
Web 开发都需要学什么？
Duiz33237的博客
12-04 1859
常见的web开发技术包括HTML、CSS和JavaScript。HTML用于创建网页的结构，CSS用于样式和布局，而JavaScript用于实现交互和动态效果。此外，还有许多其他的编程语言和框架，如Python、PHP、Ruby、React、Angular等，用于开发不同类型的web应用程序。 web开发的过程通常包括需求分析、设计、开发和测试。需求分析阶段涉及确定网站或应用程序的功能和目标用户。设计阶段包括创建网站的布局、用户界面和交互设计。开发阶段涉及编写代码并实现所需的功能。
CSS基础1——选择器&字体和文本样式
moneyhu的博客
04-28 782
本节笔记整理了CSS中标签、类、id、通配符、复合、并集、交集、伪类选择器的使用方法，并针对字体和文本常见样式属性做了归纳。
【黑马程序员】5、学成在线网页制作_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-15 2822
网站根目录：存档网站的第一层文件夹，内部包含当前网站的所有素材。
CSS3新增选择器及用法详细介绍
178技术
09-29 3707
目录 CSS属性选择器 E[att^=value]属性选择器 E[att$=value]属性选择器 E[att*=value]属性选择器 CSS3关系选择器 CSS3子代选择器(>) CSS3结构伪类选择器 :root选择器 :not选择器 :only-child选择器 :first-child和:last-child选择器 :nth-child(n)和:nth-last-child(n)选择器 :nth-of-type(n)和:nth-last-of-type(n)选择..
前端html5 css3 教案,Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）
weixin_32743045的博客
06-21 1832
本书以“采用网页新标准技术、突破传统知识体系结构、基于工作能力培养、置身真实工作情境”为标准，通过任务驱动的教学方式讲解HTML5、CSS3、JavaScript等Web前端开发技术。本书包含“8个知识单元、18个项目任务、36个实战案例、18个课后实训”，每个项目任务又以“知识准备→实战演练→强化训练→课后实训”为主线，介绍了Web基础知识、HTML5语言基础、HTML5新增标签及属性、CSS3...
CSS伪元素选择器
歪脖先生的博客
01-11 1215
伪元素选择器 伪元素选择器，并不是基于真正的元素，而是基于元素当前所具有的特性来选取元素。由于这些元素本身并不存在于文档中，只是基于元素的抽象，因此称作伪元素。 伪元素选择器是CSS 中已经定义好的选择器，不能由用户随便起名，只能按CSS规定的标准格式使用。语法格式为： 选择器:伪元素 { 属性: 值 } 伪元素选择器在CSS中一直存在，但CSS3对伪元素进行了一定的调整，
《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录
放下华子我只抽RuiKe5的博客
09-23 983
本文是对《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》所有知识点的笔记进行总结分类。 学习时总结的目录笔记以及思维导图和实训，将在后续更新。
自学也能学得会的《零基础入门学习Web开发》（HTML5 & CSS3）
人邮异步社区
02-23 1571
1 Web开发是什么 很多读者可能还不明白，Web开发到底是什么。 其实，我们所说的Web开发通常相当于前端开发与后端开发的组合。 前端开发主要通过HTML、CSS、JavaScript. AJAX、DOM等技术实现网站在客户端的显 示和交互功能；后端开发主要通过Java、PHP、Python和Node.js等技术对从前端页面传输来 的数据进行处理，按照需要将数据存入数据库，或者通过模板引擎来处理数据，接着以变量的 方式将其展示到页面模板上，最终输出页面到浏览器并进行渲染。 简单地说，前端开发用于构
Delphi Web前端开发教程（1）：基于TMS WEB Core框架
Delphi开发局QQ群:32422310
05-20 5042
目录 Delphi WEB开发框架简介............................................................... 23 Delphi开发的部分应用软件App展示..................................................... 25 Delphi/Object Pascal的历史与现状.................................................... 40 Delp...
2018mui教程 mui实战视频教程 web移动端开发教程+源码
12-13
2018mui教程 mui实战视频教程 web移动端开发教程+源码 课程简介： ... ... 课程目标： ...适用人群本课程适合具有HTML与CSS基础，了解HTML5及CSS3，并想跨入...微信实战-结合MUI框架完成HTML5移动端混合应用开发视频教程
2020年全新CSS3视频教程.txt
05-31
2020年全新【CSS3视频教程】，是由锐锋堂推出的wordpress网站开发视频教程的一个系列，主要针对web前端页面开发的CSS代码的详细讲解：CSS选择器的使用、2D和3D变形属性的使用、弹性布局的使用等等。课程几乎囊括了...
超经典的Web前端与移动开发基础视频 Web前端基础开发视频教程 移动开发基础视频教程
08-20
57前端开发基础视频-复合选择器之标签指定式选择器.avi 58前端开发基础视频-复合选择器之后代选择器.avi 59前端开发基础视频-复合选择器之并集选择器.avi 60前端开发基础视频-复合选择器之子元素选择器.avi 61...
前端开发全套学习教程包括视频+源码+项目实战
04-10
前端开发学习也是一样的从简单的基础的知识点开始慢慢积累，首先就是掌握前端语言的基础知识3大部分（HTML、CSS、页面制作工具）其中包含了元素和属性、表单和图形处理、CSS基本语法与选择器、文本、边框、轮廓与...
HTML5+CSS3网站布局应用教程 (赵振方) 随书光盘
12-21
同时还详细介绍CSS 3的相关知识，包括新增选择器、文字与字体样式、颜色样式、盒样式、背景与边框样式、变形处理、多媒体和动画等内容。《HTML5+CSS3网站布局应用教程》语言通俗易懂，案例丰富多彩，知识全面、指导...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 550
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 284
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Harmony 开发的艺术 面向对象
最新发布
不懂先生的博客
06-13 1050
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 361
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
web css选择器
03-09
CSS选择器是一种用于选择HTML元素的模式。它们允许您根据元素的标签名、类名、ID、属性等来选择元素，并为...这只是一小部分常见的CSS选择器，还有其他更多的选择器可以用于更精确地选择元素。希望这些信息对您有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值