常见的css选择器

css语法

1、两部分组成：选择器和声明
选择器：把元素选取出来给其设置样式
选择器包含标签选择器，类型选择器，id选择器
声明包含属性和属性值，属性和属性值之间通过冒号连接，分号结尾
声明必须放在花括号中
如果一个属性具有多个属性值的话，属性和属性值之间不分先后顺序
空格或者换行不影响最终的效果显示
语法:选择器{属性:属性值;属性:属性值;属性:属性值;}
如:

p{color:red;}
/*将p标签的文字设为红色*/

选择器

标签选择器

语法:标签{属性:属性值}
如:

div{width:100px;height:100px;background-color:yellow}
/*将div的长宽设定为100px,背景颜色设为黄色*/

属性选择器

选择带有某属性的所有元素
语法:[属性]{属性:属性值}
如:

[href]{color: red;text-decoration: none;}
/*将带有p属性得到元素的字体改为红色,去掉下划线*/

class类选择器

语法:.类名 {属性:属性值}

如:

.demo{
    font-size:50px
}
/*设置类型为demo的字体大小为50px*/

id选择器

语法:#id {属性:属性值}

如:

#id1{
    font-size:50px
}
/*设置id为id1的字体大小为50px*/

交集选择器

选择符合所有选择器条件的元素
语法:选择器1选择器2选择器3 {属性:属性值}

如:

p.demo#id1{
    font-size:50px
}
/*设置id为id1类型为demo的p标签字体大小为50px*/

子元素选择器

选择当前选择器的子选择器对应的元素
语法:选择器1>选择器2>选择器3 {属性:属性值}

如:

div>.demo>id1{
    font-size:50px
}
/*设置div中类型为demo的儿子的id为id1的儿子字体大小为50px*/

<!--html代码-->
<div>
	<ul clss='demo'>
		<li id='id1'>这是列表</li>
	</ul>
</div>

后代(包含)选择器

选择当前选择器的子选择器对应的元素
语法:选择器1 选择器2 {属性:属性值}

如:

div id1{
    font-size:50px
}
/*设置div中包含的id为id1字体大小为50px*/

<!--html代码-->
<div>
	<ul clss='demo'>
		<li id='id1'>这是列表</li>
	</ul>
</div>

伪类选择器

选择的是标签的状态
常用的是a的状态
link
hover
activated
visited
语法🅰️状态{属性:属性值}

标签名:事件{
a:hober{
    font-size:50px
}
/*当鼠标滑动到a上时a中文字大小变为50px*/
}

选择器权重

标签选择器的权重为1

class选择器的权重为10

id选择器的权重为100

属性选择器的权重为10

伪类选择器的权重为10

包含选择器的权重：所包含选择器的权重之和

子选择器的权重：所包含选择器的权重之和

交集选择器权重为选择器之和

行内样式的权重为1000

通配符选择器 *

该页面下所有文本元素的颜色都会变为红色通配符是没有权重的,其他选择器的设置都会将其覆盖
作用:一般可以作为重置选择器,将不需要的html样式清零如html自带的8px外边距

*{
    color:red;
}
*{
    margin:0px;
    padding:0px
}