CSS commonly used selector induction

Element selector (element is label, label is element)

	作用:通过元素选择器可以选中页面中的所有指定元素
	语法:标签名{}

id selector

	-通过我们的元素的id属性值选中唯一的一个元素
	-语法:
	#id属性值{}

Class selector

​ (We can set the class attribute for the element, similar to the id attribute,
except that the class attribute can be repeated​ For
elements with the same class attribute value, we can say that they are a group of elements
​ You can set multiple class attributes for an element at the same time values, between a plurality of values separated by spaces)

-通过元素的class属性值选中一组元素
-语法:
	.class属性值{}

Selector grouping (union selector)

	-通过选择器分组可以同时选中多个选择器对应的元素
	-语法:选择器1,选择器2,选择器3...选择器N{}

Wildcard selector

-可以选择页面中的所有元素
-语法:*{}

Composite selector (intersection selector)

-作用:
	可以选中同时满足多个选择器的元素
-语法:
	-选择器1选择器2选择器N{}

Note: For our id selector, it is not recommended to use our composite selector

Relationship between elements
	父元素:直接包含子元素的元素
	子元素:直接被父元素包含的元素
	祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
	后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
	兄弟元素:拥有相同父元素的叫做兄弟元素

Descendant element selector

	-作用:选择指定元素的指定后代元素
	-语法:祖先元素 后代元素{}

Child element selector

	-作用:选中指定父元素的指定子元素	
	-语法:父元素>子元素

Browsers of IE6 and below are not compatible

Pseudo-class selector

​ Pseudo-classes are specifically used to represent a special state of an element, such as: visited hyperlinks, such as ordinary hyperlinks, such as text boxes
that get focus​ When we need to style elements in these special states time, you can use pseudo-class

	:link
		-表示普通的链接(没有访问过的链接)
	:visited
		-表示访问过的链接

The browser judges whether one of our links has been visited through historical records.
Because of the privacy issues of our users, the visited pseudo-class can only set the font color (here only IE6 can set the font background color)

	:hover
		-表示鼠标移入的一个状态		
	:active
		-表示超链接被点击的一个状态

The above two can also be set for other elements (IE6 does not support setting these two pseudo-classes for elements other than hyperlinks)

The above two can also be set for other elements (IE6 does not support setting these two pseudo-classes for elements other than hyperlinks)

	:focus
		-获取焦点
	:selection
		-选择的内容使用样式

Note : This pseudo-class needs to be written in another way in Firefox: -moz-selection{}
-moz- Firefox-specific logo
If you need to be compatible with multiple browsers, here we can use these two sentences at the same time

Pseudo element selector

Use our pseudo-element to represent some special positions in the element

:first-letter

	-为p中第一个字符元素来设置一个特殊的样式(首字母)

:first-line

	-为p中的第一行元素设置一个特殊样式(首行)

:before

	-表示元素最前面的位置(部分)

    -一般我们的before都需要结合content这个样式一起使用,

通过content也可以向before或after的位置添加一些内容

:after

    -表示元素最后面的位置(部分)结束标签的前面

Attribute selector

作用:可以根据元素中的属性或属性值来选取指定元素

语法:

​			[属性名]选取含有指定属性的元素

​			[属性名="属性值"]选取含有指定属性值的元素

​			[属性名^="属性值"]选取属性值以指定内容开头的元素

​			[属性名$="属性值"]选取属性值以指定内容结尾的元素

​			[属性名*="属性值"]选取属性值以包含指定内容的元素

The title attribute, this attribute can be specified for any label, when the label is moved to the element, the value of the element’s title attribute will be displayed as the prompt text

Pseudo-classes of child elements

:first-child 可以选中第一个子元素

:last-child 可以选中最后一个子元素

:nth-child(n)可以选择任意位置的子元素(n代表的是第几个元素)

该选择器的后面还可以指定一个参数,选定要选中的第几个子元素

even  表示偶数位置的子元素

odd   表示奇数位置的子元素



:first-of-type

:last-of-type

:nth-of-type

​上面三个和:first-child这些非常类似,只不过child,是在所有的子元素中进行排列,而type,是在当前的类型的子元素中进行排列


Sibling element selector

Next sibling selector (adjacent sibling selector)
作用:可以选中一个元素后紧挨着的指定的兄弟元素

语法:前一个+后一个
Select all the sibling elements behind (sibling selector)
作用:选中该元素后面的所有兄弟元素

语法:前一个~后面所有

Negative pseudo-class

作用:可以从已选中的元素中剔除出某些元素

语法:     :not(选择器)

CSS3 selector summary graph

Insert picture description here

Guess you like

Origin blog.csdn.net/qq_42592823/article/details/114850680