关于css选择器的一些事 第一章 基本选择器!

关于选择器,好多人小伙伴只用了最基本的几个选择器,感觉这玩意没有啥学的,讲道理,确实也没啥学的。但是,选择器种类掌握的越多,编写代码起来就会越轻松,为啥呢。举个例子吧!先上一串代码和效果,就知道我想表达什么了!

上面一个五列的li,代码如下

  

<style>
        *{margin:0;padding: 0;list-style: none}
        ul{display: flex}
        li{flex: 1;text-align: center;border-left: 1px solid red}
        li:nth-child(1){
            border-left:none
        }
    </style>
<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
</ul>

大家仔细看吗,这串代码是给所有的的li一个左边框一个1px的红线,然后在用一个选择器吧第一个li的左边的线给去掉!这样做是不是很麻烦,我们有个一个更简单的方式

*{margin:0;padding: 0;list-style: none}
ul{display: flex}
li{flex: 1;text-align: center;}
li:nth-child(n+2){border-left: 1px solid red}

我们仅仅需要把li:nth-child(n+2)(第二个以及往后的li)给予1px的border-left的红线,这样是不是就是很清晰呢?

甜头尝到了就开始重洗学习一个css的选择器吧!

我把css选择器分成分开成三大板块,我们依次学习,第一部分是我们是基本选择器;第二部分是属性选择器,第三部分伪类选择器!

第一部分,基本选择器

1.通配符选择器(*)

一般大家都是使用*{margin:0;padding:0}比较多吧,哈哈,通配符的意思就是所有元素,

比如:demo  *{color:yellow} 这个意思就是说demo下面所有的元素,字体都是黄色的!!

2.元素选择器

类似于这样子  h1{font-size:100px}   //意思就是说h1的字体为100px;

3.类选择器

这样子  .item{font-size:20px}    //意思就是说class="item"的元素字体大小都为20px;

  3-1.类选择器可以联合元素选择器一起使用,比如

    h1.item{color:red}     //类名为item的h1的元素都是红色

  3-2.类选择器与类选择器联合使用,比如

    item.tel{color:red}    //同时拥有类名 item 和 tel的元素字体为红色

    **如果元素有一个类名不存在,那么这个css样式也无法添加上去

4.id选择器

#item{ background:red }  //id为item的元素的背景颜色为红色

**不同于上面的选择器,id选择器是页面唯一一个值

5.后代选择器

p a{ color:red }    .//p元素下面的a字体颜色为红色

6.子代选择器

p>a{ color:red }    //p元素的所有子元素a颜色为红丝

**后代选择器和子代选择器的区别就是一个是后代选择器只要是后代都能被选中,而子代选择器必须是子代才可以,孙子,重孙都不行!

比如

<style>
        .box .item{
            color:red;
        }

        .box>.item{
            background: yellow
        }
</style>
<div class="box">
    <div class="box-samll">
        <div class="item">
                  哈哈
                </div>
    </div>
    <div class="item">
        呵呵
    </div>
</div>            

这段代码的效果这介样子

哈哈被这个item包裹拥有了color:red这个属性

但是呵呵则是拥有了color:red 和background:yellow;这个就不用说太细了,完全能理解了吧。

7.兄弟选择器 +

p+.item  { color:red } //意思跟在p后面的class名为item的元素(不是被p包含,是p后面一个元素!不是被p包含,是p后面一个元素!不是被p包含,是p后面一个元素!),有没有觉得用上这个选择器逼格满满。

8.莫慌,这个更有意思     通用兄弟选择器 ~

p~.item  意思就是p的所有class名为,item的元素 (只要是和p在同一个父级元素下面的所有的类名为item的元素)

9.群选择器

这个就是给懒人用的,哈哈(selector1,selector2,...,selectorN);

举个例子

.frist , .last, .item , #tel{ color:red }   //意思就是说,类名为.frist last item 和id为tel的所有元素字体都为红色

这九种就是基本选择器,但是6.7.8.9这四类选择器是不被ie6认可的,很尴尬,在ie6下面无法被识别,很尴尬是不是,但是,不识别就不识别呗,反正现在也不用兼容到ie6。

进本选择器讲完了,溜了,溜了!

时间: 2024-12-25 20:17:22

关于css选择器的一些事 第一章 基本选择器!的相关文章

产品经理的那些事第一章读书笔记

1.一个产品经理的信仰:好产品能改变世界. 2.为什么要做产品经理:因为热爱,改变世界的方法有很多,技术可以改变世界,好的产品也可以,当然还有其他,但我热爱产品,一件事只有热爱了,才能持续不断的去做好,所以我选择了产品经理这条路. 3.产品是什么:产品是用来解决某个问题的东西. 4.产品经理为何而设:想要更了解产品与它面临的竞争情况,最终目的是要满足顾客的需求. 5.产品经理概念的进化: 分析: 1)行业形态不同:成熟行业vs.新兴行业 ①传统行业 概况:经过几十年乃至上百年的摸爬滚打,市场已经

CSS那些事读书笔记:第一章

第一章: 1.学习CSS,最好的方法就是不断地做不断的想,不断的实践. 2.CSS语法结构主要由两部分组成:选择符和声明. 3.CSS中对于颜色的表现形式有四种 十六进制形式,如:p{color:#FF00FF}; RGB函数形式,如:p{color:RGB(135,0,224)}; 0%~100%之间的数字,数字一定是整数,如p{RGB(25%,0%,100%)}; 颜色名称,如p{color:red}; 用户系统色盘值,如,background windowtext,如:p{color:wi

【C语言探索之旅】 第一部分第四课第一章:变量的世界之内存那档事

内容简介 1.课程大纲 2.第一部分第四课第一章:变量的世界之内存那档事 3.第一部分第四课第二章预告:变量的世界之声明变量 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个游戏. C语言编程基础知识 什么是编程? 工欲善其事,必先利其器 你的第一个程序 变量的世界 运算符 条件表达式 循环语句 实战:第一个C语言小游戏 函数 练习题 习作:完善第一个C语言小游戏 C语言高级技术 模块化编程 进击的指针,C语言王牌 数组 字符串 预处理 创

关于CSS学习的第一章

1.CSS三种书写的方式:嵌入式.外链式.行内式 嵌入式就是将CSS写入在<style></style> 外链式将外面的CSS文件通过HTML中的标记链接过来:<link  rel="stylesheet"  type="text/css"  href="外部CSS文件的地址" /> 行内式:就是将CSS代码写在<标记  style="CSS代码" /> 2.CSS选择器:基本选

我的进阶--css3 第一章 选择器

css选择器 属性选择器 E[attr]:只使用属性名,但没有确定任何属性值: E[attr="value"]:指定属性名,并指定了该属性的属性值: E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔 开,其中词列表中包含了一个value词,而且等号前面的"~"不能不写: E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: E[attr$=&

Pro ASP.NET Core MVC 第6版 第一章

第一章 ASP.NET Core MVC 的前世今生 ASP.NET Core MVC 是一个微软公司开发的Web应用程序开发框架,它结合了MVC架构的高效性和简洁性,敏捷开发的思想和技术,和.NET 平台的最好的部分.在本章,我们将学习为什么微软创建ASP.NET Core MVC, 看看他和他的前辈的比较以及和其他类似框架的比较,最后,大概讲一下ASP.NET core MVC里面有什么新东西,还有本书中包括哪些内容. 了解ASP.NET Core MVC的历史 最开始的ASP.NET 诞生

第七章:选择器引擎

jQuery凭借选择器风靡全球,各大框架类库都争先开发自己的选择,一时间内选择器变为框架的标配 早期的JQuery选择器和我们现在看到的远不一样.最初它使用混杂的xpath语法的selector.第二代转换为纯css的自定义伪类,(比如从xpath借鉴过来的位置伪类)的sizzle,但sizzle也一直在变,因为他的选择器一直存在问题,一直到JQuery1.9才搞定,并最终全面支持css3的结构伪类. 2005 年,Ben Nolan的Behaviours.js 内置了闻名于世的getEleme

《图解CSS3——第一章 揭开CSS3的面纱》

第一章 揭开CSS3的面纱 如果关注前端方面的技术,那么对CSS一定不会陌生,你肯定听说过CSS3.在使用CSS3之前,应该对这个新一代语言样式表语言的来龙去脉有个基本了解. 1.1 什么是CSS3 CSS3并不是一门新的语言.如果接触过CSS就知道,CSS是创建网页的另一个独立但并非不重要的一部分.CSS是种层叠样式表,是一种样式语言,用来告诉浏览器如何渲染你的web页面. CSS3是CSS规范的最新版本 1.1.1 CSS3的新特性 CSS3新特性非常多,这里挑选一些被浏览器支持较为完美.更

《Django By Example》第一章 中文 翻译 (个人学习,渣翻)

书籍出处:https://www.packtpub.com/web-development/django-example原作者:Antonio Melé 2016年12月10日发布(没有进行校对,有很多错别字以及模糊不清的语句,请大家见谅) 2017年2月7日精校完成(断断续续的终于完成了第一章精校,感觉比直接翻译还要累,继续加油) 2017年2月10日再次进行精校(感谢大牛@kukoo的精校!) (译者注:本人目前在杭州某家互联网公司工作,岗位是测试研发,非常喜欢python,目前已经使用Dj