CSS中的选择器很多,比如:ID选择器,类选择器,通配符选择器,伪类选择器等等,接下来主要介绍常用的几个。
1.标签选择器
语法:标签名{},eg:h1{}//为所有的h1元素设置样式。
2.ID选择器
语法:#id名{}//id值唯一不能重复,eg:#top{}//为id为top的元素设置样式。
3.类选择器
语法:.class{},eg:.box{}//为所有的class值为box的元素设置样式。
4.组选择器
语法:选择器1,选择器2,选择器N{},eg:#box1,.box2,p{}//为id为box1,class为box2和p的元素共同设置样式。
5、通配符选择器
语法:*{},eg:*{font-size:16px}//将整个页面字体大小设为16px。
6.后代选择器
语法:选择器1选择器2{},eg:p.aa{}//选中指定祖先元素p的指定后代.aa。
7.子元素选择器
语法:父元素>子元素{},eg:p>.box{}//选中父元素p的指定子元素.box。注意与后代元素选择器的区别
8.伪类选择器
伪类可以用来表示一些特殊的状态,如:
:link-未访问过的超链接。
:visited-已访问过的超链接。
:hover-鼠标经过的元素。
:active-正在点击的元素。
eg:a:hover{color:red}//鼠标经过a标签时,颜色变为红色。
二、CSS选择器的优先级顺序
当同一属性的不同值都作用到了同一个元素时,如果定义的属性之间有冲突,那么应该用谁的值的,这个时候就涉及到CSS的优先级顺序了。
1.在属性后面使用!important会覆盖页面内任何位置定义的元素样式。
2.作为style属性写在元素内的内部样式
3.id选择器
4.类选择器
5.标签选择器
6.通配符选择器
7.浏览器自定义或继承的
@ css选择器识别范围?
css选择器优先级核心:每个选择器本身有优先级,作用范围越具体优先级越高。
CSS优先级从高到低分别是:
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器选择器
当CSS样式的规则由多个选择器组成时,id选择器的权值为1000,class选择器为100,标签选择器为10,按权值求和的记过高低决定哪个优先。当两个css规则的权值相同时,谁更具体用谁,也就是权值高的选择器作用的越具体优先级越高。当两个选择器规则和权值都是一样,后面样式会覆盖前面的!
@ css新元素是选择器还是别的?
css中的所有元素都是选择器,不论新元素还是旧元素,都是对标签的选择。@ css文本属性有哪些?
1、css文本属性之文本中大小写字母转换—text-transform
属性值:
uppercase;(全部大写)
lowercase;(全部小写)
capitalize;(在所有小写单词中,首字母大写)
p{text-transform:uppercase;}
2、css文本属性之文本居中——text-align
属性值:
center;(居中)
left;(左边对齐)
right(右边对齐)
p{text-align:center;}
3、css文本属性之段落缩进—–text-indent
em(是以字为单位),±都可以
p{text-indent:3em;}
4.css文本属性之设置文字装饰效果——text-decoration
属性值:
none(去掉下划线)
underline(加下划线)
overline(加上划线)
line-through(加删除线)
a{text-decoration:none;}
5.css文本属性之设置段落行高—-line-height
属性值:百分比,px,数字
a{line-height:13px;}
6.css文本属性之设置字词间距
word-spacing(只对英文有用)
letter-spacing(汉字和英文都可以)
p{letter-spacing:16px;}
7.css文本属性之段落间距-margin
p{margin:66px;}
8.css文本属性之边框——border
属性值有三个:大小,颜色,样式;
边框样式有:solid(实线),dashed(虚线),dotted(点线)
p{border:3pxlightgreensolid;}
9.css文本属性之空格——white-space
属性值:
pre;(与预设一样)
nowrap;(文字不自动换行)
inherit;(继承父本)
normal;(显示一个)
p{white-space:pre;}
10.css文本属性之设置输入法状态-ime-mode
属性值:
auto;默认
active;激活本地语言输入法;
inactive:激活非本地语言输入法;
disabled;禁止输入法,不能输入汉字
你是要学习相关知识吗?推荐你去优就业!
如果觉得《css中的属性选择器有哪几种 CSS中有哪些常用选择器 – CSS – 前端 mvc js css路径》对你有帮助,请点赞、收藏,并留下你的观点哦!