CSS第三章 CSS选择器

最新推荐文章于 2024-04-24 10:57:13 发布

guanerkoushi

最新推荐文章于 2024-04-24 10:57:13 发布

阅读量350

点赞数 1

分类专栏： Web开发文章标签： css

本文链接：https://blog.csdn.net/Xiaolei233/article/details/116625255

版权

CSS选择器三、CSS选择器ID选择器CLASS选择器(类选择器)标签选择器(TAG选择器)chrome控制台快捷键f12可在elements中查看属性有没有生效三、CSS选择器ID选择器格式：css: #elem{}html: id=“elem”1. ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。2. 命名的规范，由字母、下划线_、中划线-、字母（并且第一个不能是数字）3. 驼峰写法 : searchButton (小驼峰)推荐 SearchButton (大驼峰)

摘要由CSDN通过智能技术生成

CSS选择器

三、CSS选择器

chrome控制台快捷键f12
可在elements中查看属性有没有生效

三、CSS选择器

每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

css选择器的主要作用：对HTML页面中的元素实现一对一，一对多或者多对一的控制。

CSS选择器就是用于指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

1. ID选择器

格式：

css: #elem{}      
html: id="elem"

1. ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
2. 命名的规范，由字母、下划线_、中划线-、字母（并且第一个不能是数字）
3. 驼峰写法 : searchButton (小驼峰)推荐 SearchButton (大驼峰) searchSmallButton
短线写法：search-small-button 推荐
下划线写法：search_small_button

快捷创建如下：输入div#名字回车
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
   background: brown;}
        #div2{
   background: cadetblue;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这又是一个块</div>
    <div id="searchButton"></div>
</body>
</html>

css中基本命名整理

常用的CSS命名规则   

1.注释的写法:   
/* Footer */   
内容区    
/* End Footer */

2.id的命名:  
(1)页面结构   
容器: container 
页头：header    
内容：content/container   
页面主体：main   
页尾：footer   
导航：nav   
侧栏：sidebar   
栏目：column    
页面外围控制整体布局宽度：wrapper   
左右中：left right center   

(2)导航   
导航：nav    
主导航：mainbav   
子导航：subnav   
顶导航：topnav   
边导航：sidebar   
左导航：leftsidebar   
右导航：rightsidebar   
菜单：menu    
子菜单：submenu   
标题: title    
摘要: summary   

(3)功能   
标志：logo   
广告：banner   
登陆：login    
登录条：loginbar   
注册：regsiter   
搜索：search   
功能区：shop 
标题：title    
加入：joinus   
状态：status   
按钮：btn   
滚动：scroll   
标签页：tab   
文章列表：list   
提示信息：msg   
当前的: current   
小技巧：tips   
图标: icon   
注释：note   
指南：guide  
服务：service   
热点：hot 
新闻：news   
下载：download   
投票：vote    
合作伙伴：partner   
友情链接：link   
版权：copyright   

3.class的命名:    
(1)颜色:使用颜色的名称或者16进制代码,如   
.red {
    color: red; }   
.f60 {
    color: #f60; }   
.ff8600 {
    color: #ff8600; }    

(2)字体大小,直接使用”font+字体大小”作为名称,如  
.font12px {
    font-size: 12px; }   
.font9pt {
   font-size: 9pt; }   

(3)对齐样式,使用对齐目标的英文名称,如   
.left {
    float:left; }    
.bottom {
    float:bottom; }    

(4)标题栏样式,使用”类别+功能”的方式命名,如   
.barnews {
    }   
.barproduct {
    }   


主要的 master.css   
模块 module.css   
基本共用 base.css   
布局，版面 layout.css   
主题 themes.css   
专栏 columns.css   
文字 font.css   
表单 forms.css   
补丁 mend.css   
打印 print.css

2. CLASS选择器(类选择器)

格式：

css: .elem{}      
html: class="elem"

1. class选择器是可以复用的。
2. 可以添加多个class样式。 (在class类中添加空格)
3. 多个样式的时候，样式的优先级根据CSS中的顺序(style标签中)决定，而不是class属性中的顺序。
4. 标签+类的写法

快捷创建如下：
在这里插入图片描述

验证1.2.3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* #div1{background: brown;}
        #div2{background: cadetblue;} */
        /* .box{background: cornflowerblue;} */
        .box{
   background: crimson;}
        .content{
   font:bold 20px arial;}
    </style>
</head>
<body>
    <!-- <div id="div1">这是一个块</div>
    <div id="div2">这又是一个块</div>
    <div id="searchButton"></div> -->
    <!-- <div class="box">这是一个块</div>
    <div class="box">这又是一个块</div>
    <p class="box">这是一个段落</p>-->
    
    <div class="box content">这是一个块</div> -->

</body>
</html>

验证4：标签+类的写法
例：只想让p标签带有class的box元素被选得到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.box{
   background: crimson;}
    </style>
</head>
<body>
    <div class="box">这是一个块</div>
    <div class="box">这又是一个块</div>
    <p class="box">这是一个段落</p>
</body>
</html>

3. 标签选择器(TAG选择器)

格式：

css: div{}         
html: < div>< /div>

使用的场景：
1. 去掉某些标签的默认样式时
2. 复杂的选择器中，如层次选择器

4. 群组选择器(分组选择器)

css: div,p,span{}
常用

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <tit

最低0.47元/天解锁文章

guanerkoushi

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS第三章 CSS选择器

CSS选择器三、CSS选择器ID选择器CLASS选择器(类选择器)标签选择器(TAG选择器)chrome控制台快捷键f12可在elements中查看属性有没有生效三、CSS选择器ID选择器格式：css: #elem{}html: id=“elem”1. ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。2. 命名的规范，由字母、下划线_、中划线-、字母（并且第一个不能是数字）3. 驼峰写法 : searchButton (小驼峰)推荐 SearchButton (大驼峰)
复制链接

扫一扫