css选择器有哪些？css选择器使用总结-css教程-PHP中文网

首页

web前端

css教程

css选择器有哪些？css选择器使用总结

不言

Aug 18, 2018 pm 02:40 PM

css

本篇文章给大家带来的内容是关于css选择器有哪些？css选择器使用总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1.选择符(器)使用基本语法
选择符｛属性1：属性值1;
属性2：属性值2;
属性3：属性值3;
…..: …….;
}
2.标记选择器(直接使用HTML标签做选择器)
second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>标记选择器</title>
    <link href="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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>类选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
</head>
<body>
    <p  class="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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ID选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>包含选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1">  <a href="#" class="link">ID选择器</a>
        (为每一个html标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)
     ----CSS中用#id值{ }来表示    </p>
     </body>
     </html>

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>子选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1"> 
             <a href="#" 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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>相邻选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" > 
            子选择器:
            （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
    </p>

    <p class="text1">
        相邻选择器(CSS样式作用在最后一个标签)常用设置表格的列属性--CSS用标签1+....标签n表示    </p>
        </body>
        </html>

second.css

.text+.text1{
    color:pink;    
    background-color:gray;    
    font-size:34px;
    }

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

second.css

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>并集选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" > 
            子选择器:
            （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
    </p>

    <p class="text1">
        并集选择器:多个标签一起设置样式，用逗号隔开    </p>
        </body>
        </html>

second.css

.text,.text1{
    color:pink;
    background-color:gray;    
    font-size:34px;}

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

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <a href="" 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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类</title>
    <link href="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;加大优先级
相关推荐：

css 类选择器和id选择器

CSS之后代选择器与多类选择器

css 标签选择器、id选择器、类选择器实例

以上是css选择器有哪些？css选择器使用总结的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

我们如何标记Google字体并创建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由开发人员和设计师丈夫签名的附带项目，它们都是版式的忠实拥护者。我们一直在标记Google

永恒的Web开发文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人们询问了他们认为是关于网络开发的一些最永恒的文章的建议

与部分元素的交易Apr 12, 2025 am 11:39 AM

同一天发表了两篇文章：

使用JavaScript API的状态练习GraphQl查询Apr 12, 2025 am 11:33 AM

学习如何构建GraphQL API可能具有挑战性。但是您可以学习如何在10分钟内使用GraphQL API！碰巧的是，我得到了完美的

组件级CMSApr 12, 2025 am 11:09 AM

当一个组件生活在数据查询居住在附近的数据查询的环境中时，视觉组件与

将类型设置在圆上...带偏移路径Apr 12, 2025 am 11:00 AM

这里是Yuanchuan的一些合法CSS骗局。有此CSS属性偏移路径。曾几何时，它被称为Motion-Path，然后被更名。我

'恢复”在CSS中有什么作用？Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla开发人员的视频中解释了该主题。

现代恋人Apr 12, 2025 am 10:58 AM

我喜欢这样的东西。

See all articles

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

WebStorm Mac版

好用的JavaScript开发工具

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。