css选择器

常规选择器——高级选择器

阅读更多关于常规选择器——高级选择器

高级选择器在前面我们学习六种最常规的选择器，一般来说通过这六种选择器基本上可以解决所有DOM节点对象选择的问题。但在很多特殊的元素上，比如父子关系的元素，兄弟关系的元素，特殊属性的元素等等。在早期CSS的使用上，由于IE6等低版本浏览器不支持，所以这些高级选择器的使用也不具备普遍性，但随着jQuery兼容，这些选择器的使用频率也越来越高。层次选择器选择器 CSS模式 jQuery模式描述后代选择器 ul li a {} $("ul li a") 获取追溯到的多个DOM对象子选择器 div > p {} $("div > p") 只获取子类节点的多个DOM对象 next选择器 div + p {} $("div + p") 只获取某节点后一个同级DOM对象 nextAll选择器 div ~ p {} $("div ~ p") 获取某节点后面所有同级DOM对象在层次选择器中，除了后代选择器之外，其他三种高级选择器是不支持IE6的，而jQuery却是兼容IE6的。如，html代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script>

JQuery选择器

阅读更多关于 JQuery选择器

$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt等等. 2.组选择器: 下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test的标签) 可以见DEMO。 4.子选择器: $("mix>mix")

CSS简介

阅读更多关于 CSS简介

CSS概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一样式解决了一个普遍的问题 HTML标签原本被设计为用于定义文档内容。通过使用<h1>、<p>、<table>这样的标签，HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出样式（style）。所有的主流浏览器均支持层叠样式表。样式表极大地提高了工作效率样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB

CSS语法、选择器、继承、层叠

阅读更多关于 CSS语法、选择器、继承、层叠

行内样式（内联样式） <h1 style="color:red;font-size:20px;">css行内样式</h1> 内部样式表（嵌入样式） 解决低版本浏览器不识别style标签的情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>  </style> </head> <body> <h1 style="color:red;font-size:20px;">css行内样式</h1> <p>行内样式</p> <p>嵌入样式</p> <p>外部样式</p> <p>导入样式</p> </body> </html> 外部样式表（建议） <link rel="stylesheet" href="index2.css"> 导入式页面加载很慢时可能出现无样式同时存在浏览器兼容性问题位于style标签的第一行 <style>  </style> css使用方式区别优先级：就近原则，谁距离元素最近，谁的优先级越高 css选择器

阅读更多关于 css选择器

※ ;选择所有元素 div,p ; 选择所有div元素和p元素 div p ;选择div内部所有p元素 div>p;选择父元素为div的所有p元素 div+p;选择紧接在div元素之后的所有p元素 [target];选择带有target属性的所有元素 [target=_blank];选择target=_blank的所有元素 [title~=flower];选择title属性包含单词"flower"的所有元素 [lang|=en];选择lang属性以"en开头的所有元素" a:link ;选择所有未被访问的链接 a:visited ;选择所有已被访问的链接 a:active ;选择活动链接 a:hover ;选择鼠标指针位于其上的链接 input:focus ;选择获取焦点的input元素 li:first-child ;选择列表中第一个li元素 p:before; 在每个p元素内容之前插入内容 p:after; 在每个p元素内容之后插入内容 p~ul; 选择前面有p元素的每个ul元素 a[src^="https"];选择其src属性以https开头的每个a元素 a[src$=".pdf"];以pdf结尾的 a[src*="adc"];包含adc字符串 p:first-of-type;指定父元素首个p元素 p:last-of-type;指定父元素的最后一个p元素 p:only-of

选择器初级及背景属性

阅读更多关于选择器初级及背景属性

选择器 <!doctype html> <html> <head> <title>选择器初级</title> <style type="text/css"> *{margin:0;padding:0;}/*匹配页面中所有的元素*/ div{}/*元素选择器由标签名来选择元素*/ .box{color:blue}/*class选择器/类选择器用于多个相同标签单需要不同控制*/ #box2{color：red}/*ID选择器以id属性命名再页面中只能出现一次权重值最高*/ div ul li p{color:yellow;}/*后代选择器从第一个元素开始依次往下选空格隔开 */ </style> </head> <body> <div class="box" id="box2">  </div> </body> </html> 　　背景属性 <!doctype html> <html> <head> <title>背景属性</title> <style type="text/css"> *{margin:0;padding:0;} body{ background-image:url bakground-attachment

CSS

阅读更多关于 CSS

css 称为层叠样式表 css样式引入方式第一种 head标签中引入 <style> /* 选择器{css属性名称:属性值;css属性名称:属性值;} */ div{ /* css注释 */ width: 200px; height: 200px; background-color: red; } </style> 第二种方式外部文件引入工作中常用的创建一个css文件,stylesheet文件,比如test.css文件里面写上以下代码 div{ /* css注释 */ width: 200px; height: 200px; background-color: red; } 在想使用这些css样式的html文件的head标签中写上下面的内容 <link rel="stylesheet" href="test.css"> href对应的是文件路径第三种引入方式内联样式: <div style="background-color: red;height: 100px;width: 100px;"></div> css选择器基本选择器元素选择器 div{ width:100px; } 标签名称{css属性:值} id选择器 html示例代码: <div id="d1"> </div> css写法: #d1{ background-color: green; width:

Vue style 深度作用选择器 >>> 与 /deep/（sass/less）

阅读更多关于 Vue style 深度作用选择器 >>> 与 /deep/（sass/less）

使用位置：在vue项目中使用了第三方插件之后会出现插件内部样式无法识别的现象，这个使用就必须使用深度作用器来解决了。使用方式：一、>>> < style lang = "scss" scoped > . fuck >>> . weui - cells { css 内容 } < / style > 二、/deep/ < style lang = "scss" scoped > . select { width : 100 px ; /deep/ . el - input__inner { border : 0 ; color : # 000 ; } } < / style > 上面两个都是css的深度作用选择器区别： ‘>>>’ 注意，只作用于css，’/deep/’ 是在sass/less中使用的，仔细看上面的代码可以发现下面的代码是在scss中使用的。来源： CSDN 作者：清风细雨_林木木链接： https://blog.csdn.net/weixin_35773751/article/details/104030331

HTML CSS

阅读更多关于 HTML CSS

<h1>选择器<h1> <p>选择器是一个选择谁（标签）的过程。</p> <p>写法：</p> ◆标签选择器：选择器{属性:值；属性:值;} 属性解释 Width:20px; 宽 Height:20px; 高 Background-color:red; 背景颜色 font-size:24px; 文字大小 text-align:left | center| right 内容的水平对齐方式 text-indent:2em; 首行缩进 Color:red; 文字颜色 <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div{ font-size:50px; color:green; background-color: yellow; } p{ color:pink; font-size:20px; } </style> <link rel="icon" href="favicon.ico"> </head> ★颜色的显示方式 ◎直接写颜色的名称 ◎十六进制显示颜色 0-9 a-f #000000; 前2为代表红色，中间2位代表绿色，后边2位代表蓝色。 ◎rgb ◎rgba A代表alpha

css学习2.0

阅读更多关于 css学习2.0

就事论事，上一周抄单词抄得太猛了忘记了学习这回事。。。讲真抄单词有点难顶哦。一直一直在抄个不停也还是抄不完。。。这一周也是在不停地抄。。。本周稍微认识了css选择器。 css选择器是用来找到html中的页面元素的，css选择器分为基础选择器和复合选择器。基础选择器中有 1、标签选择器概念：标签选择器（元素选择器）指用html作为选择器，按抱歉名称分类，为页面中某一类标签指定统一的css样式。语法：标签名 { 属性1 : 属性值1 ; 属性2 : 属性值2 ; 属性3 : 属性值3 ; } 作用：标签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签。优点：是能快速为页面中同类的标签统一的样式；缺点：不能设计差别化样式。 2、类选择器类选择器用“.”（英文点号）进行标识，后面跟类名。基本语法格式：类名： ```css .类名{ 属性1:属性值1；属性2:属性值2; 属性3:属性值3; } ``` 标签： <p class= "类名" >内容</p> 优点：可以为元素对象定义单独或相同的样式。可以选择一个或多个标签。注意： ①、类选择器使用“.“（英文点号）进行标识，后面跟着类名（可自定义）； ②、长名称或词组可以使用中横线来为选择器命名； ③、不要用纯数字、中文等命名，尽量使用英文字母表示。 °类选择器的特殊用法：多类名

订阅 css选择器