css选择器 | 易学教程

02-css的选择器

阅读更多关于 02-css的选择器

css的选择器：1.基本选择器 2.高级选择器基本选择器包含： 1.标签选择器标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“ body{ color:gray; font-size: 12px; } /*标签选择器*/ p{ color: red; font-size: 20px; } span{ color: yellow; } 标签选择器 2.id选择器 # 选中id 同一个页面中id不能重复。任何的标签都可以设置id id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和AA是两个不一样的属性值 1 #box{ 2 background:green; 3 } 4 5 #s1{ 6 color: red; 7 } 8 9 #s2{ 10 font-size: 30px; 11 } View Code 3.类选择器所谓类：就是class . class与id非常相似任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开类的使用，能够决定前端工程师的css水平到底有多牛逼？玩类了，一定要有”公共类“的概念。 .lv{ color: green; } .big{ font-size: 40px; }

如何使用CSS在元素后面添加空格？

阅读更多关于如何使用CSS在元素后面添加空格？

在CSS中，可以使用:after选择器在元素后面添加空格（""）。:after选择器用于在其他元素的内容之后多次添加相同的内容；它在每个选定元素的内容后面插入一些内容。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。语法： :after { // CSS属性 } 示例1：使用:after选择器在元素后添加空格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在选定的元素后添加空格</title> <style> span:after { content: "\00a0" } p.demo:after { content: "！" } </style> </head> <body> <p><span>Hello</span>world</p> <p class="demo" >Hi</p> </body> </html> 输出： Hello world Hi！示例2： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在选定的元素后添加空格</title> <style> h2 { text-decoration: underline; } h2.space:after { content: "　"; white-space: pre

Spoooooky CSS 选择器

阅读更多关于 Spoooooky CSS 选择器

让我们今年有一些万圣节主题的帖子精神！我会从超过 GRAVE.eR.CSS选择器中挑选一些将冻结你骨头的选择器。也许不可能，但他们至少有点怪异。迟钝的猫头鹰选择器（the lobotomized owl selector） Heydon Pickering使这一个在两年前出名。我看起来像这样： * + * { margin-top:1.5em; } 这个想法是，只有具有先前兄弟的元素在顶部获得边缘。所以你没必要做像下面的东西（ codepen ）： .the-last-one-so-don't-put-margin-on-me { margin-bottom: 0; } 相反，你甚至有点免费的间距： <div class="module"> <div>Owl</div> <div>Owl</div> <div>Owl</div> <div>Owl</div> </div> * + * { margin-top: 1rem; } .module { border: 0.5rem solid #AF4629; padding: 1rem; background: #F59131; } .module > div { padding: 1rem; background: #efefef; } .module * + *::after { content: "

css伪类选择器

阅读更多关于 css伪类选择器

我们在写css的时候会经常使用伪类选择器，伪类选择器就是通过css选择器加上冒号和伪类名构成的。可能有些伪类选择器你已经见过了，比如说a:hover这样的选择器。在大多情况下，伪类选择器是非常有用的。其中css2 和css3 都支持伪类选择器，只是相对来说，css2支持的可能比css3的少，除了ie浏览器外，其他大部分浏览器都支持伪类选择器，在ie浏览器中，包括ie8也是支持少量的伪类选择器的。ie9 及以上浏览器，基本上支持所有的伪类选择器，下面，让我们看看所有的伪类选择器。当然，伪类选择器并没有那么多。连接的伪类选择器连接的伪类选择器包括以下几个（:link、:visited 、:hover 、:active） :link 这个选择器也许是最容易引起混淆的一个连接的伪类选择器，不是所有的<a>都是连接么？但是并不是这样的，这个伪类选择器只选择那些没有添加href属性的a标签的，这样看来这个伪类选择器是不是就和[href]这个选择器很相似。 :visited 这个选择器选择那些在当前浏览器中那些通过本a标签进入过的地址的标签。 :hover 这个就不用说了，这个大家用的很广的，这个伪类选择器选择那些通过鼠标悬停状态下的连接。 :active 这个伪类选择器选择那些，鼠标左键按下，但是未弹起状态下的标签。同样，这个伪类在h5中选择那些按钮按下的状态。

CSS学习基础入门教程：了解熟悉css语法

阅读更多关于 CSS学习基础入门教程：了解熟悉css语法

宣告CSS样式的语法如下：選擇器{ 选择器{ 屬性：設定值；属性：设定值； ... } 在一個選擇器(Selector) 中，可以設定的屬性數目沒有限制。在一个选择器(Selector)中，可以设定的属性数目没有限制。選擇器主要有三種：型類(Type) 選擇器、Class 選擇器、和ID 選擇器。选择器主要有三种：型类(Type)选择器、Class选择器、和ID选择器。型類選擇器是(X)HTML 標籤，如<body> 和<h1>。型类选择器是(X)HTML标签，如<body>和<h1>。 Class 和ID 選擇器是使用者自訂的選擇器。 Class和ID选择器是使用者自订的选择器。我們會在之後討論這兩類的選擇器。我们会在之后讨论这两类的选择器。樣式是以『屬性：設定值』的方式來制定。样式是以『属性：设定值』的方式来制定。舉例來說，若我們要設定一個元素內的文字是黃色的，那就用以下的『屬性：設定值』：举例来说，若我们要设定一个元素内的文字是黄色的，那就用以下的『属性：设定值』：新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。 color:yellow; 在以上的宣告內，color 是屬性，而yellow 是設定值。在以上的宣告内，color是属性，而yellow是设定值。

详解css的预编译语言sass

阅读更多关于详解css的预编译语言sass

#千锋逆战班，打卡第二天# sass是css的预编译语言，比css更高更快更强将sass语言写在后缀为 .sass 或者 .scss 的文件里面。 .sass文件和 .scss 文件的区别在 . scss文件里面和写css语法基本一致在 . sass文件里面就没有大括号和分号，全部依靠缩进来维持关系这两个文件被编译成css文件以后是一样的 sass工具编译 .sass 和 .scss文件 1. sass单文件编译 + 先写好一个 . scss 或者 . sass后缀的文件 + 打开命令行，切换到文件的目录 + 输入指令 - > sass 要编译的文件编译后的文件名 + 每次修改scss文件都需要从新编译一下 2. sass 单文件实时编译 => 你先写好一个 . sass 或者 . scss 后缀的文件 => 打开命令行 , 切换到文件的目录 => 输入指令 - > sass -- watch 要编译的文件 : 编译后的文件名 => 一个终端只能监控一个文件 , 你要是想监控多个文件 , 需要开启很多终端 3. sass 文件夹实时编译 => 把一个文件夹里面的 sass 文件全部编译到另一个文件夹里面 => 先准备好一个文件夹 , 这个文件夹是专门来写 sass 文件的 => 代开命令行 , 切换到这个文件夹的目录 => 输入指令 - > sass -- watch

CSS选择器有哪几种？举例轻松理解CSS选择器

阅读更多关于 CSS选择器有哪几种？举例轻松理解CSS选择器

CSS选择器汇总（清爽版） 1、元素选择器标签名{ } 2、id选择器 #id属性值{ } 3、类选择器 ·class属性值{ } 4、选择器分组（并集选择器）作用：通过它可以同时选中多个选择器对应的元素（通常用于集体声明）语法：选择器1，选择器2，选择器n{ } 5、复合选择器（交集选择器）作用：选择更准确更精细的目标元素并为其设置属性语法：选择器1选择器2选择器n{ }  6、通配选择器作用：用来选中页面中所有的元素语法：*{ } 7、后代元素选择器作用：选中指定元素的指定后代元素语法：祖先元素后代元素{ } 8、子元素选择器作用：选中指定父元素的子元素语法：父元素>子元素 9、伪类选择器伪类表示元素的一种特殊状态 :hover 　　移入时元素的状态 :visited　　已被访问过后的元素的状态 :active　　被点击时元素的状态 10、属性选择器作用：根据元素中的属性或属性值来选取指定元素语法：[属性名]选取含有指定属性的元素 [属性名=“属性值”]选取含指定属性值的元素 [属性名^="属性值"] 选取属性值以指定内容开头的元素 [属性名$="属性值"] 选取属性值以指定内容结尾的元素 [属性名*="属性值"] 选取属性值包含指定内容的元素 11、兄弟元素选择器 +选择器

学习02-css（过渡，焦点选择器，属性选择器，结构伪劣选择器，伪元素选择器，2D概念，3D概念）

阅读更多关于学习02-css（过渡，焦点选择器，属性选择器，结构伪劣选择器，伪元素选择器，2D概念，3D概念）

css过渡 transtion：要过渡的属性花费时间运动曲线何时开始； transition 简写属性，用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的css属性的名称 transition-duration 定义过渡效果花费的时间，默认是0 transtion-timing-function 规定过渡效果的时间曲线，默认是ease transtion-delay 规定过渡效果何时开始，默认0 运动曲线 linear 匀速 ease 逐渐慢下来 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速焦点选择器 :focus 伪类选择器用于焦点的元素属性选择器 E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 E[att^="val"] 匹配具有att属性，且值以val开头的E元素 E[att$="val"] 匹配具有att属性，且值以val结尾的E元素 E[att*="val"] 匹配具有att属性，且值中含有val的E元素结构伪劣选择器 E：first-child 匹配父元素中的第一个子元素E E：last-child 匹配父元素中最后一个E元素 E：nth-child（n）匹配父元素中的第n个子元素E E：first-of-type

514 ，css不同选择器的权重（css层叠的规则）

阅读更多关于 514 ，css不同选择器的权重（css层叠的规则）

！important规则最重要，大于其它规则行内样式规则，加1000 eg，<html> <head> </head> <body> <h3>站长中心</h3> <p style="padding-left: 60;color: blue"> 站长 </p> </body> </html> 对于选择器中给定的各个id属性值，加100 对于选择其中给定的各个类属性，属性选择器或者伪类选择器，加10 对于选择器中给定的各个元素标签选择器，加1 如果权值一样，就按照样式规则的先后顺序来应用，顺序靠后的覆盖前面的规则来源： https://www.cnblogs.com/1998Archer/p/12371480.html

CSS基础

阅读更多关于 CSS基础

CSS基础 CSS介绍　　 CSS Cascading Style Sheets，层叠样式表。　　样式定义了HTML元素怎样去显示。　　样式一般存储在样式表（Style Sheets）中。　　外部样式表可以帮你做很多工作，外部样式表存储在CSS文件中。　　使用CSS，你的HTML文档可以用不同的样式输出来显示。　　最初HTML标签被设计为定义文档的内容，而布局由浏览器来处理，并非使用格式化标签，为了解决这个难题，W3C（World Wide Web Consortium）这个非盈利的，建立标准的组织，为HTML4.0增加了样式。　　CSS允许开发者一下就能控制多个Web页的样式和布局。简单的改变样式，所有与之相关的元素都会自动更新。 CSS基础语法　　 CSS的语法由三部分组成：一个选择器（selector ），一个属性（property）和一个值（value）。　　即： selector{property: value} 　　选择器是你希望去定义的HTML元素/标签. 　　每个属性可以有一个值，属性和值由冒号区分开，外面用大括号括起来。　　比如： body{color: black} 　　如果值为多个单词则用双引号括起来： p{font-family: “sans serif”} 　　注意，如果你想指定多个属性，你就必须将每个属性用

订阅 css选择器