【笔记】CSS高级选择器:nth-child()】的更多相关文章

css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子代)选择器 /*后代选择器:用空格将父级和子级连接*/ .sup .sub{ color:red } /*子代选择器:用 > 将父级和子级连接,即父级 > 子级*/ .sup > .sub{ color:red } 1.子代选择器是(一级嵌套关系) 2.后代选择器(一级或者多级嵌套关系) 兄…
一.高级选择器 高级选择器分为:后代选择器.子代选择器.并集选择器.交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{ color: red; } .container .item p{ color: yellow; } 子代选择器 使用>表示子代选择器.比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p. .container>p{ color: yellowgreen; } 并集选…
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,“2可以是你想要的数字” .demo01 li:nth-child(2){background:#090} :nth-child(n+4)选取大于等于4标签,“n…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="tzy.css" type="text/css"> <style type="tex…
1.高阶选择器:子代后代,相邻通用兄弟,交集并集,属性,伪类,伪元素子代后代选择器 div>p{}  div p{}相邻通用兄弟 div+p{}  div~p{}理解:div同学的同桌p  div同学的[同学(有p的)]交集并集选择器 div,p    div.div注意:类选择写后面属性选择器 [id] [class='div'] [class^*$='d']伪类选择器,伪元素选择器(重点讲解)定义:伪类用于向某些选择器添加特殊的效果(添加样式)  伪元素用于向某些选择器设置特殊效果.(改变样…
相信各位如我一样的“抠图崽”和前端大佬们,在写网页样式的实话,总是免不了写下各种各样的选择器,再给选择的元素写入样式.最基本的元素选择器.class选择器.ID选择器等就不再过多的说了,相信大家都熟的不能再熟了,本文就对一些伪类和属性选择器惊醒一些基本的介绍. 1.子元素选择器 div>P{ text-align:center; } 选择父元素为 <div> 元素的所有 <p> 元素(不包括孙子P元素)  2.相邻兄弟选择器 div+p{ text-align:center;…
并集选择器 p,h1{} 交集选择器 p.first{} 后代选择器:嵌套标签 h1 span{} 子元素选择器 h1>span{} 属性选择器 input[type="password"]{}…
CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px:margin-right:10px"></p><标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>内部样式表(位于 <head> 标签内部)<style type=&…
css高级选择器与盒模型 脱离文档流 ,其中就是产生了BFC 1.组合选择器 - 群组选择器 /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */ div, #div, .div {color: red} - 后代(子代)选择器 .sup .sub { 后代,sup一定是sub的父代(不一定是父集,sub就是被sup直接嵌套) } .sup > .sub {子代} - 兄弟(相邻) 选择器 .up ~ .down {兄弟} .up + .down {相邻} - 交集选…
目录 通用选择器 高级选择器 子选择器 相邻兄弟选择器 属性选择器 通用选择器 通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示. 语法: * { property1: value; property2: value; } 示例: ;;} 这行代码可以删除每个元素在浏览器中margin和padding的默认值.不同的浏览器对元素的默认margin和padding可能不同,用通用选择器把所有元素的margin和padding都设置为0方便我们精确地控制元素的margin和pad…