2 css选择器

Posted 2021-12-28 xuanjian-91

CSS 属性选择器
	通过属性来选择元素
 #intro font-weight:bold;//id选择器				
		[title] color:red; //选择有title属性的所有元素			
		[title=W3School] color:red; //选择title=W3School属性的所有元素				
		[title~=hello]  color:red; //选择title包含hello的所有元素，hello前后必须有空格		
		[title|=hello]  color:red; //选择title包含hello的所有元素，hello后必须有——	
		[title*=hello] color:red; //选择title包含hello的所有元素	
		[title^=hello] color:red; //选择title以hello开头的的所有元素
		[title$=hello] color:red; //选择title以hello结尾的所有元素
		input[type="text"]//选择type=text的所有input元素
 a[href][title] color:red;//根据多个属性进行选择
 planet[moons="1"][title="W3School"] color: red;//根据多个属性值进行选择

通配符选择器
		* color:red;//与任何元素匹配
		

多个选择器
	多个选择器一起写，用“，”隔开，相当于或的关系
	.important.warning background:silver;//多个类选择器是and的关系，即要包含important也要包含warning
	<p class="important warning">
			This paragraph is a very important warning.
	</p>


层级选择器
	通过上下文关系来选择元素，父子，兄弟，祖先
	
	CSS 后代选择器
		li strong 
			font-style: italic;
			font-weight: normal;
		
		CSS 相邻兄弟选择器
			结合符是“+”
			h1 + p margin-top:50px;	
			
	CSS 子元素选择器
		h1 > strong color:red;//元素下的第一个元素叫子元素
  
			


CSS 伪类 (Pseudo-classes)
		辅助选择元素
		修饰选择器，用冒号表示
		selector : pseudo-class property: value
		selector.class : pseudo-class property: value
		锚伪类
			a:link color: #FF0000		/* 未访问的链接 */
			a:visited color: #00FF00	/* 已访问的链接 */
			a:hover color: #FF00FF	/* 鼠标移动到链接上 */
			a:active color: #0000FF	/* 点击时的样式*/
			
			a.red : visited color: #FF0000
			p:first-child font-weight: bold;//元素下的首个子元素p	
				first-child
				last-child
				nth-child（1）|（2n）|(2n-1)|(odd/even)
				nth-last-child（1）|（2n）|(2n-1)|(odd/even)
CSS 伪元素 (Pseudo-elements)
		辅助选择元素
		修饰选择器，用冒号表示
		selector:pseudo-element property:value;
		selector.class:pseudo-element property:value;
		p:first-line  color: #FF00FF //首行
		p:first-lettercolor: #FF00FF //首字母
		p.article:first-lettercolor: #FF00FF
		CSS2-before 伪元素
			":before" 伪元素可以在元素的内容前面插入新内容
			h1:beforecontent:url(logo.gif);
		CSS2 - :after 伪元素
			":after" 伪元素可以在元素的内容之后插入新内容。
			h1:aftercontent:url(logo.gif);