1、通用选择器“*”和元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>css选择器练习</title>

    <link rel="stylesheet" type="text/css" href="css.css">

</head>

<body>

    <h3>h3标签</h3>

    <p>h标签</p>

    <div>div内容</div>

</body>

</html>
@charset "UTF-8";

/* 通用选择器  “*” 作用于所有元素*/

*{

    color: #639;

}

/* 元素选择器 优先级高于通用选择器，即使将p样式置于*样式上面*/

p{

    color:#294;

}

2、id选择器

<body>

    <h3>h3标签</h3>

    <p id="hid">h标签</p>

    <div>div内容</div>

</body>

/* id选择器，优先级高于元素选择器，即使置于元素样式上面 */

#hid{

    color:#269;

}

3、类选择器

/***********************************两个类选择样式***********************************************/

/*******************************************************************************************************/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>css选择器练习</title>

    <link rel="stylesheet" type="text/css" href="css.css">

</head>

<body>

    <h3 class="class1">h3标签</h3>

    <h3>未引用h3.class1样式的h3标签，显示通用样式颜色</h3>

    <p class="class1" id="hid">h标签</p>

    <!-- 元素多类名，样式叠加，同种样式，根据优先级覆盖样式 -->

    <div class="class1 class2">div内容</div>

</body>

</html>

css.css文件代码

@charset "UTF-8";

/* 通用选择器  “*” 作用于所有元素*/

*{

    color: #639;

}

/* 元素选择器 优先级高于通用选择器，即使将p样式置于*样式上面*/

p{

    color:#294;

}

/* id选择器，优先级高于元素选择器，即使置于元素样式上面 */

#hid{

    color:#269;

}

/* 类选择器，颜色重新设置，在同时引用id选择器和类选择器时，虽然class1在下面，但最后效果是font-size叠加hid的color效果 */

/* 类选择器优先级低于id选择器 */

/* 同为类选择器，代码执行从上到下，不论引用顺序，则都会执行最下面代码样式（class2样式） */

.class1{

    font-size: 30px;

    color:#909;

}

.class2{

    font-size: 50px;

    color: aquamarine;

}

/* 指定某一特定元素 */

h3.class1{

    font-size: 20px;

    background: rgb(243, 188, 160);

    padding: 20px;

}

/****************************************总结**********************************************/

可以一步步屏蔽代码，看执行效果

css选择器学习（一）的更多相关文章

  1. html之css选择器学习

    相关内容: 什么是css选择器 标签选择器 类选择器 id选择器 并集选择器(分组选择器) 交集选择器 后代选择器 子标签选择器 属性选择器 相邻兄弟选择器 伪类选择器 伪元素选择器(伪对象选择器) ...

  2. CSS选择器学习小结

    关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(# ...

  3. CSS 选择器学习总结

    1.id 选择器 #idname{color:red;} 2.class选择器 .classname{} 3.标签选择器 div{} 4.通配符选择器 *{} 5. 属性选择器 [id]{ } 5.选 ...

  4. 记录：CSS选择器学习

    常用选择器:标签选择器.类选择器.ID选择器 子选择器(Child selectors) 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素. .con> ...

  5. css选择器学习（二）属性选择器

    属性选择器 /*******************************************css2中的属性选择器*************************************** ...

  6. css 选择器 (学习笔记)

    参考 http://zachary-guo.iteye.com/blog/605116 1. div+p  选择紧接在 <div> 元素之后的所有 <p> 元素.解释 : fi ...

  7. XPath、CSS 选择器 -学习地址

    http://www.w3school.com.cn/cssref/css_selectors.asp http://www.w3school.com.cn/xpath/xpath_syntax.as ...

  8. 第七十节，css选择器

    css选择器 学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 本章主要探讨 HTML5中  CSS选择器,通过选择器定位到想要设置样式的元素.目前CSS选择器的版本已经升 ...

  9. HTML&CSS基础学习笔记1.33-元素选择器

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

随机推荐

  1. CenOS 7 权限命令

    修改拥有者chown chown 拥有者名称 文件名 修改组chgrpchgrp 组名 文件名 修改权限 chmodchmod 权限 文件名

  2. Python小技巧：使用一行命令把你的电脑变成服务器

    不知道你有没有遇到这么一种情况,就是你有时候想要把电脑上的一些东西传输到你的手机或者 Pad ,你要么需要使用数据线连接到电脑,有时候还要装各种驱动才可以进行数据传输,要么需要借助第三方的工具,在局域 ...

  3. Postman和jmeter的区别

    1.创建接口用例集(没区别) Postman是Collections,Jmeter是线程组,没什么区别. 2.步骤的实现(有区别) Postman和jmeter都是创建http请求 区别1:postm ...

  4. Excel常见文本清洗函数

    1.=LEFT(text,[num_chars]) ​ 函数RIGHT具有相似功能 例如选出K列中,从左数前一个字符:= LEFT(k2,1) 2.=FIND(find_text,within_tex ...

  5. MySQL创建用户、为用户授权

    一.创建用户 1.root用户(管理员)登录,进入mysql数据库 mysql> use mysql Database changed 2.创建用户 1.创建用户: # 指定ip:192.168 ...

  6. I2C初始化结构体详解

    typedef struct { uint32_t I2C_ClockSpeed; /*设置SCL时钟频,此值不低于40000*/ uint16_t I2C_Mode; /* 指定工作模式,可选I2C ...

  7. dubbo中使用的zookeeper，netty以及javassist的Demo文件

    javassist测试Demo netty测试Demo zookeeper测试Demo

  8. Spring (2)框架

    Spring第二天笔记 1. 使用注解配置Spring入门 1.1. 说在前面 学习基于注解的IoC配置,大家脑海里首先得有一个认知,即注解配置和xml配置要实现的功能都是一样的,都是要降低程序间的耦 ...

  9. 写文章 通俗易懂 悲观锁、乐观锁、可重入锁、自旋锁、偏向锁、轻量/重量级锁、读写锁、各种锁及其Java实现！

    网上关于Java中锁的话题可以说资料相当丰富,但相关内容总感觉是一大串术语的罗列,让人云里雾里,读完就忘.本文希望能为Java新人做一篇通俗易懂的整合,旨在消除对各种各样锁的术语的恐惧感,对每种锁的底 ...

  10. （十七）Activitivi5之组任务分配

    一.需求分析 我们在实际业务开发过程中,某一个审批任务节点可以分配一个角色(或者叫做组),然后属于这个角色的任何一个用户都可以去完成这个任务节点的审批 二.案例 2.1 方式一:直接流程图配置中写死 ...