CSS选择器-------元素选择器、id选择器、class选择器、属性选择器、包含选择器、

本文链接：https://blog.youkuaiyun.com/weixin_45609811/article/details/101996220

元素选择器
元素名{
属性：属性值；
}

<style>
	//定义对div元素起作用的css样式
div{
    background-color:#000;
}
</style>

在CSS中定义了 * 作为通配符，可以匹配所有HTML元素
我们一般将它用于style的最前面来去除浏览器自带的内外边距

<style>
*{
	margin:0px;
	padding:0px;
}
</style>

id选择器
注意：各元素id值不可重复

// 对id值为dos的元素起作用
#dos{
}

class选择器
元素class值可重复

//对class值为dos的元素起作用
.dos{
}

属性选择器

<style>
//对含有id属性的div起作用
            div[id]{
			background-color: #aaa;  

		}
  //对id属性值包含xx的div起作用
		div[id*=xx]{
			background-color: #999;
		}
  //对id属性值以xx为开头的div起作用
		div[id^=xx]{
			background-color: #555;
			color: #fff;
		}
  //对id属性值等于xx的div起作用
		div[id=xx]{
			background-color: #111;
			color: #fff;
		}
  //对id属性值以xx结尾的div起作用
           div[id$=xx]{
           color:#00;
           }
</style>
<body>           
    <div>没有任何属性的div</div>
	<div id="a">带有id属性的div</div>
	<div id="zzxx">id属性包含xx子字符串</div>
	<div id="xxyy">以xx开头</div>
	<div id="xx">属性值为xx</div>
</body>

效果如下
在这里插入图片描述
包含选择器

//对class值为a的div起作用
div.a{
    background-color:#000;
}
//对所有class为a的，祖先是div的元素起作用(区别在于空格)
div .a{
     background-color:#000;
}

子选择器

/对class为a，父级是div的元素起作用
div>.a{
     background-color:#000;
}

另外还有选择器组合

//对div元素、class值为a的元素、id值为b的元素 起作用
div,.a,#b{
     background-color:#000;
}