CSS选择器有哪些?

在CSS中给元素添加样式的时候,你是不是还是只会用类选择器:点(.),然后HTML里面重要不重要的标签里面全是密密麻麻的”class = xxx”;醒醒吧,不累么,手不累心也累了吧,这名字取一个也要想好久该取啥名吧。

下面给大家整理了一些选择器,记得搜藏点赞哦~


1、标签选择器

以标签名开头,选择所有div元素


2、类选择器

给标签取class名,以点(.)加class名开头,选择所有该class名的元素


3、id选择器

给标签取id名,以#加id名开头,具有唯一性,选择”id = ‘wrap’”的元素


4、子选择器

以>隔开父子级元素,(模块名>模块名,修饰>前模块内的子模块)


5、包含选择器

以空格隔开包含关系的元素,(模块名模块名,修饰空格前模块内所有该模块)



6、兄弟选择器

以~隔开兄弟关系的元素(模块名~模块名 修饰~前模块往下的所有兄弟模块)



7、相邻选择器

以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)



8、全局选择器

以*开头(星号标在大括号前,修饰了包含body所有的标签)


9、群选择器

以,分隔(逗号分隔开需要修饰的模块名)


10、属性选择器

[] ([type=text]修饰属性为type=text的模块)



11、伪类选择器

    (1) li:first-child{} (修饰第一个li)

修饰第一个li元素

    (2) li:last-child{} (修饰最后一个li)

修饰最后一个li元素

    (3) li:nth-child{} (修饰第()个li)


修饰第二个li元素

    (4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)

不修饰第一个li元素


关注获取更多福利~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,390评论 0 7
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,820评论 1 45
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,238评论 0 1
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,165评论 0 0
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,641评论 0 6