css3选择器

css3选择器

https://www.cnblogs.com/nyw1983/p/11628364.html

自定义属性：自己添加的属性，配合js，控制dom

属性选择器

权重为10

/* 不允许属性值有空格 */
a[class="links"]{
    background:red;
}



/* 多选   不允许属性值有空格 */
a[class="links"][ class="test"]{
    background:red;
}

image-20200715144946117

/* 只要出现links就被选中，即使后面有空格  */
a[class~="links"]{
    background:red;
}

/* 以xx开头 */
/* 只要出现样式以xx开头，就被选中  */
a[class^="active  links"]{
    background:red;
}

/* 只要出现样式以xx结尾，就被选中  */
a[class$="active  links"]{
    background:red;
}

/* 只要包含就被选中 */
a[class*="active  links"]{
    background:red;
}

伪类选择器

权重为10

动态伪类

image-20200715151142522

  • a:link 没有被访问时的样式
  • a:visited 被访问后的样式
  • a:hover 鼠标悬浮的样式
  • a:active 鼠标点中激活，按住不动 时的样式

LVHA

  • input输入框的 foucs 聚焦时的样式

UI元素状态伪类

image-20200715152148672

  • enabled 默认样式属性

  • checked 被选中的样式

    input[type="radio"]:checked{
    
}

  • 禁用之后的样式

    input[type="checkbox"]:disabled{
    
}

结构伪类

image-20200715153006491

image-20200715152921318

1. 选择文档根元素

html:rooot

2. 选择内容为空的元素，进行处理

ul li:empty{
	
}

3.选择某个元素的第一个元素

ul li:first-child{
    
}

4.选择某个元素的最后一个元素

ul li:last-child{
    
}

5. 选择第几个元素

ul li:nth-child(3){

6. 规律性间隔选择

/* 2n  3n+1  规律性间隔*/
li:nth-child(3n){
    
}

7. 正方向范围(从第n个开始)

/* 选中从第6个开始的子元素 */
li:nth-child(n+6){
    
}

8. 负方向范围(从开始一直到第n个)

/* 选中从第1个到第9个子元素。使用 :nth-child(-n+9) ，就相当让你选中第9个和其之前的所有子元素 */
a:nth-child(-n+9){
    
}

9. 中间范围选择

/* 选择第2个到底6个 */
.nav_box a:nth-child(-n+6):nth-child(n+2)

10.从最后开始，选择一个或者多个

ul li:nth-last-child{
    
}

11 .选择第奇数个元素

ul li:nth-child(odd){
    
}

12 .选择第偶数个元素

ul li:nth-child(even){
    
}

nth下面的元素必须是清一色的同一种类型元素 ，是先看第几个，再看选择的是哪个元素

13. 选择指定的标签的第几个标签

.boss h3:nth-of-type(3){
    
}

14. 选择指定标签的第一个标签

.boss div:first-of-type(){
    
}

15. 选择指定标签的最后一个标签

.boss h2:last-of-type(){
    
}

16. 从最后一个倒着数，选择标签

.boss div:nth-last-of-type(){
    
}

目的伪类

image-20200715165255950

需要加id

<div id="text1">
	/* id配合锚点 */
	<a href="text1">测试</a>
</div>

div{
    display:none;
}
div:target{
    display:block;
}

伪元素选择器

image-20200715171547076

层次选择器

image-20200715171642500

posted @ 2020-08-15 22:00  若梦plus  阅读(200)  评论(0)    收藏  举报