CSS的优先级、选择器、注意事项

CSS的优先级

内嵌样式>ID选择器>类选择器>标签选择器

内部样式>内部样式>外部样式

CSS的选择器

选择器:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。

1、基本选择器(如下:):

ID选择器:根据标签ID设置标签的样式(例如:#div1{height:100px;}),通常用来设置划分区间使用。

类选择器:根据标签的类设置标签的样式(例如:.div1{height:100px;}),通常用于设置不同标签却有相同样式。

标签选择器:根据标签名设置标签的样式(例如:div{height:100px;}),通常用于当前盒子内的同一标签名的同一样式。

2、通配符选择器

通配符选择器:使用通配符(*)设置标签的样式(例如:*{height:100px;}),使用本选择器会设置所有元素的样式,通常用于消除默认样式(例如:*{margin:0px;padding:0px;)。

3、属性选择器

属性选择器:用于设置含有该 属性-值 的标签的样式(例如:div[name=BT]{height:100px;}),通常用于区分盒子内相同标签名但是属性值不一样的标签。

4、结构伪类选择器

结构伪类选择器:用于设置不同状态或者不同子元素的样式(例如::after、:before、:focus、:link、:visited、:hover、:active、nth-child()、nth-of-type()等)。

5、层次选择器

后代选择器:为当前元素的所有后代的特定标签设置样式,格式:父元素+空格+后代元素(例如:div div{height:100px;})。

子代选择器:为当前元素的特有子代的特有标签设置样式,格式:父元素+大于号+后代元素(例如:div>div{height:100px;})。

通用兄弟选择器:为当前元素的后面的所有指定兄弟标签设置样式,格式:父元素+波浪线+后代元素(例如:div~div{height:100px;})。

        注意事项:如果后面的所有指定兄弟标签的标签名不为指定标签名(例如:html代码:<div></div><div></div>css代码:div~p{height:100px;}),则设置失败

相邻兄弟选择器:为当前元素的下一个指定的兄弟标签设置样式,格式:父元素+加号+后代元素(例如:div+div{height:100px;})。

        注意事项:如果下一个标签名不为指定标签名(例如:html代码:<div></div><div></div>css代码:div+p{height:100px;}),则设置失败

CSS的注意事项

设置CSS时需要注意一下注意事项:

①需要注意CSS的优先级

不要让别人设置自己的样式,除非是通用样式。(兄弟或者爸爸给你设置的样式不能被清除。就像别人想打你,你却不能让他停,你自己打自己,你却可以收手。)

③使用超链接结构伪类选择器的时候,必须按照link->visited->hover->active的顺序,不然会有BUG。

猜你喜欢

转载自www.cnblogs.com/GGYC/p/10352456.html