第13章 CSS选择器[上]

最新推荐文章于 2024-09-06 11:26:45 发布
最新推荐文章于 2024-09-06 11:26:45 发布
阅读量57 收藏
点赞数
分类专栏： 阅-H5 文章标签： javascript ViewUI

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS选择器[上]</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!-- <b class="abc">这是一个加粗</b>

<p id="abc">这是一个<b>段落</b></p>

<b class="abc">这是一个加粗</b>

<span class="abc def">这是一个什么都没有</span>

<b class="abc">这是一个加粗</b>

<i lang="en-us">HTML5</i>

<a href="http://www.baidu.com">百度</a>
<a href="javascript:void(0)">好搜</a>
<a href="http://www.360.cn">360官网</a>

<input type="text">
<input type="password">


<ul>
	<li>我是儿子
		<ol>
			<li>我是孙子</li>
			<li>我是孙子</li>
		</ol>
	</li>
	<li>我是儿子</li>
	<li>我是儿子</li>
</ul> -->


<!-- <p>岁的老父空间岁的老父看似简单连反抗集散地发了看似简单连反抗三等奖联发科技送到路口附近送到路口附近三类贷款纠纷另外可减肥零售贷款纠纷绿色科技的法律看似简单连反抗四季的风</p>

<div>岁的老父空间岁的老父看似简单连反抗集散地发了看似简单连反抗三等奖联发科技送到路口附近送到路口附近三类贷款纠纷另外可减肥零售贷款纠纷绿色科技的法律看似简单连反抗四季的风</div>

 -->

<!-- <p>我ithis is ...</p>

<span>this is ...</span> -->

<a href="http://www.baidu.com">百度</a>

</body>
</html>

 

style.css

@charset "utf-8";

/** {
	border: 1px solid red;
}*/
/*通用选择器还匹配到了html和body元素*/

/*p {
	color: red;
}*/

/*#abc {
	color: green;
}

.abc {
	color: blue;
}*/

/*b.abc {
	color: orange;
}*/

/*.abc {
	color: red;
}
.def {
	font-size: 30px;
}*/

/*[href] {
	color: red;
}*/

/*[type="password"] {
	border: 1px solid red;
}*/

/*[href^="http"] {
	color: red;
}*/

/*[href$=".cn"] {
	color: red;
}*/

/*[href*="baidu"] {
	color: red;
}*/

/*[class~="def"] {
	color: red;
}*/

/*[lang|="en"] {
	color: red;
}*/

/*p,b,i,span {
	color: red;
}*/

/*#abc,.abc,i,span {
	color: blue;
}*/


/*p b {
	color: red;
}*/

/*p > b {
	color: red;
}*/

/*ul li {
	border: 1px solid red;
}*/

/*ul > li {
	border: 1px solid red;
}*/

/*p + b {
	color: red;
}*/

/*p ~ b {
	color: red;
}*/

/*p::first-line {
	color: red;
}*/

p::first-letter {
	color: red;
}

/*a::before {
	content: '点击';
}*/

a::after {
	content: '搜索';
}

 

iteye_17658
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第三章 css选择器的命名
weixin_47330762的博客
07-19 589
1.大小写问题 众所周知，在html中，标签和属性名是不区分大小写的，但是属性值是区分大小写的。所以在css中，标签选择器和只涉及属性名的选择器是不区分大小写的。 DIV{ ...code... } [CLASS]{ ...code.... } 2.命名的合法性问题 2.1最好类名选择器和ID选择器不要用数字开头，如果真的要用需要用 \xx (十六进制来代替直接写十进制)并且后面需要加上一个额外的空格比如.\31 -foo{}想表达的其实就是class=“1-foo”。当然了，这个空格是绝对的，比
CSS——常见CSS选择器的写法
weixin_64294248的博客
07-20 829
CSS是给页面设计的样式表，CSS选择器则是选择页面标签的方法，需要用选择器才能成功将要设置的属性应用到标签上。
【CSS系列】第二章 · CSS选择器
麟-小白的博客
04-02 1562
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！！！如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多呀！❤❤❤爱你们！！！目录【往期回顾】1.CSS基本选择器1.1通配选择器作用：可以选中所有的HTML元素。语法：* {属性名: 属性值;举例：/* 选中所有元素 */* {
html css样式选择器介绍
西凉的悲伤博客
12-06 788
对于 body h1 + p .special 指的是选择 body 标签下第一层的所有 h1 标签，再选择该 h1 标签后第一个相邻的 p 标签，再选择该 p标签内带有 special 类的标签；下面的 css 选择所有嵌套在 p 标签下 em 标签内的文字，并将其中的文字设置为橙色并加粗。下面的 css 会选择所有使用了 special 类的 li 标签以及 使用了 special 类的 p 标签，并将其中的文字设置为橙色并加粗。下面的 css 会将所有 h1 和 li 标签里的文字设置为红色。
⭐️CSS常见选择器
Python老吕的博客
02-28 2014
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。
CSS：选择器 / 14种类型
snowball的博客
07-06 2855
CSS中的UI元素伪类选择器主要用于定义用户界面元素的特殊状态样式，如链接的悬停（hover）、激活（active）状态，以及输入框的焦点（focus）状态等。：尽量使用更具体的选择器来定位你想要样式化的元素，这样可以减少不必要的性能开销，并提高样式表的可维护性。然而，需要注意的是，当通用选择器与其他选择器结合使用时，它仍然会匹配所有元素，但样式只会应用到那些也符合其他选择器条件的元素上。符号，它选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。在CSS中，ID选择器以井号。
css的nth选择器,CSS选择器之nth
热门推荐
weixin_39973410的博客
08-04 1万+
语法：E:nth-child(n){}说明：nth-child() 是CSS3的一个伪类选择器，匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。效果实例：一、数字序号写法 E:nth-child(5){} //数值123456789E表示标签，div, li, span等，下同。注意：数字的序号是从1开始的哦，不像很多编程语言中索引是0开始的，参数是必须大于0的整数。123456...
css常用选择器
一杯清泉
06-01 840
CSS常用选择介绍 三、类选择器-可以重复 1、单个class 2、多个class（1）情况一 只有class同时匹配到.aa.bb才显示红色，中间不能有空格（2）情况二 aa下面的bb会匹配到，中间要有空格。 表示class为.aa的后代p变成红色，即喔喔1变成红色，中间使用空格，如果有多个应使用多个额空格隔开：.aa .xx h3 { } 后代选择器不需要选择每一个节点，只需要选择关键的几个节点就可以达到效果。 这样上面的两个全是红色的了....
css 选择器 类 反选,必须记住的 30 类 CSS 选择器
weixin_31499265的博客
08-04 910
开篇有 30 个 CSS 选择器你必须烂熟于心，它们适应于当今各大主流浏览器。1.** {margin: 0;padding: 0;}*选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 margin 和 padding 清零。虽然这是有效的，但最好还是别这么做，这会使得浏览器的负担很重。*选择器也可以用在孩子选择器中。#container * {border: 1px sol...
CSS选择器
m0_67554048的博客
10-12 551
CSS选择器
第13章 CSS选择器[下]
08-11
理解并熟练掌握各种CSS选择器对于创建美观、响应式的网页至关重要。 一、通用选择器 通用选择器（*）可以应用于任何元素，为所有元素设置相同的样式。例如，`* {color: black;}` 将使页面上所有元素的文本颜色变为...
CSS选择器.docx
07-15
CSS选择器是CSS语言的核心部分，它用于选取页面上的HTML或XML元素，并应用相应的样式规则。理解并熟练掌握各种选择器对于网页设计和前端开发至关重要。以下是对标题和描述中提到的知识点的详细说明： 一、基本选择...
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1472
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
Vue双向绑定
m0_56131422的博客
09-01 764
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 480
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 822
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
界面控件KendoReact中文教程 - 如何创建动态进度条？
最新发布
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-06 1031
本文主要介绍如何使用KendoReact ProgressBar和ChunkProgressBar组件在React应用程序中创建动态进度条，欢迎下载新版控件体验！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值