CSS样式详解之伪类元素及CSS3选择器

目录

  • 一、伪类元素
  • 二、CSS3选择器
    • 1. 相邻选择器(+)
    • 2. 兄弟选择器(~)
    • 3. 指定选择器(nth-of-type(n))
    • 4. 子元素指定选择器(子元素匹配选择器)
    • 5. 属性选择器
      • ① [ 属性名 ]
      • ② [ 属性名=属性值 ]
      • ③ [ 属性名~=属性值 ]
      • ④ [ 属性名^=属性值 ]
      • ⑤ [ 属性名$=属性值 ]
      • ⑥ [ 属性名*=属性值 ]
    • 6.高亮选择(::selection)
    • 7. 非内容选择器
    • 8. 启禁用选择器(enabled disabled)
    • 9. Query选择器

一、伪类元素

emsp;emsp;在CSS中,hoveractive等是CSS中最常用也是最基础的伪类操作,除伪类操作之外,还有伪类元素(before,after),当我们使用伪类元素的时候,需要同时在CSS样式中使用contentcontent中的内容是一个行内元素(文本状态),不支持设置宽高,当我们对带伪类元素的进行操作的时候,可以通过对该样式添加一个float:left,就可以对该样式的宽高进行操作了。

.fs{
	width:200px;
	height:200px;
	background:red;
	margin-top:200px;margin-left:200px;
	position:relative;
}
.fs:before{
	width:100px;
	height:100px;
	background:green;
	float:left;
	position:absolute;
	left:0%;
}

emsp;emsp;当我们对带有伪类元素的样式添加position的时候,如果对其left等进行操作,此时该样式的父级是body,所以当我们对带有伪类元素的样式进行操作的时候,需要对他的父级元素添加position:relative;
emsp;emsp;带after和带before两个伪类元素的样式使用基本上是一致的,只不过一个在前一个在后。带伪类元素的样式不是一个真的元素,只是对主元素的一个附属。

二、CSS3选择器

1. 相邻选择器(+)

emsp;emsp;在CSS3中,相邻选择器是一个“+”,当我们需要使用的时候,只需要将已知的元素后面加上“+”以及元素名称即可。相邻选择器只会选择同级元素的后面的第一个元素。

//ex:
style{.fs{color:red;}  .fs+li{color:blue;}}
body{    
	<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    }

emsp;emsp;相邻选择器只能向后选择,不能向前选择。但是相邻选择器可以叠加使用

.fs+li+li+li{
	color:green;
}
.fs+li+.sky>span{color:white;}

2. 兄弟选择器(~)

emsp;emsp; 兄弟选择器使用和相邻选择器类似,都只会选择其同级的后面元素,只不过兄弟选择器会选择其后面的所有元素。
emsp;emsp; 兄弟选择器用“~”来进行表示。

.fs{color:red;}
.fs~li{color:blue;}
.fs~div{color:green;}

3. 指定选择器(nth-of-type(n))

emsp;emsp; 指定选择器通过用nth-of-type()来选择父元素下面的第几个子元素,第一个子元素为1而不是0。
emsp;emsp; n也可以是odd(单数)和even(双数)。
emsp;emsp; 同时我们还可以自己定义规则,如3n,此时是3倍数的子元素会被选中。后面的符号只支持加减。

特殊:nth-last-of-type(n)
emsp;emsp;nth-last-of-type(n)是从后往前进行寻找。方法和nth-of-type()相同。

4. 子元素指定选择器(子元素匹配选择器)

emsp;emsp;子元素指定选择器使用nth-child(n)来进行表示,第一个元素用1表示,而不是0。
emsp;emsp;原理:根据我们所选元素去寻找它的父级,然后再在这个父级的子元素中寻找我们需要的第几个元素。
当有其他类型元素是我们所选定的数值位置的元素,则不起作用。
emsp;emsp;兄弟用法:nth-last-child。

5. 属性选择器

① [ 属性名 ]

emsp;emsp;当使用这种方法的时候,只要包含这个属性名的元素都会被选中。

<style>
div[fs]{
	color:red;
}
</style>

② [ 属性名=属性值 ]

emsp;emsp;当使用这种方法的时候,必须属性名和属性值完全一致才会被选中。

③ [ 属性名~=属性值 ]

emsp;emsp;当使用这个方法的时候,只要属性名中包含这个属性值即可被选中。

④ [ 属性名^=属性值 ]

emsp;emsp;当时使用这种方法的时候,只要属性名中包含的属性值中,该属性值位于第一位,则会被选中。

⑤ [ 属性名$=属性值 ]

emsp;emsp;当时使用这种方法的时候,只要属性名中包含的属性值中,该属性值位于最后一位,则会被选中。

⑥ [ 属性名*=属性值 ]

emsp;emsp;当使用这种方法的时候,只要属性名中包含的属性值中,包含该属性,哪怕是在其他属性值内,都会被选中,但是如果之间有空格则不行。

6.高亮选择(::selection)

emsp;emsp;高亮选择是制作个性化页面中常用的操作,用::selection表示。
emsp;emsp;可以设定四个样式:背景、字体颜色、鼠标选中状态、轮廓属性。

.fs::selection{
	background:red;
	color:green;
	cursor:pointer;
	outline:#00FF00 dotted thick;
}

7. 非内容选择器

emsp;emsp;该选择器用于删除已经选择到的元素。
使用方法:
emsp;emsp;元素名称:not(属性值,属性值)
注:如果是自定义属性需要使用 [ 属性名=属性值 ]这种方法选择。

div:not(.sky,.busy,[blue='1111]);

8. 启禁用选择器(enabled disabled)

emsp;emsp;启禁用选择器用enabled和disabled进行表示,一个元素默认为enabled,当我们对元素设定为disabled的时候,则不能选择。

   fs:enabled{   }
   fs:disabled{   }
   //可以通过这种方式找到对应的元素   只对表单等有作用

9. Query选择器

emsp;emsp; Query选择器分为唯一选择器和群组选择器。
唯一选择器:
父级.querySelector(‘选择器名称’)

document.querySelector('div[blue='kkk]');
document.querySelector('div').innerHtml='abcd;

群组选择器:
父级.querySelectorAll(’ 选择器名称 ');

document.querySelectorAll('div,input,span');
document.querySelector('div')[0].innerHtml='abcd;

你可能感兴趣的:(前端学习,#,CSS,css,css3,前端)