CSS3高级选择器变量

2024-08-28

CSS3高级选择器

CSS3中添加了一些新的选择器与之前的不同这些选择器有些类似于jquery的选择器能够让我们更高的操作DOM 废话不多说为了更直观的了解我们以这段为实例来进行操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

在上个星期我介绍了css3的属性选择器,伪类选择器和结构伪类选择器,今天楼主继续把其它的css3选择器说完. 在css3中,共有11中UI状态伪类选择器,分别是E:hover,E:active,E:focus,E:enabled,E:disabled,E:read-only,E:read-write,E:checked,E:default,E:indeterminate及E::selection我们来看下这11种选择器被浏览器的支持的情况一,选择器E:hover,E:active,E:focu

css3的那些高级选择器一

css大家都不陌生了,从1996年12月css1正式推出,经历了1998年5月css2,再到2004年2月css2.1,最后一直到2010年推出的css3.css的推出给web带来巨大的改变,使我们的网页样式多变,丰富多彩.现在所使用的css基本上是在1998年推出的css2的基础上发展而来的. 技术是发展的,2010年css3的推出,给我们带来许多亮点,比如可以创建圆角边框,可以在边框上使用图像等等.我也是被它这些新的样式所吸引.自己也一边看一边学习,只是有新样式在部分浏览器是不支持的,但

JQuery_高级选择器

在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery 兼容,这些选择器的使用频率也越来越高. 1.层次选择器在层次选择器中,除了后代选择器之外,其他三种高级选择器是不支持 IE6 的,而 jQuery却是兼容 IE6 的. 1.后代选择器 <script type="text/javascript" src="jquery

jquery学习（3）--高级选择器

自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/---高级选择器:ie7+ 层次选择器: 后代选择器 ul li a $('ul li a') 获取追溯到的多个dom对象 ie6+=子选择器 div>p $('div p') 只获取子类节点的多个dom对象 ie7+next选择器 div+p{} $('div+p'

python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

一.HTML中的行级标签和块级标签块级标签常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body100%宽度行级标签常见的行级标签:a,span,strong,u,em 1.能和其他元素待在同一行2.不能设置宽高3.宽高是内容的宽高行内块标签常见的行内块标签:img,input,textarea1.能和其他元素待在一行2.能设置宽高 span默认是不能设置宽高的,但是设置了displ

python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器

一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签独占一行可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显示,不能放置容器类(块)的盒子 (4)宽高不能设置 (5)宽高跟span的内容相关 a: (1)文本级标签 (2)不能设置高和宽 (3)超链接href:连接资源 title 鼠标的悬浮时的标题跳转顶部top: <div id= 'top'> <div> ....... <a h

day40 css高级选择器

一.高级选择器高级选择器分为:后代选择器.子代选择器.并集选择器.交集选择器后代选择器使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{ color: red; } .container .item p{ color: yellow; } 子代选择器使用>表示子代选择器.比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p. .container>p{ color: yellowgreen; } 并集选

CSS系列：CSS3新增选择器

1. CSS1定义的选择器选择器类型说明 E 类型选择器选择指定类型的元素 E#id ID选择器选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略. E F 包含选择器选择匹配F的元素,且该元素被包含在匹配E的元素内. E:link 链接伪类选择器选择匹配E的元素,且匹配元素被定义了超链接并未被访问.例:a:link E:visited 链接伪类选择器选择匹配

CSS3常用选择器（三）

在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.active 和 checked <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3选择器</title> <style type=&q

CSS3 ::selection选择器

一.介绍之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> .selectColor::selection{color:#fff;background:pink;} .selectColor::-moz-selection{color:#fff;background:pink;} .selectColor::-webkit-selection{color:#fff;

CSS3属性选择器与(:not)选择器

一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代码: img[alt="atwi_oscar"]{ border:2px dashed #000; } css3的子字符串匹配属性选择器 (1)‘匹配开头’的属性选择器依法如下: Element[attribute^="value"],实例代码如下: img[a

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页. CSS3属性选择器下面是CSS3的属性选择器的语法,及使用. 元素名字[元素类型=“类型名字”]:选择器名字{ 属性:值: 属性:值: } 在元素类型匹配时,就可以使用类似正则的匹配方法. [

CSS3之选择器

总结了下CSS3新增的一些选择器. CSS3的选择器有基本选择器.属性选择器.伪类选择器几类. CSS3选择器选择器举例例子描述 element1~element2 p~a 选择前面有 <p> 元素的每个 <a> 元素. [attrtube^=value] a[src^="http"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素. [attrtube$=value] a[src$=".pdf

CSS3 :nth-child() 选择器

CSS3 :nth-child() 选择器代码: <!DOCTYPE html> <html> <head> <style> p:nth-child(2) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落.</p> <p>第二个段落.</p> <p>

css3属性选择器总结

前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com/thomascui/p/5252805.html 以字符串开头对比实例讲解链接:http://www.cnblogs.com/thomascui/p/5241229.html 现在将css3中剩余的属性选择器做个简单介绍: 1. [attribute]与[attribute=value]没什么特殊

清除系统默认样式，文本样式,高级选择器(权重),边界圆角，a标签的四大伪类，背景图片

清除系统默认样式大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; padding:; list-style:none; #清除列表样式 } a { text-decoration:none; #清除a标签下划线 color:black; # 设置a标签字体颜色 } 文本样式简写: font: 字重字体大小/行高字族

day48 前端高级选择器优先级

复习 1. 基础选择器标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2"></div> 统配选择器 | !important | 行间式 2. 选择器优先级通常作用范围越精确优先级越高 !important > 行间式 > id > class > 标签 > 统配 3. 长度与颜色 px in mm cm em rem vw

css高级选择器&盒模型

css高级选择器&盒模型 1.组合选择器群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子代)选择器 /*后代选择器:用空格将父级和子级连接*/ .sup .sub{ color:red } /*子代选择器:用 > 将父级和子级连接,即父级 > 子级*/ .sup > .sub{ color:red } 1.子代选择器是(一级嵌套关系) 2.后代选择器(一级或者多级嵌套关系) 兄

Python-ccs高级选择器盒模型

css高级选择器与盒模型脱离文档流 ,其中就是产生了BFC 1.组合选择器 - 群组选择器 /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */ div, #div, .div {color: red} - 后代(子代)选择器 .sup .sub { 后代,sup一定是sub的父代(不一定是父集,sub就是被sup直接嵌套) } .sup > .sub {子代} - 兄弟(相邻) 选择器 .up ~ .down {兄弟} .up + .down {相邻} - 交集选

CSS3高级选择器变量