css选择器

CSS选择器的新用法

由 风格不统一 提交于 2020-02-09 01:35:39
现在，预处理器(如sass)似乎已经成为开发CSS的标配，正如几年前jQuery是开发JS的标配一样。JS的querySelector借鉴了jQuery的选择器思想，CSS选择器也借鉴了预处理器的变量定义、选择器嵌套、代码块重用等常用功能。本文将详细介绍CSS选择器的新用法 变量 一般地，我们在进行web开发时，会有一套变量定义规范，以sass为例，如下所示 // 颜色定义规范 $color-background : #222 $color-background-d : rgba(0, 0, 0, 0.3) $color-highlight-background : #333 //字体定义规范 $font-size-small : 12px $font-size-medium : 14px $font-size-large : 18px 而CSS变量的语法如下 【声明变量】 变量必须以 -- 开头。例如–example-variable: 20px，意思是将20px赋值给–example-varibale变量 可以将声明变量的语句置于任何元素内，如果要设置全局变量，则可以设置为:root、body或html :root{--bgColor:#000;} 变量声明就像普通的样式声明语句一样，也可以使用内联样式 <body style="--bgColor:#000"> 【使用变量】

CSS之⑨子元素选择器（复合选择器③）

由 ￣綄美尐妖づ 提交于 2020-02-08 22:31:29
CSS之⑨并集选择器（复合选择器③） QQ:3020889729 小蔡 何为并集选择器 并集选择器的选择器名字 并集选择器的作用范围 并集选择器的基本格式 并集选择器的使用 QQ:3020889729 小蔡 何为并集选择器 并集，顾名思义，就是多个选择器并写在一起，实现多个选择器应用同一种样式。 并集选择器的选择器名字 并集选择器的名字：可以是各种基础选择器和后代/子元素选择器，甚至于伪类选择器组合在一起。 并集选择器的作用范围 各组成的选择器的作用范围（并集选择器实际上就是一种样式，多种选择器同时设置。）。 并集选择器的基本格式 格式：选择器1+,+选择器2+,+……+,+选择器n+空格+{样式内容} 书写规范：一般每一个选择器+逗号放一行（多个选择器竖着排放），然后最后一个选择器不需要逗号。 并集选择器的使用 css代码： /* 并集选择器就是将多个相同样式的选择器同时创建 */ .nas, a, p { color: white; background-color: black; } /* 以上全部被设置为相同的样式 */ html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

CSS之⑩伪类选择器（复合选择器④）

由 橙三吉。 提交于 2020-02-08 22:18:34
CSS之⑩伪类选择器（复合选择器④） QQ:3020889729 小蔡 何为伪类选择器 链接伪类选择器 链接伪类选择器的选择器名字 链接伪类选择器的作用范围 链接伪类选择器的基本格式 链接伪类选择器的使用 :focus伪类选择器 :focus伪类选择器的选择器名字 :focus伪类选择器的作用范围 :focus伪类选择器的基本格式 :focus伪类选择器的使用 QQ:3020889729 小蔡 何为伪类选择器 不用于一般的选择器，伪类选择器起到为标签/元素 设置特殊效果 的作用。 一个例子：（就是我们写博客时候的目录） 链接伪类选择器 链接伪类选择器的选择器名字 a:link a:visited （被点击产生设定的效果，该效果直到该页面缓存清除后才会消失（也就是可能出现点击一次后，再刷新网页也没可能还是被点击后的样式）） a:hover （悬停特效：不只是用到a标签，还可以用到其它的标签） a:active （激活特效：鼠标未松起时的特效——用法和hover相同） 依次为： 未访问过的链接效果，访问过的链接效果，鼠标触摸的链接效果，鼠标按下未松起的链接效果的链接伪类选择器的名字 （ps：link/visite只用于超链接标签a，后两个还可以用于其它标签） 链接伪类选择器的作用范围 所有的链接标签范围都有用。 链接伪类选择器的基本格式 格式：a+:+link/visited

CSS之⑧子元素选择器（复合选择器②）

由 為{幸葍}努か 提交于 2020-02-08 20:35:45
CSS之⑧子元素选择器（复合选择器②） QQ:3020889729 小蔡 何为子元素选择器 子元素选择器的选择器名字 子元素选择器的作用范围 子元素选择器的基本格式 子元素选择器的使用 QQ:3020889729 小蔡 何为子元素选择器 类似于后代选择器，只是该选择器只对最近一级子级有效。 子元素选择器的选择器名字 选择器名字可以是任意基础选择器的名字组合/只是需要设置父级和子级，并且使用>来连接，得到子元素选择器的名字：如：ol>li { color: red; }，这就是一个子元素选择器 子元素选择器的作用范围 仅仅作用于最近一级的子级，不做用于其它地方。 子元素选择器的基本格式 格式：父级+>+子级+空格+{样式内容} 子元素选择器的使用 css代码： /* 子元素选择器 */ /* 类子元素选择器 */ .divs>a { color:red; font-weight: 700; background-color: black; } /* 标签子元素选择器 */ div>a { color:green; font-weight: 700; background-color: black; } html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

CSS行间样式与内部样式

由 半城伤御伤魂 提交于 2020-02-08 19:51:53
注释 <!-- --> 快捷键 crtl+/ div 双标签<div></div> CSS语法 属性名：属性值； Css引入方式 1、行间样式的引入：在标签中写一个style的属性。如：style="……" 。 缺点 :不利于代码重用。 优点 :优先级最高。 2、内部样式的引入，在head标签中写一个style的标签，在标签中通过选择器控制样式。 选择器写法： (1). 标签名选择器。 div{ ……css样式 } (2).ID选择器 先在相应标签中设置ID的属性 如 id=“id名” #id名{ ……css样式 } 来源： https://www.cnblogs.com/davis16/p/8315643.html

CSS选择器

由 时光毁灭记忆、已成空白 提交于 2020-02-08 18:53:02
CSS的一个核心特性是能向文档中的一组元素类型应用某些规则，本文将详细介绍CSS选择器 通配选择器 星号*代表通配选择器，可以与任何元素匹配 *{color: red;} 元素选择器 文档的元素是最基本的选择器 html{color: black;} p{color: gray;} h2{color: silver;} 类选择器 类选择器用于选择一类元素 .div{color: red;} 1、多类选择器 .div1.div2{color: red;} 2、结合元素的类选择器 p.div{color: red;} ID选择器 ID选择器用于选择一个元素 #test{color: red;} 注意：在实际中，浏览器并不会检查ID的唯一性，设置多个ID，可以为这些具有相同ID的元素应用相同样式，但在编写DOM脚本时只能识别该id的第一个元素。 1、结合元素的ID选择器 div#test{color: red;} 属性选择器 属性选择器根据元素的属性及属性值来选择元素(IE6-不支持) 1、简单属性选择器 h1[class]{color: red;} img[alt]{color: red;} a[href][title]{color: red;} #div[class]{color: red;} .box[id]{color: red;} [class]{color: red;} 2

CSS笔记（CSS简介，选择器，层叠抉择）

由 家住魔仙堡 提交于 2020-02-08 03:10:36
CSS 指的是 层叠式样式表 （cascading style sheet），就像超文本标记语言一样，在字面上理解CSS，它就是一个管HTML样式的，而“ 层叠式 ”的意思是：一个元素的样式可以有多个(可以继承父类元素)，当进行抉择定义样式时，就得通过特定性数以及规则顺序来决定了。 注： CSS包含的一些简单语句称为 规则 有些CSS属性是无法被继承的，如边框 同样的，这里有个 检验网站 用于检验编写的CSS文件是否正确 1 选择器 CSS允许你指定各种选择器来确定将样式应用到哪些元素上，以下举出几种选择： 1.1 元素选择器 p { color:yellow; } 1.2 筛选选择器 筛选选择器如 .classname_a.classname_b ，能具体表明想要定义的部分，注意 .classname_a 与 .classname_b 是在同一阶层 elementname.classname { color:yellow; } 1.3 ID选择器 由于ID就只有一个，所以 IDname 并不需要添加元素前缀，不过需要添加 # 号 #IDname { color:yellow; } 1.4 综合选择器 使用 , 号连接表示叠加关系 #IDname,h1,classname { color:yellow } 1.5 子孙选择器 用空格连接表示继承关系 classname p {

CSS选择器

由 时光怂恿深爱的人放手 提交于 2020-02-08 02:43:14
本文讨论另一个重要的CSS特征：选择器，它可以用来在一个页面内选择元素风格化Web页。 选择器类型 CSS样式有多种方式实现元素选择。各种各样的选择方法包括通过通用选择器，类型选择器，类选择器，ID选择器，祖先选择器，子孙选择器，邻接兄弟选择器和属性选择器进行选择。 这里我们将分别来看一下这几种方法（邻接兄弟和属性除外，我们将在下周进行讨论）。注意：浏览器对CSS选择器的支持是不一致的，不过你可以利用网上的说明来检测某个选择器是否能在你的目标浏览器使用。 通用 通用选择器允许你在整个页面中使用样式。基本上说来，一个样式并不指定具体的元素，类等，所以它适用于页面内的所有元素。这对设置颜色，字体等来说十分有用。 通用选择器可用于页面上的所有元素，但是他们可以被某些具体的选择器覆盖。CSS规范中指出可以使用星号（*）来表示一个通用选择器。 <html> <head><title>CSS – Universal selectors</title> <style type="text/css"> * {font-face: arial; font-size: 110%; color: red; background: yellow;} </style><body> <h1>Test Page</h1> <p>Hey there.</p> </body></html>

CSS选择器

由 怎甘沉沦 提交于 2020-02-08 02:42:33
本文讨论另一个重要的CSS特征：选择器，它可以用来在一个页面内选择元素风格化Web页。 选择器类型 CSS样式有多种方式实现元素选择。各种各样的选择方法包括通过通用选择器，类型选择器，类选择器，ID选择器，祖先选择器，子孙选择器，邻接兄弟选择器和属性选择器进行选择。 这里我们将分别来看一下这几种方法（邻接兄弟和属性除外，我们将在下周进行讨论）。注意：浏览器对CSS选择器的支持是不一致的，不过你可以利用网上的说明来检测某个选择器是否能在你的目标浏览器使用。 通用 通用选择器允许你在整个页面中使用样式。基本上说来，一个样式并不指定具体的元素，类等，所以它适用于页面内的所有元素。这对设置颜色，字体等来说十分有用。 通用选择器可用于页面上的所有元素，但是他们可以被某些具体的选择器覆盖。CSS规范中指出可以使用星号（*）来表示一个通用选择器。 <html> <head><title>CSS – Universal selectors</title> <style type="text/css"> * {font-face: arial; font-size: 110%; color: red; background: yellow;} </style><body> <h1>Test Page</h1> <p>Hey there.</p> </body></html>

CSS选择器

由 筅森魡賤 提交于 2020-02-08 02:41:26
本文讨论另一个重要的CSS特征：选择器，它可以用来在一个页面内选择元素风格化Web页。 选择器类型 CSS样式有多种方式实现元素选择。各种各样的选择方法包括通过通用选择器，类型选择器，类选择器，ID选择器，祖先选择器，子孙选择器，邻接兄弟选择器和属性选择器进行选择。 这里我们将分别来看一下这几种方法（邻接兄弟和属性除外，我们将在下周进行讨论）。注意：浏览器对CSS选择器的支持是不一致的，不过你可以利用网上的说明来检测某个选择器是否能在你的目标浏览器使用。 通用 通用选择器允许你在整个页面中使用样式。基本上说来，一个样式并不指定具体的元素，类等，所以它适用于页面内的所有元素。这对设置颜色，字体等来说十分有用。 通用选择器可用于页面上的所有元素，但是他们可以被某些具体的选择器覆盖。CSS规范中指出可以使用星号（*）来表示一个通用选择器。 <html> <head><title>CSS – Universal selectors</title> <style type="text/css"> * {font-face: arial; font-size: 110%; color: red; background: yellow;} </style><body> <h1>Test Page</h1> <p>Hey there.</p> </body></html>
订阅 css选择器