css选择器有哪些选择器

css选择器有哪些选择器？

1.选择符(器)使用基本语法

　　选择符｛属性1：属性值1;

　　属性2：属性值2;

　　属性3：属性值3;

　　…..:…….;

　　}

　　2.标记选择器(直接使用HTML标签做选择器)

　　second.html

　　<!doctypehtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>标记选择器</title>

　　<linkhref="second.css"type="text/css"rel="stylesheet">

　　</head>

　　<body>

　　标记选择器(直接使用html标签做选择器)

　　</body>

　　</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

　　<!doctypehtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>类选择器</title>

　　<linkhref="second.css"type="text/css"rel="stylesheet">

　　</head>

　　<body>

　　<pclass="text">类选择器(为每一个标签设置一个类名，CSS可通过类名为标签设置样式，不同标签类名可以相同，

　　相同可以共用同一个样式)---CSS中用标签名.类名或者.类名表示

　　</body>

　　</html>

　　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

　　<!doctypehtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>ID选择器</title>

　　<linkhref="second.css"type="text/css"rel="stylesheet">

　　</head>

　　<body>

　　<pclass="text"id="textp1">ID选择器(为每一个HTML标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)

　　----CSS中用#id值{}来表示

　　</body>

　　</html>

　　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

　　<!doctypehtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>包含选择器</title>

　　<linkhref="second.css"type="text/css"rel="stylesheet">

　　</head>

　　<body>

　　<pclass="text"id="textp1"><ahref="#"class="link">ID选择器</a>

　　(为每一个html标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)

　　----CSS中用#id值{}来表示

　　</body>

　　</html>

　　second.css

　　

　　pa{

　　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

　　<!doctypehtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>子选择器</title>

　　<linkhref="second.css"type="text/css"rel="stylesheet">

　　</head>

　　<body>

　　<pclass="text"id="textp1">

　　<ahref="#"class="link">子选择器</a>

　　（IE浏览器不支持）：中间不能包含其他标签；CSS中标签1>标签2（子标签）表示

　　

　　</body>

　　</html>

　　second.css

　　p>a{

　　text-decoration:none;

　　font-family:黑体，宋体;

　　}

　　p{

　　font-size:23px;

　　}

　　7.相邻选择器:(CSS样式作用在最后一个标签)常用设置表格的列属性–CSS用标签1+….标签n表示

　　second.html

　　

　　<!doctypehtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>相邻选择器</title>

　　<linkhref="second.css"type="text/css"rel="stylesheet">

　　</head>

　　<body>

　　<pclass="text">

　　子选择器:

　　（IE浏览器不支持）：中间不能包含其他标签；CSS中标签1>标签2（子标签）表示

　　

　　<pclass="text1">

　　相邻选择器(CSS样式作用在最后一个标签)常用设置表格的列属性--CSS用标签1+....标签n表示

　　</body>

　　</html>

　　second.css

　　.text+.text1{

　　color:pink;

　　background-color:gray;

　　font-size:34px;

　　}

　　8.并集选择器:多个标签一起设置样式，用逗号隔开

　　second.css

　　

　　<!doctypehtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>并集选择器</title>

　　<linkhref="second.css"type="text/css"rel="stylesheet">

　　</head>

　　<body>

　　<pclass="text">

　　子选择器:

　　（IE浏览器不支持）：中间不能包含其他标签；CSS中标签1>标签2（子标签）表示

　　

　　<pclass="text1">

　　并集选择器:多个标签一起设置样式，用逗号隔开

　　</body>

　　</html>

　　second.css

　　.text,.text1{

　　color:pink;

　　background-color:gray;

　　font-size:34px;}

　　9.伪类(元素某一种状态，常用于描述超链接的状态：link(未访问状态);visited(已经访问过的状态);hover(鼠标经过状态);active(正在单击状态)CSS用标签名：状态表示

　　second.html

　　<!doctypehtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>伪类</title>

　　<linkhref="second.css"type="text/css"rel="stylesheet">

　　</head>

　　<body>

　　<ahref=""class="a1">伪类</a>

　　</body>

　　</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

　　<!doctypehtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>伪类</title>

　　<linkhref="second.css"type="text/css"rel="stylesheet">

　　</head>

　　<body>

　　伪元素(某个对象中某个元素的状态)CSS中用标签名：

　　伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])

　　 伪元素(某个对象中某个元素的状态)CSS中用标签名：

　　伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])

　　</body>

　　</html>

　　second.css

　　p:first-letter{

　　font-size:200%;

　　}

　　p:first-line{

　　color:red;

　　}

　　11样式优先级：内联选择器>ID选择器>类选择器（伪类，属性）>标记选择器

　　可以用!important;加大优先级

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-09-24 09:06
阅读 ( 452 )
分类：WEB前端开发

css选择器有哪些选择器

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »