爱站程序员基地属性选择器
属性选择器
通过已经存在的属性名或属性值匹配元素
| 选择符 | 含义 |
|---|---|
| inp [attr] | 选择具有attr 命名的属性的inp元素 |
| inp [attr=“value”] | 选择具有attr属性且属性值等于value的inp元素 |
| inp [attr^=“value”] | 匹配具有attr属性且值以value开头的inp元素 |
| inp [attr$=\”value] | 匹配具有attr属性且值以value结尾的inp元素 |
| inp [attr*=“value”] | 匹配具有attr属性且值中含有value的inp元素 |
- 利用属性选择器就可以不用借助于类或者id选择器
<style>/*选择是input内 具有value属性的 那个元素*/input[value] {color: red;}</style><body><input type=\"text\" value=\"请输入用户名\"><input type=\"text\"></body>
- 可以选择 属性=值 的某些元素.
<style>input[value = \'password\'] {color: red;}</style><body><input type= \"text\" id=\"\"><input type=\"password\" id=\"\"></body>
- 可以选择 属性值开头的某些元素
<style>/*选择div里面 具有class属性 以index开头的那些元素*/div[class^=index]{color: red;}</style><body><div class=\"index1\">属性值开头</div><div class=\"index2\">属性值开头</div><div class=\"index3\">属性值开头</div><div class=\"index4\">属性值开头</div></body>
结构伪类选择器
结构伪类选择器主要
根据文档结构来选择器元素
，常用于根据父级选择器里面的子元素
| 选择符 | 含义 |
|---|---|
| inp: first-child | 匹配父元素中的第一个子元素 inp |
| inp: last-child | 匹配父元素中最后一个inp元素 |
| inp: nth-child(n) | 匹配父元素中的第n个子元素inp |
| inp: first-of-typinp | 指定类型inp的第一个 |
| inp: last-of-typinp | 指定类型inp的最后一个 |
| inp: nth-of-typinp(n) | 指定类型inp的第n个 |
<style>/*选择第一个li*/li:first-child{color: red;}/*选择最后一个li*/li:last-child{color: blue;}/*选择第三个li*/li:nth-child(3){color: green;}</style><body><ul><li>我变红了</li><li>我没变</li><li>我变绿了</li><li>我变蓝了</li></ul></body>
-
nth-child (n)
选择某个父元素的一个或多个特定的子元素
- n 如果是
数字
,就是选择第n个子元素，里面数字从1开始…
- 可以是
关键字
:
even
偶数,
odd
奇数
- 可以是
公式
: 如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略
<style>/* 选择在前五个span元素 包括第五个 */span:nth-child(-n+5){color: red;}</style>
-
nth-child
与
nth-of-type
的区别
<style>/*执行的时候会把所有盒子排序 然后先看 :nth-child（1）之后再回去看前面的 span *//*因为 第一个是p 与要选的span匹配不上，所以没有标签会被选*/div span:nth-child(1){color: red;}/*执行的时候会把指定的盒子排序 所以会直接把第一个span选出来*/div span:nth-of-type(1){color: blue;}</style><body><div><p>没人选我</p><span>我会变蓝</span><span>没人选我</span></div></body>
总结：
-
nth-child
对父元素里面
所有子元素
排序选择(序号是固定的)先找到第n个子元素,然后看看是否和inp匹配
-
nth-of-type
对父元素里面
指定子元素
进行排序选择。先去匹配inp ,然后再根据inp找第n个子元素
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
-
::before
在元素内部的前面插入内容
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过content
属性来为一个元素添加修饰性的内容。此元素默认为行内元素
语法规范：element::before { 样式 }
a::before {content: \"♥\"; /*在a链接前面插入一个♥*/}
-
::after
在元素内部的后面插入内容
::after
表示法是在CSS 3中引入的，
::
符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法
:after
。
语法规范：element::after { 样式 }
a::after {content: \"♥\"; /*在a链接后面插入一个♥*/}
注意：
-
before
和
after
创建一个元素,但是属于行内元素
- before 和 after必须有content属性
- 可以用几乎任何方法定义
content
中的文字和图片样式
- 新创建的这个元素在文档树中是找不到的,所以称为伪元素
- 伪元素选择器和标签选择器一样,权重为1
示例：
<style>p::before{content: \'♥\';color: red;}p::after{content: \'♥\';color: orange;}</style><body><p>我是一只快乐的程序猿</p></body>
结果：
