CSS选择器

码仆的逆袭

已于 2023-09-26 21:52:56 修改

阅读量86

点赞数

分类专栏： CSS 文章标签： css css3

于 2023-01-17 14:39:30 首次发布

本文链接：https://blog.csdn.net/qq_34191426/article/details/128715685

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS选择器

🍓选择器

/**
 1. 标签选择器 又称 元素选择器
  	标签名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
div {
	width: 100px;
	height
}

/**
 2. 类选择器
  	.类名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
.nav {
	width: 100px;
	height
}

/**
 3. id选择器
  	#id {
		属性1:属性值;
		属性2:属性值;
	}
 */
#title {
	width: 100px;
	height
}

/**
 4. 通配符选择器
  	* {
		属性1:属性值;
		属性2:属性值;
	}
	作用：定义全局页面的样式，一般用于清除浏览器默认边距和html标签的默认样式
 */
* {
	width: 100px;
	height
}

/**
 5. 伪类选择器
  	:类名 {
		属性1:属性值;
		属性2:属性值;
	}
	常用伪类选择器有：
		链接伪类选择器：(a标签的顺序：link -> visited -> hover -> active，如果编写顺序不对就会导致样式失效，但是可以缺少)
			a. link     未访问的链接（初始状态）
		 	b. visited	已访问的链接（访问之后）
		 	c. hover	鼠标移动到链接上（鼠标悬停）
		 	d. active	选定的链接（激活状态，一般用于锚点定位）
		 结构伪类选择器：
		 	a. first-child  			选择第一个列
			b. last-child 				选择最后一个列
			c. nth-child(n)				选择第n列
			d. nth-child(even)			选择所有偶数列
			e. nth-child(odd)			选择所有的奇数列
			f. nth-child(n)				选择所有的列（n从0开始）
			g. nth-child(2n)			选择所有的偶数列
			h. nth-child(2n+1)			选择所有的奇数列
			i. nth-last-child(even)		从最后一个开始数，选择所有的偶数列
		目标伪类选择器：
			a. target					
 */
 
 /**
 6. 交集选择器
  	标签名.类名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
div.title {
	width: 100px;
	height
}

 /**
 7. 并集选择器 又称 群组选择器
  	标签名,.类名,#id名 {
		属性1:属性值;
		属性2:属性值;
	}
 */
h1,p,div{
	color: red;
}

 /**
 8. 后代选择器
  	父级选择器名称 子一级选择器名称  子二级选择器名称 {
		属性1:属性值;
		属性2:属性值;
	}
 */
.nav ul li{
	color: red;
}

 /**
 9. 子元素选择器（注意：子元素选择器必须与后代选择器一起使用，否则单独使用子元素选择器会变成后代选择器的作用）
  	父级选择器名称 > 直属子级选择器名称 {
		属性1:属性值;
		属性2:属性值;
	}
 */
.nav > li{
	color: red;
}

 /**
 10. 属性选择器
  		a. E[attr] 			存在attr属性即可
  		b. E[attr=val] 		属性值完全等于val
  		c. E[attr*=val] 	属性值包含val并且在任意位置
  		d. E[attr^=val] 	属性值以val打头
  		e. E[attr$=val] 	属性值以val结尾
 */
a[title] {
	color:red;
}

 /**
 11.  伪元素选择器 before 和 after
  	  before 和 after之所以被称为伪元素，因为他们并不是html里面真正所有的元素，但是拥有和html元素相同的属性,相当于在指定的盒子中加了一个行内元素，所以如果想要设置宽高，需要先进行元素转换
  	  伪元素选择器一般用于清除浮动
 */
div::before {
	content: "this ";
	border: 1px solid red;
	display:inline-block;
	width:100px;
	height:100px;
}
div::after {
	content: " a pan";
	border: 1px solid red;
}

 /**
 12.  层级选择器
 */
/*选择目标元素.firstOne下面的第一个兄弟标签li*/
.firstOne + li {
    background-color: pink;
    color: yellow;
}
/*选择目标元素.secondOne下面所有的兄弟标签li*/
.secondOne ~ li {
    background-color: pink;
    color: yellow;
}


 /**
 13.  否定伪类选择器
 */
ul > li:not(:first-child) {
    background-color: pink;
}

 /**
 14.  根元素，在HTML中，根元素永远是html
 */
:root,body {
    width: 100%;
    height: 100%;
}

 /**
 15.  UI伪类选择器
 * UI伪类选择器：
 *    :enabled：选中所有可用的form表单控件
 *    :disabled：选中所有禁用的form表单控件
 *    :focus:聚焦的表单控件
 *    :checked:选中状态的控件，一般针对radio和checkbox，注意：这个两个控件浏览器有默认样式，如果想要使我们的样式生效，需要先使浏览器的样式失效
 *    ::selection：选择状态的标签
 */
input:enabled {
    background-color: pink;
}

input:disabled {
    background-color: yellow;
    color: white;
}

input:focus {
    background-color: green;
}

input:checked {
    background-color: blue;
}

p::selection {
    background-color: pink;
    color: white;
}