CSS选择器的那些事儿

最新推荐文章于 2022-05-21 17:12:23 发布
最新推荐文章于 2022-05-21 17:12:23 发布
阅读量135 收藏
点赞数
分类专栏： 笔记 文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tony_yang6/article/details/106220629
版权

css选择器用于明确当前css样式，尤其是内联样式表和外联样式表考虑当前css样式修饰的是那一个，或者那些HTML标签

1.三个基本选择器

元素选择器：

           HTML标签名作为选择器名字，可以用于修饰所有的对应当前签名的HTML标签

ID选择器：

           针对HTML标签ID属性进行选择修饰，并且ID属性具有唯一性

class选择器：

            针对HTML标签class属性进行选择修饰，class属性可以复用多个HTML标签

以上三个选择器权重排序

id>class>元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-三大基本选择器</title>
    <style>
        /* 标签选择器 */
        div {
            font-size: 50px;
            color: red;
        }

        /* ID选择器 【要求】#号开头*/
        #id1 {
            font-size: 30px;
            color: brown;
        }

        #id2 {
            font-size: 30px;
            color: red;
        }

        #id3 {
            font-size: 30px;
            color: blueviolet;
        }

        #id4 {
            font-size: 60px;
            color: indianred;
        }

        /* class选择器 */
        .cls1 {
            font-size: 30px;
            color: chocolate;
        }

    </style>
</head>
<body>
<!-- 标签选择器 -->
<div>烤羊排</div>
<div>羊肉串</div>
<div>羊肉汤</div>

<!-- ID选择器 【要求】ID不可以重复-->
<span id="id1">胡辣汤</span>
<span id="id2">羊杂汤</span>
<span id="id3">羊肉烩面</span>

<!-- class选择器 class属性可以复用 -->
<div id="id4" class="cls1">擀面皮</div>
<div class="cls1">肉夹馍</div>
<div class="cls1">冰峰</div>
<div class="cls1">油泼面</div>
</body>
</html>

2.属性选择器

根据属性名以及属性值进行选择元素，from==>input标签

 

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>05-属性选择器</title>
    <style>
        /* 属性选择器 */
        /* 根据属性名和属性值来约束修饰的HTML标签 */
        input[type='text'] {
            background-color: lightpink;
        }

        input[type='password'] {
            background-color: #7c1823;
        }

        /* 根据属性名来约束修饰的HTML标签 */
        font[size] {
            color: greenyellow;
        }

        font[face] {
            color: #7c1823;
            font-size: 30px;
        }
    </style>
</head>
<body>

<font size="7">你好CSS</font> <br>
<font face="黑体">你好CSS</font> <br>

<form action="02-特殊字符.html" method="get">
    <span>姓名:</span><input type="text" name="name"><br>
    <span>密码:</span><input type="password" name="password"><br>
    <span>头像:</span><input type="file" name="icon"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

3.伪类选择器

伪类选择器语法

           静止状态：a:link

           鼠标悬浮：a:hover

           触发状态：a:active

           已访问状态：a:visited

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            text-decoration: none;
        }
        /*
         a标签伪类选择器是有严格顺序的
         hover必须跟在link和visited的后面
         active必须跟在hover的后面
         */
        a:link {
            color: chocolate;
        }

        a:visited {
            color: purple;
        }

        a:hover {
            color: lightpink;
        }


        a:active {
            color: greenyellow;
        }
    </style>
</head>
<body>
<h1><a href="http://www.dangdang.com">当当网</a></h1>
</body>
</html>

 

4.层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-层级选择器</title>
    <style>
        /* 层级选择器 */
        #id1 .cls1 {
            color: red;
            font-size: 30px;
        }

        #id2 .cls1 {
            color: greenyellow;
            font-size: 50px;
        }
    </style>
</head>
<body>
<div id="id1">
    <div class="cls1">
        82的农夫山泉
    </div>
</div>
<div id="id2">
    <div class="cls1">
        20年雪碧
    </div>
</div>
</body>
</html>

 

5.组合选择器

1.CSS样式中多个选择器使用

2.HTML标签class属性可以有多个值

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-组合选择器</title>
    <style>

        div, span, p, strong {
            color: red;
            font-size: 30px;
        }

        .size_class {
            width: 200px;
            height: 200px;
        }

        .font_class {
            color: #7c1823;
            font-size: 30px;
        }

        .bg_class {
            background-color: greenyellow;
        }
    </style>
</head>
<body>

<div>外星人</div>
<span>MacBook Pro</span>
<p>ThinkPad P</p>
<strong>神舟笔记本</strong>
<hr>

<!-- class属性有多个，空格隔开 -->
<div class="size_class font_class">烤面筋</div>
<div class="size_class bg_class">炸鸡</div>
<hr>

</body>
</html>

 

 

 

 

刘大哥就是6
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS选择器篇 一
限定小码农的博客
03-08 442
一、通配符选择器 1.通配符选择器常用 ‘*’号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。 2.基本语法格式：*{ 属性1：属性值1；属性2：属性值2；} 例1：使用该选择器定义样式，清除所有HTML标记的默认边距。 *{ margin：0； /*定义外边距*/ padding：0； /*定义内边距*/ } 说明:实际开发中不建议使用通配符选择器，因为它设...
CSS 选择器
qq_46291038的博客
08-19 533
一：选择器的种类 1.标签选择器 通过标签的名字，修改 css 样式 div{ width:200px; height:300px; } 2.通配符选择器 • 选择页面中所有的元素 *{ margin:0; padding:0; } 3.属性选择器 例子：例如<td>标签的一些符号含义： td[class] 带有class属性的td标签 td[class = ”a”] 类名为“a”的d.
前端——关于CSS选择器的那些事儿
Bingtangbgd的博客
05-21 430
前端——关于CSS选择器的那些事儿
css的那些事儿--css选择器的值得注意之处
codesWay的博客
08-15 313
直接上图：只要了解这个就行了： 还有就是： 1.内敛样式的权重为1,0,0,0，这也就是传说中的就近原则吧！ 2.还有就是利用“！important”，拥有最高的权重，注意！important要卸载某条样式声明之前（分号的前面）
CSS的那些事儿
09-29
#### 四、CSS选择器详解 - **基本选择器**： - **类型选择器**：直接选择特定类型的元素，例如 p { ... } 会选中所有的 `<p>` 元素。 - **类选择器**：选择具有特定类名的元素，例如 .example { ... }。 - **ID...
CSS那些事儿：掌握网页样式与CSS布局核心技术-书签扫描版
04-11
最后，本书可能还会涉及CSS性能优化，如减少选择器的复杂度、合理使用内联样式和外部样式表、以及如何利用CSS Sprites和Fontello等工具来优化图像和图标加载速度。 总的来说，《CSS那些事儿：掌握网页样式与CSS布局...
【代码】CSS那些事儿书中源码.rar
12-24
- **选择器**：书中详细介绍了ID选择器、类选择器、元素选择器、属性选择器等，以及它们的组合使用，帮助读者理解如何精准地选中页面上的元素。 - **盒模型**：讲解了CSS盒模型的概念，包括content、padding、...
css那些事儿---css
01-24
这个主题“CSS那些事儿”涵盖了CSS的方方面面，包括基础语法、选择器、盒模型、布局技术、响应式设计、动画与过渡、以及一些高级技巧。 首先，我们从基础开始。CSS的基础语法包括属性、值和声明，它们构成了规则集...
Eureka的说明以及Eureka和Dubbo的区别
热门推荐
tony_yang6的博客
08-20 1万+
Eureka采用了cs的设计架构，Eureka Server作为服务注册功能的服务器，他是服务注册中心。而系统中的其他微服务，使用Eureka的客户端连接到Eureka Server并维持心跳连接。这样系统的维护人员就可以通过Eureka Server来监控系统的各个微服务是否正常运行。 在服务注册与发现中，有一个注册中心。当服务器启动的时候，会把当前自己服务器的信息。比如服务器的通信地址等以别名方式注册到注册中心上。另一方（消费者|服务提供者），以该别名的方式去注册中心上获取实际的服务通讯地址，然后再实
输入12345输出54321
tony_yang6的博客
04-29 7108
package day03; /** * 12345 输出54321 * @author * *1取出数据 *num%10； *2抹去数据 *、num/10 */ public class Demo9 { public static void main(String[] args) { int num=12345; while(num>0){ Sys...
jboss和tomcat的区别
tony_yang6的博客
11-05 4512
最近在设计公司1.0代码的时候出现了一个新应用服务器JBoss，那么对比于之前的tomcat有什么区别呢？ 对此，查找了网上的资料，做了以下的整理。 1.服务器不同 Tomcat是一个的Java servlet容器和baiWeb服务器。 JBoss是一个基于Java EE的开源应用程序服务器。 2.处理范围不同 Tomcat可以处理servlet和JSP。 JBoss可以处理servlet，JSP和EJB，JMS。 3.规范不同 Tomcat使用Sun Microsystems规范。 J
输入两个数判断之差的绝对值
tony_yang6的博客
04-29 3653
package day03; /** * 输入两个数，打印两个数之差的绝对值 * @author * */ import java.util.Scanner; public class Demo6 { public static void main(String[] args) { int num1 =0; int num2=0; Scanner sc = new S...
java.lang.Exception: 密钥库文件不存在: ~/.android/debug.keystore
tony_yang6的博客
04-25 3216
关于在Android开发过程中出现java.lang.Exception: 密钥库文件不存在: ~/.android/debug.keystore问题时，本人总结解决方式如下： 1.在.android目录下输入：keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA -validity 1000...
输出五行五列的*
tony_yang6的博客
04-29 2914
package day03; /** * 三角形等问题 * ***** ***** ***** ***** ***** * */ public class Demo10 { public static void main(String[] args) { for(int i=1;i<=5;i++){ for(i...
MySQL在执行子查询的时候需要加上as 别名
tony_yang6的博客
08-24 2781
<select id="getUser" parameterType="map" resultType="dd.client.model.Users"> SELECT * FROM (SELECT a.ID AS ID, a.CUSTOMER_ID AS CUSTOMER_ID, a.ACCOUNT AS ACCOUNT, a.PASSWORD AS PASSWORD, a.NAME AS NAME, a.SERVICE_END_TIME AS SERV.
使用循环输出a-z
tony_yang6的博客
04-29 2118
package day03; /** * 多种方式输出英文字母 * @author * */ public class Demo8 { public static void main(String[] args) { //while循环 char ch1 = 'a'; while(ch1 <= 'z'){ System.out.println(ch1); ...
MySQL字符串拼接、截取
tony_yang6的博客
09-11 2088
拼接字符串 1.oracle 字符串拼接：|| select '1' || '2' from dual; 2.MySQL 字符串拼接：concat(a,b) select concat('1','2') from dual; 截取字符串 1.MySQL 函数：SUBSTRING或者SUBSTR 1.1语法 位置 SUBSTRING(string,position); SUBSTRING(string FROM position); 位置和长度 SUBSTRING(stri...
CSS3选择器支持情况一览
"此资源提供了一个CSS选择器的支持列表，主要关注CSS3选择器在不同浏览器中的兼容性情况。更新于2009年6月30日，提及Firefox 3.5的发布，该版本与其他现代浏览器如Safari 3.1及更高版本、Opera 9.64及更高版本以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值