css选择器

css不常用的4个选择器-个人向

阅读更多关于 css不常用的4个选择器-个人向

　　 ①：element1.element2 （给同时满足有 element1 和 element2 2 个类名的元素添加样式） <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .test1.test2 { color: red; } </style> </head> <body> <div class="test1">123</div> <div class="test1 test2"> 123 </div> </body> </html> 　　 ②：[attribute^=value] （匹配属性值以指定值开头的每个元素，如下面demo，给属性为 href 且值以 http 开头的所有 a 元素添加样式） <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> a { display: block; border-bottom: 1px solid #ccc; } [href^=http]::after { content: 'after伪元素'; display: inline-block; margin: 20px; width: 50px; height:

CSS选择器的权重和计算规则（机制）

阅读更多关于 CSS选择器的权重和计算规则（机制）

从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。从样式选择器看权重优先级： important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 继承 > 通配符。 CSS权重是由四个数值决定：第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为100。第三等：代表类、伪类和属性选择器，如.content，：hover，[type="text"]，权值为10。第四等：代表标签选择器和伪元素选择器，如div p,::before，权值为1。通配选择符（universal selector）（ * ）关系选择符（combinators）（ + , > , ~ , ' ' , || ）和否定伪类（negation pseudo-class）（ :not() ）对优先级没有影响（但是，在 :not() 内部声明的选择器会影响优先级）。最后把这些值加起来，再就是当前元素的权重了。权重算出来了，但是某个元素到底用哪个样式，还有3个规则： 1，如果样式上加有!important标记，那么始终采用这个标记的样式； 2、匹配的内容按照CSS权重排序，权重大的优先； 3，如果权重也一样，按照它在CSS样式表里声明的顺序，后声明的优先。来源： CSDN

CSS-笔记1-选择器与文本元素

阅读更多关于 CSS-笔记1-选择器与文本元素

知识点一： CSS概念：CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的，相当于页面化妆。知识点二：选择器格式与部分属性：写法：选择器{属性：值；属性：值} 选择器是一个选择（一/多个）标签的过程。对应的属性与值表： Width:20px; 宽 Height:20px; 高背景颜色 font-size:24px; 文字大小 text-align:left | center| right 内容的水平对齐方式 text-indent:2em; 首行缩进 Color:red; 文字颜色知识点三：基础选择器：一：标签选择器：特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。标签{属性：值} div{ font-size: 50px; color:green; background-color:yellow; width:300px; height:200px; } p{ color:pink; font-size:60px; } 颜色的显示方式：直接写颜色名称。十六进制显示颜色。 #000000;前2位代表红色，中间代表绿色，后两位代表蓝色。值越接近0颜色越深 RGB color：rgb(120,120,120);值在0-255之间。 RGBA 最后一位值在0-1 color:

阅读更多关于 CSS选择器

1. 基本选择器： #id .class 标签选择器 (*)通配符选择器 2. 关系选择器：子代选择器： s1 > s2 匹配s1中的下一级s2 后代选择器： s1 s2 匹配s1中的所有的后代s2 相邻选择器： s1 + s2 匹配s1后面紧挨着的同级元素s2 兄弟选择器： s1~s2 匹配s1后面所有同级(兄弟)元素s2 分组选择器： s1,s2 匹配s1和s2一起设置样式 3. 属性选择器： [attr] 匹配具有所给定属性名称的标签 [attr='val'] 匹配具有某个属性且属性值为给定值的标签 [attr ~='val'] 匹配具有某个属性且属性值包含所给定单词的标签 [attr *="val"] 匹配具有某个属性且属性值包含给定的字符的标签 [attr ^="val"] 匹配具有某个属性且属性值以给定的字符开头的标签 [attr$="val"] 匹配具有某个属性且属性值以给定的字符结尾的标签 4. 伪类选择器： a: link(未访问过的) a:visited(点击之后的) a:hover(鼠标移动) a:active(激活) :focus (获得焦点，用于Input ) E：first-child ----------匹配作为父元素的第一个子元素 E： last-child -----------匹配作为父元素的最后一个子元素 E：only

jQuery 教程

阅读更多关于 jQuery 教程

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 向您的页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。可以通过下面的标记把 jQuery 添加到网页中： < head > < script type = "text/javascript" src = "jquery.js" > < /script > < /head > 请注意， < html > < head > < script type = "text/javascript" src = "jquery.js" > < /script > < script type = "text/javascript" > $( document ) .ready ( function ( ) { $( "button" ) .click ( function ( ) { $( "p" ) .hide (

CSS基础总结

阅读更多关于 CSS基础总结

CSS <link rel="stylesheet" href="./css/1.css"> CSS选择器 /* 标签名选择器：所有该名字的标签都会获取此样式 / a,div{ width: 100px; height: 100px; background-color: chartreuse; } / ID选择器：通过ID来进行选择 / / 通过标签的ID来选择，但是一个ID只会对应一个标签该方法时对标签进行精准控制 */ #id1{ width: 100px; height: 100px; background-color: coral; } /* 类选择器：把多个东西归为一类 */ .c1{ width: 100px; height: 100px; background-color: darkmagenta; } /* 派生选择器 */ #id .c1{ width: 100px; height: 100px; background-color: honeydew; } 来源： CSDN 作者：许润清链接： https://blog.csdn.net/weixin_42174516/article/details/103928115

CSS样式2 标签选择器

阅读更多关于 CSS样式2 标签选择器

CSS选择器 css选择器类型有六种，分别是标签选择器 p 类别选择器 .one ID选择器 #left 嵌套声明 p span 集体声明 p.hl 全局声明 * 标签选择器 <style type="text/css"> body { background-color : #css ; text-align : center ; font-size : 12px ; } h1 { font : “黑体” ; font-size : 20px } p { color : red ; font-size : 16px ; } hr { width : 200px } </style> <body> <h1>标题</h1> <hr> <p>\正文段落</p> 版权所有 </body> 运行结果来源： CSDN 作者：倾听彼岸链接： https://blog.csdn.net/qq_46031627/article/details/103830032

CSS选择器

阅读更多关于 CSS选择器

一、基本选择器选择器含义 * 通用元素选择器，匹配任何元素 E 标签选择器，匹配所有使用 E 标签的元素 .info class 选择器，匹配所有 class 属性中包含 info 的元素 #footer id 选择器，匹配所有 id 属性等于 footer 的元素实例： * { margin:0; padding:0; }p { font-size:2em; }.info { background:#ff0; }p.info { background:#ff0; }p.info.error { color:#900; font-weight:bold; }#info { background:#ff0; }p#info { background:#ff0; } 二、多元素的组合选择器选择器含义 E,F 多元素选择器，同时匹配所有 E 元素或 F 元素， E 和 F 之间用逗号分隔 E F 后代元素选择器，匹配所有属于 E 元素后代的 F 元素， E 和 F 之间用空格分隔 E > F 子元素选择器，匹配所有 E 元素的子元素 F E + F 毗邻元素选择器，匹配所有紧随 E 元素之后的同级元素 F 实例： div p { color:#f00; }#nav li { display:inline; }#nav a { font-weight:bold; }div >

Web—02-轻松理解css

阅读更多关于 Web—02-轻松理解css

CSS基本语法以及页面引用 CSS基本语法 css的定义方法是：选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例： /* css注释 ctrl+shift+"/" */ div{ width:100px; height:100px; color:red } CSS页面引入方法 1、外联式：通过link标签，链接到外部样式表到页面中。 <link rel="stylesheet" type="text/css" href="css/main.css">` 2、嵌入式：通过style标签，在网页上创建嵌入的样式表。 <style type="text/css"> div{ width:100px; height:100px; color:red } ...... </style> 3、内联式：通过标签的style属性，在标签上直接写样式。 <div style="width:100px; height:100px; color:red ">......</div> CSS文本设置常用的应用文本的css样式： color 设置文字的颜色，如： color:red; font-size 设置文字的大小，如：font-size:12px; font-family 设置文字的字体，如：font

JQuery 选择器

阅读更多关于 JQuery 选择器

JQuery所支持的基本CSS选择器选择器描述 *　　匹配任何元素 E　　匹配标签名称为E的所有元素 E F　　匹配标签名称为F、作为E的后代节点的所有元素　　 E>F　　匹配标签名称为F、作为E的直接子节点的所有元素 E+F　　匹配前面是邻近兄弟节点E的所有元素F(E和F紧挨着)　　 E-F　　匹配前面是任何兄弟节点E的所有元素F(E和F可以不紧挨着)　　 E:has(F)　　匹配标签名称为E、至少有一个标签名称为F的后代节点的所有元素　　 E.C　　匹配带有类名C的所有元素E (.C等效于 *.C)　　 E#I　　匹配id特性值为I的元素E (#I等效于*#I) E[A] 匹配带有特性A的所有元素E(不管特性A的值是什么)　　 E[A=V]　　匹配所有元素E,其特性A的值正好是V　　 E[A^=V]　　匹配所有元素E,其特性A的值以V开头　　 E[A$=V]　　匹配所有元素E,其特性A的值以V结尾　　 E[A*=V]　　匹配所有元素E,其特性A的值包含V 根据在DOM中位置来选择元素选择器描述 :first 页面的最先的匹配 li a:first 返回最先的,并且在列表<li>项下的链接　　 :last 页面的最后匹配 :first-child 最先的子元素. li:first-child 返回每个列表的最先的项 :last-child

订阅 css选择器