CSS核心基础 一些常见的选择器的使用

鳄鱼君

发表文章数:642

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS » CSS核心基础 一些常见的选择器的使用

要想将CSS样式应用于特定的HTML元素,首先要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。在CSS中有很多的选择器,包含标记(标签)选择器、类别选择器、id选择器、通配符选择器、标签指定选择器、后代选择器、并集选择器等,我们来简单介绍一下!

1.标记选择器(标签)
标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。他的基本语法格式为:
标记名 { 属性1:属性值1; 属性2:属性值2; ... }
2.类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名。其基本语法格式为:
.类名 { 属性1:属性值1; 属性2:属性值2; ... }
需要注意的是类名的第一个字符不能使用数字,并且严格区分大小写,一般采用小写的英文字符。
3.id选择器
id选择器使用“#”井号进行标识,后面紧跟id名,其基本语法格式如下:
#id名 { 属性1:属性值1; 属性2:属性值2; ... }

4.通配符选择器
通配符选择器用“*”星号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。他的基本语法格式为:
* { 属性1:属性值1; 属性2:属性值2; ... }
5.标签指定式选择器
标签指定式选择器,有两个选择器构成,其中第一个为标记选择器,第二个为class选择器或者id选择器,两个选择器之间不能有空格,比方说h1.space或p#one。
6.后代选择器
后代选择器用来选择元素或者元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分割。当编辑发生嵌套时,内层标记就成为外层标记的后代。
7.并集选择器
并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器都可以作为并集选择器的一部分。如果某些选择器定义的样式完全或部分相同,可利用并集选择器为他们定义相同的样式。

标签、ID、类别选择器

我们可以按照标签来选择,可以对不同的标签设置不同的样式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>标签选择器</title>
    <style type="text/css">
        p{color:red; }
        span{color:green;}
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <span>这是一个span标签</span>
</body>
</html>

存在多个相同标签的时候,我们可以在想要设置样式的标签中加入ID属性,需要注意ID是唯一不可重复,这样我们就可以根据ID的属性来选择标签,ID使用#号来表示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ID选择器</title>
    <style type="text/css">
        #one{color:red; } 
    </style>
</head>
<body>
    <p id="one">段落1</p>
    <p>段落2</p>
</body>
</html>

通常我们可以对某个标签设置class类及属性值,然后可以根据class的属性值来选择标签,class使用.选择:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>类别选择器</title>
    <style type="text/css">
        .one{color:red; } /*选择class="one"的标签设置样式*/  
    </style>
</head>
<body>
    <p class="one">段落1</p>
    <p>段落2</p>
</body>
</html>

指定选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>指定选择器</title>
    <style type="text/css">
        p.one{color: red;}  /*选择p标签class属性为one*/
        p.two{color: green;} 
        span.one{ font-size: 20px;}
    </style>
</head>
<body>
    <p class="one">选择器1</p>
    <p class="two">选择器2</p>
    <span class="one">选择器3</span>
    <span class="two">选择器4</span>
</body>
</html>

包含选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>包含选择器</title>
    <style type="text/css">
        .one div span{color: red;} /*选择div中的h4标签,而不是外部的h4*/
    </style>
</head>
<body>
    <div class="one">
        <div>
            <span>这是一个标题</span>
        </div>
                <span>这是一个标题</span>
    </div>
    <span>这是外部的一个标题</span>
</body>
</html>

分组选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>分组选择器</title>
    <style type="text/css">
        p,span,.one{color: red;} /* 简化选择标签的方式*/
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    
    <span>这是一个span标签</span>
    <div class="one">
        <p>这是div内部的p标签</p>
    </div>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>伪类选择器</title>
    <style type="text/css">
        p:hover{color: red;} /*鼠标放到p标签中显示红色*/
        p:active{color: blue;} /*鼠标点击p标签的时候显示红色*/
        a:link{color: pink;}  /*超链接在访问之前的状态*/
        a:visited{color: green;}  /*超链接在访问之后的状态*/
    </style>
</head>
<body>
<p>这是一个段落</p>
<a href="#">这是一个超链接</a>
</body>
</html>

通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>通用选择器</title>
    <style type="text/css">
        * {padding: 0;margin: 0; } /*选择页面所有的标签,一般用来初始化页面*/
    </style>
</head>
<body>
<p>这是一个段落</p>
<span>这是一个span标签</span>
</body>
</html>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS核心基础 一些常见的选择器的使用》 发布于2020-04-18

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

2 + 7 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册