CSS选择器
-
标签选择器
作用：根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。<style> /* 标签选择器 */ div { color: aqua; font-size: 20px; } </style>1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 2.标签选择器无论标签藏得多深都能选中 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)
-
id选择器
作用: 根据指定的id名称找到对应的标签, 然后设置属性。<style> /* id选择器: #id 给一个标签设置样式 一般情况下如果只是设置样式 我们不会使用id*/ #div1 { background-color: aquamarine; } </style>1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id 2.在同一个界面中id的名称是不可以重复的 3.在编写id选择器时一定要在id名称前面加上# 4.id的名称是有一定的规范的 （1）id的名称只能由字母/数字/下划线，a-z 0-9 _ （2）id名称不能以数字开头 （3）id名称不能是HTML标签的名称
-
类选择器
作用: 根据指定的类名称找到对应的标签, 然后设置属性<head> <style> /* 类选择器： .class 给同一个类的标签设置样式*/ .div3 { background-color: bisque; } .div5 { font-size: 20px; } </style> </head> <body> <div class="div3 div5">我是一个多类名div</div> </body>1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名 2.在同一个界面中class的名称是可以重复的 3.在编写class选择器时一定要在class名称前面加上"." 4.类名就是专门用来给CSS设置样式的 5.类名的命名规范和id名称的命名规范一样 6.在HTML中每个标签可以同时绑定多个类名id和class的区别：1.id相当于人的身份证不可以重复；class相当于人的名称可以重复。2.一个HTML标签只能绑定一个id名称；一个HTML标签可以绑定多个class名称。
-
后代选择器
作用: 找到指定标签的所有特定的后代标签, 设置属性。<style> /* 后代（子代+其他后代）选择器 空格隔开 给div标签中的p标签设置样式 */ div p { color: aquamarine; } </style>1.后代选择器必须用空格隔开 2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代 3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器 4.后代选择器可以通过空格一直延续下去
-
子元素选择器
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性<style> /* 子代 子元素的选择器 >隔开(直接子代) 给类名为div1的标签里的p标签设置样式*/ .div1>p { color: aqua; } </style>1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 2.子元素选择器之间需要用>符号连接, 并且不能有空格 3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器 4.子元素选择器可以通过>符号一直延续下去后代选择器和子元素选择器的区别： 1.后代选择器使用空格作为连接符号；子元素选择器使用>作为连接符号。 2.后代选择器会选中指定标签中, 所有的特定后代标签；子元素选择器只会选中指定标签中, 所有的特定的直接标签。
-
交集选择器
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性。<style> /* 交集选择器 */ /* 标签选择+类选择器 */ p.p1 { color: aqua; } </style> <p class="p1">第1个标签</p>1.选择器和选择器之间没有任何的连接符号 2.选择器可以使用标签名称/id名称/class名称
-
并集选择器
作用: 给所有选择器选中的标签设置属性。<style> /* 并集选择器 */ .p1, #p2 { font-size: 20px; } </style> <p class="p1">第1个标签</p> <p id="p2">第2个标签</p>1.并集选择器必须使用,来连接 2.选择器可以使用标签名称/id名称/class名称
-
兄弟选择器（相邻css2 通用css3）
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性。<style> /* 兄弟选择器 */ /* css2相邻选择器 只会选择离p1最近的一个兄弟 */ .p1+p { color: aqua; } /* css3通用选择器 */ .p1~p { font-size: 20px; } </style>1.通用兄弟选择器必须用~连接 2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
-
伪类选择器
伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中
-
序选择器（结构为伪类选择器）
CSS3中新增的选择器最具代表性的就是序选择器:- :first-child 选中同级别中的第一个标签
- :last-child 选中同级别中的最后一个标签
- :nth-child(n) 选中同级别中的第n个标签
- :nth-child(odd) 选中同级别中的所有奇数
- :nth-child(even) 选中同级别中的所有偶数
<style> /* 伪类选择器 适用范围：同级别*/ p:first-child { color: aquamarine; } p:last-child { color: blueviolet; } p:nth-child(5) { color: cornsilk; } /* 奇数标签 */ p:nth-child(odd) { font-size: 25px; } /* 偶数标签 */ p:nth-child(even) { font-size: 20px; } </style> <p>第1个标签</p> <p>第2个标签</p> <p>第3个标签</p> <p>第4个标签</p> <p>第5个标签</p> <p>第6个标签</p> <p>第7个标签</p> <p>第8个标签</p>- :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增,例如(3n+1)分别对应1,4,7
- :nth-last-child(n) 选中同级别中的倒数第n个标签
- :only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效
-
a标签的伪类选择器（动态伪类选择器）
1.E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
2.E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
3.E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
4.E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上<head> <style> /* 动态伪类 顺序不能乱 */ /* 还未访问过 */ a:link { color: black; } /* 用户已经访问过 */ a:visited { color: chartreuse; } /* 鼠标悬浮 */ a:hover { color: crimson; } /* 鼠标按住不动 */ a:active { color: cyan; } </style> </head> <body> <a href="https://www.baidu.com">百度一下，你就知道啊</a> </body>链接还未点击时，颜色为black； 链接已经访问过时，颜色为chartreuse； 鼠标悬浮链接时，颜色为crimson； 鼠标按住链接并且不动时，颜色为cyan； 注意：样式设置顺序必须是link-visited-hover-active
-
否定伪类
作用：可以从已选中的元素中剔除出某些元素<style> /* 否定伪类 :not(类名) */ /* 除了.p2其他都设置样式 */ p:not(.p2) { color: cyan; } </style> <p>第1个标签</p> <p class="p2">第2个标签</p> <p>第3个标签</p> <p>第4个标签</p> <p>第5个标签</p>除了类名为p2的p标签，其他p标签都设置
color: cyan;样式
-
伪元素选择器
使用伪元素来表示元素中的一些特殊位置1. ::after 表示元素的最后边的部分，一般需要结合content这个样式一起使用 2. ::before 表示元素最前边的部分，一般需要结合content这个样式一起使用 3. ::first-letter 为第一个字符来设置一个样式 4. ::first-line 为第一行设置一个样式<style> /* 伪元素选择器 */ p::after { content: '我是一个::after'; } P::before { content: '我是一个::before'; } /* 设置首字符的样式 */ p::first-letter { color: aqua; font-size: 28px; } /* 首行文字的样式 */ p::first-line { color: aquamarine; } </style>
-
属性选择器
作用: 根据指定的属性名称找到对应的标签, 然后设置属性<style> /* 属性选择器 */ /* 标签[属性：值]{ } */ input[type='text'] { background-color: aquamarine; } input[type='password'] { background-color: plum; } </style> <form action=""> 用户名：<input type="text" name="username"> 密码：<input type="password" name="user_password"> </form>通过type属性名找到对应的标签进行颜色样式设置
-
通配符选择器与组合选择器
通配符选择器作用： 给当前界面上所有的标签设置属性
组合选择器： 多个选择器组合使用例子：
<style> /* 通配符选择器 作用：去除标签的默认样式 */ * { /* 去除标签的下划线 */ text-decoration: none; /* 去除无序列表默认样式 */ list-style-type: none; } /* 组合选择器 */ .one, .two { color: plum; } </style>
1323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
