本文将为大家详细介绍“CSS中的选择器有哪些”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“css中的选择器有哪些”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内
本文将为大家详细介绍“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>
<p>标记选择器(直接使用html标签做选择器)</p>
</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中用标签名.类名或者.类名表示</p>
</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值{}来表示</p>
</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值{}来表示</p>
</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（子标签）表示
</p>
</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（子标签）表示
</p>
<pclass="text1">
相邻选择器(CSS样式作用在最后一个标签)常用设置表格的列属性--CSS用标签1+....标签n表示</p>
</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（子标签）表示
</p>
<pclass="text1">
并集选择器:多个标签一起设置样式，用逗号隔开</p>
</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>
<p>伪元素(某个对象中某个元素的状态)CSS中用标签名：
伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])
<br>伪元素(某个对象中某个元素的状态)CSS中用标签名：
伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])</p>
</body>
</html>
second.css
p:first-letter{
font-size:200%;
}
p:first-line{
color:red;
}
11样式优先级：内联选择器>ID选择器>类选择器（伪类，属性）>标记选择器
可以用!important;加大优先级
1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""。2.内嵌样式，就是将CSS代码写在之间，并且用
进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上
感谢您能读到这里，小编希望您对“css中的选择器有哪些”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注编程网JavaScript频道！
--结束END--
本文标题: css中的选择器有哪些
本文链接: https://www.lsjlt.com/news/88506.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0