小编给大家分享一下css选择器的使用方法有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
专注于为中小企业提供成都做网站、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业天峻免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
1.选择符(器)使用基本语法
选择符{ 属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
…..: …….;
}
2.标记选择器(直接使用HTML标签做选择器)
second.html
标记选择器 标记选择器(直接使用html标签做选择器)
second.css
p{ font-size:34px; text-align:left; text-transform:uppercase; font-family:黑体,宋体; text-indent:3em; text-decoration:line-through; font-weight:bolder; letter-spacing:0.5em; line-height:3px; margin:34px; padding:23px; }
3.类选择器(为每一个标签设置一个类名,CSS可通过类名为标签设置样式,不同标签类名可以相同,相同可以共用同一个样式)-CSS中用标签名.类名或者.类名表示
second.html
类选择器 类选择器(为每一个标签设置一个类名,CSS可通过类名为标签设置样式,不同标签类名可以相同, 相同可以共用同一个样式)---CSS中用标签名.类名或者.类名表示
second.css
.text{ font-variant:small-caps;/*小型大写字母*/ font-family:宋体,黑体; font-style:italic; text-transform:lowercase; font-size:35px; text-indent:3em; text-decoration:overline; font-weight:bold; letter-spacing: 1px; line-height:3em; font-variant:small-caps; text-align:right; }
4.ID选择器(为每一个HTML标签设置一个唯一的ID,CSS可以通过id来为标签设置样式)
—-CSS中用#id值{ }来表示
second.html
ID选择器 ID选择器(为每一个HTML标签设置一个唯一的ID,CSS可以通过id来为标签设置样式) ----CSS中用#id值{ }来表示
second.css
.text{ font-variant:small-caps;/*小型大写字母*/ font-family:宋体,黑体; font-style:italic; text-transform:lowercase; font-size:35px; text-indent:3em; text-decoration:overline; } #textp1{ font-weight:bold; letter-spacing: 1px; line-height:3em; font-variant:small-caps; text-align:right; }
5.包含选择器(后代选择器:可跨代,跨标签):在一个标签里包含另一个标签
second.html
包含选择器 ID选择器 (为每一个html标签设置一个唯一的ID,CSS可以通过id来为标签设置样式) ----CSS中用#id值{ }来表示
second.css
p a{ text-decoration:none; font-size:25px; background-color:pink; } .text{ font-size:21px; font-style:normal; text-transform:lowercase; text-indent:3em; font-weight:bold; letter-spacing:0.7em; line-height:27px; }
6.子选择符(IE浏览器不支持):中间不能包含其他标签;CSS中用 标签1 >标签2(子标签) 表示
second.html
子选择器 子选择器 (IE浏览器不支持):中间不能包含其他标签;CSS中 标签1 >标签2(子标签) 表示
second.css
p>a{ text-decoration:none; font-family:黑体,宋体; } p{ font-size: 23px; }
7.相邻选择器:(CSS样式作用在最后一个标签)常用设置表格的列属性–CSS用标签1+….标签n表示
second.html
相邻选择器 子选择器: (IE浏览器不支持):中间不能包含其他标签;CSS中 标签1 >标签2(子标签) 表示
相邻选择器(CSS样式作用在最后一个标签)常用设置表格的列属性--CSS用标签1+....标签n表示
second.css
.text+.text1{ color:pink; background-color:gray; font-size:34px; }
8.并集选择器:多个标签一起设置样式,用逗号隔开
second.css
并集选择器 子选择器: (IE浏览器不支持):中间不能包含其他标签;CSS中 标签1 >标签2(子标签) 表示
并集选择器:多个标签一起设置样式,用逗号隔开
second.css
.text,.text1{ color:pink; background-color:gray; font-size:34px;}
9.伪类(元素某一种状态,常用于描述超链接的状态:link(未访问状态); visited(已经访问过的状态);hover(鼠标经过状态);active(正在单击状态)CSS用标签名:状态表示
second.html
伪类 伪类
second.css
a:link { color:blue; font-size:53px; text-decoration: none; } a:visited { color:red; font-size:193px; } a:hover { color:green; font-size:73px; } a:active { color:gray; font-size:183px; }
10.伪元素(某个对象中某个元素的状态)CSS中用标签名:伪类表示
常用的有(first-letter[作用于文字首字],first-line[作用于文字首行])
second.html
伪类 伪元素(某个对象中某个元素的状态)CSS中用标签名: 伪元素常用的有(first-letter[作用于文字首字],first-line[作用于文字首行])
伪元素(某个对象中某个元素的状态)CSS中用标签名: 伪元素常用的有(first-letter[作用于文字首字],first-line[作用于文字首行])
second.css
p:first-letter{ font-size:200%; } p:first-line{ color:red; }
11样式优先级:内联选择器>ID选择器>类选择器(伪类,属性)>标记选择器
可以用!important;加大优先级
以上是“css选择器的使用方法有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!