css中not选择器的妙用

2024-10-25

css小技巧：:not()选择器的妙用

比如,要实现下面的效果(例如:一个列表的最后一项没有边框): See the Pen gmrGOV by 杨友存 (@Gavin-YYC) on CodePen. 一般的文档结构如下:  <ul class="posts"> <li class="post"> <a href="/link-to-post/" t

CSS中的选择器之类选择器和id选择器

1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代选择器) 简单来说,选择器就是在css中创建,而在网页页面(html,jsp,php,asp.net)中使用选择器的名称命名规范: 一般使用中划线形式:xxx-yyy,一般是小写字母 2.类选择器基本语法: .类选择器名称{ CSS属性:属性值; CSS属性:属性值; } 一般来说,类选择器是提

css中:not()选择器和jQuery中.not()方法

因为老是将这两个的not方法弄混,所以写一下备忘. css中:not()选择器用法 :not 伪类选择器可以筛选不符合表达式的元素,:not(selector) 其中的selector为css选择器 ul li:not(:first-child) ul li:not(.text) //不包含class="text"的元素 :not(p) //非段落元素 ul li:not(:first-child):not(:last-child) //not可叠加使用 jQuery中.not()方法

CSS中content属性的妙用

前言本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容. 该属性用于定义元素之前或之后放置的生成内容.默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制. 在前端日常开发中,content属性使用频率并不高,所以开发者一般对它的理解并不深入,通常会在清除

CSS中的选择器(笔记)

1.通配符选择器(*):通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素.所有浏览器都支持通配符选择器. ;;} .dome *{padding: 2px;} 2.元素选择器(Ele):元素选择器是css选择器中最常见而且最基本的选择器,元素选择器其实就是文档的元素,如html.body.div等.所有浏览器都支持元素选择器. li{color:#ddd;} 3.类选择器(.className):类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要保证在html标记中

css中的选择器

选择器说明 * 通用元素选择器,匹配任何元素 E 标签选择器,匹配所有使用E标签(所有HTML元素)的元素 .info class选择器,匹配所有class属性中包含info的元素 #footer id选择器,匹配所有id属性等于footer的元素多元素的组合选择器选择器说明 E,F

CSS中的选择器（一）

API文档:http://css.cuishifeng.cn/all.html 1. 通配选择符(*) 语法: * { sRules } 说明: 通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用兼容性: IE6及更早浏览器并不支持通配选择符(*),而是将它忽略了,所以也变相的能看到效果. 2. 类型选择符(E) 语法: E { sRules } 3. ID选择符(E#id) 语法: E#myid { sRules } 4. 类选择符(E.class) 语法

CSS中选择器优先级与!important权重使用

CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重值优先级最高的,大于所有的选择器. 标签选择器和.class选择器让我们进入标签选择器和.class选择器谁的优先级高实践,实践内容如:将HTML页面中的h2标签设置文本颜色. 代码块 <!DOCTYPE html> <html lang="en"> <he

css3笔记系列-3.css中的各种选择器详解，不看后悔系列

点击上方蓝色字体,关注我最详细的css3选择器解析选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 看代码,元素选择器就是这个: h1作为一个元素标签,是最基本的选择器,这样可以对h1标签设置属性. 选择器有哪些? 常见的选择器:元素选择器,类选择器,ID选择器,属性选择器,派生选择器,本文的思路就是先讲讲最常用的选择器,再讲讲用得比较少的选择器.如果你觉得能学到

css中的继承、层叠、样式优先级机制

一.继承与层叠:

HTML5中class选择器属性的解释

设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id正好相反,id属性一般建议少用,在小型网站中页面元素不多的情况下我们推荐是id,而在大众型网站我们推荐使用class 如: <div id="box">HTML5</div> 复制代码 class选择器 <div class="box"&g

纯html+css中实现静态选座位效果技巧（input+label使用小技巧）

很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下或者同级向下选中,而不能向上选中,这样就对于想控制前面样式的时候带来麻烦.input+label关联的方式即可实现,因为input和label是通过id值来进行关联的,而html中规定了,id值必须唯一,那么我将input放置在html的body下的任意位置,均可实现关联,所以为了实现后方代码控制前

CSS基础--属性选择器、伪类选择器

属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .red{ color: red; } .blue{ color: blue; } .darkred{ color: darkred; } .blueviolet{ color:bluevi

1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格

什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素样式通常存储于样式表中,外部样式表通常存储在CSS文件中多个样式定义可层叠为1,样式对网页中元素位置的排版进行像素级精确控制对于同一个HTML元素,样式级别升序如下所示: 浏览器缺省设置外部样式表内部样式表(位于head标签内部) 内联样式(在HTML元素内部,优先级最高) CSS语法: css语法构成: 选择器,通常是需要改变样式的HTML元素一条或者多条声明,每条声明由一个属性和一

妙味css3课程---1-1、css中自定义属性可以用属性选择器么

妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=text]{background-image:url(img/text.gif);}

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s

CSS中模拟父元素选择器

很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了. HTML: <div id="box"> <p>pppppppp</p> <span></span> </div> CSS: div,p{ margin:0; padding:0; } #box{

css中的7中属性选择器

在CSS的选择符中有七个属性选择符.它们分别是: 1.E[att] 选择具有att属性的E元素. 2.E[att="val"] 选择具有att属性且属性值等于val的E元素. 3.E[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素. 4.E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素. 5.E[att^=&quo

CSS中选择器优先级顺序实战讲解

原文:CSS中选择器优先级顺序实战讲解我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也遇到同样的问题,即在给某一元素应用样式的时候(比如写在外部样式表中),写在后面的样式不能覆盖前面定义的样式.这个时候,你可能就得考虑是不是没考虑优先级问题了. 当我们在给一个标签,比如div应用样式的时候,我们得考虑优先级问题. 下面列出的就是是选择器的优先级: 行内样式 > ID选择器

css中最基本几个选择器

css中有四种不同的选择器 ①类选择器,又叫class选择器.类选择器{属性名:属性值:...}/*类选择器*/.s1{ font-weight:bold;font-size:16px;}②id选择器#id选择器名{属性名:属性值;}/*id选择器*/#id1{ font-size:40px;}③html元素选择器html元素名称{属性名:属性值;}④通配符选择器检索或设置对象四边的外补丁.默认值为 0 0.如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边.如果只提供一个,将用于全部

css中那些容易被我们程序猿所忽略的选择器

css中那些容易被我们程序猿所忽略的选择器作为一个程序猿,我们可能会遇到这样的问题,假如:有5个li,要求给第三个li设置背景颜色怎么办?有人会说,用JS啊,循环遍历出第三个不就行了.但是,用JS解决一个属于CSS样式的小问题,不觉得特别麻烦吗? 再举一个例子:现有5个input标签,给属性为disabled的input设置背景怎么办?还是用js循环对吧,不过就是太麻烦.如果不用js,那应该怎么办?那么,今天在就来介绍一下那些容易被我们遗忘的css选择器: 看了这个表格之后,我们再回过头来看下

css中not选择器的妙用

热门专题