`
schy_hqh
  • 浏览: 554909 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

CSS基础---选择器

 
阅读更多

 

选择器优先级

标签选择器(div) <  类选择器(class="content")  < id选择器(id="unique")  < style属性

 

标签选择器:

div {

color: red;

}

 

类选择器:

.content {

color: green;

}

 

id选择器:

#unique {

color: black;

}

 

style属性:

<div style="key1:value1; key2:value2">xyz</div>

 

扩展选择器

关联选择器

如,只对p标签中的b标签进行设置

<p>xxxxzzzyyyyy</p><p>xxxx<b>zzz</b>yyyyy</p>

p b {

background-color: blue;

color: #FFF;

}

 

组合选择器

对不同选择器进行相同样式的设置

如,对类选择器标签选择器同时进行设置

<div class="c1">xxxx</div>

<div>abc<b>eee<b>fgh</div>

.c1,div b {

background-color: blue;

color: #FFF;

}

 

伪元素选择器

预定义好的一系列css样式,在某个特定的时候由浏览器自动切换效果

如,a标签具有:

a:link 

a:visited 

a:hover 

a:active

link--->提供超链接标识

取消超链接的下划线

a:link {

 text-decoration: none;

 }

hover--->对div使用悬停效果:

div:hover {

color: white;

}

 

focus--->对具有焦点的元素进行属性设置

input:focus {

background-color:blue;

text-decoration: underline;

}

 

 

分享到:
评论

相关推荐

    CSS基础-派生选择器

    CSS基础-派生选择器,CSS入门必备资料

    day03(CSS01-基础选择器+字体文本样式).rar

    本压缩包“day03(CSS01-基础选择器+字体文本样式).rar”显然是一个关于CSS学习资源的集合,主要涵盖了基础选择器和字体文本样式的概念与应用。下面我们将深入探讨这两个关键知识点。 **一、基础选择器** 1. **...

    css基础-梦之都教学

    【CSS基础-梦之都教学】是为初学者设计的一套教程,旨在让学习者能够轻松掌握CSS的基础知识。CSS,即层叠样式表(Cascading Style Sheets),是一种用于定义HTML或XML(包括SVG、MathML等各种XML方言)文档呈现方式...

    HTML---CSS----基础知识及代码----各种小程序网页设计

    CSS选择器是其核心,可以按照元素名、类、ID或其他属性来选择要应用样式的HTML元素。基本的CSS样式包括颜色、字体、尺寸、位置等,例如: ```css body { font-family: Arial, sans-serif; background-color: #f0...

    CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性

    CSS基础选择器进阶: 在CSS中,选择器是用于选择HTML元素并应用样式的核心机制。选择器进阶是指在基础选择器的基础上,进一步学习和应用选择器的高级规则和语法。 1. 复合选择器: 复合选择器是指使用空格将多个...

    CSS经典练习-css-diner-develop.7z

    在这个练习中,你将从最基础的标签选择器开始,如`&lt;p&gt;`、`&lt;div&gt;`等,逐渐接触更复杂的类选择器、ID选择器、属性选择器,以及后代选择器、相邻兄弟选择器等。这些选择器的组合使用能实现更精细的控制,让你对CSS有更...

    CSS基础知识-1.pdf

    #### 二、CSS基础选择器 - **2.1 元素选择器(标签选择器)** 元素选择器允许开发者根据HTML标签名称来指定统一的样式。这种选择器简单直接,能够快速为页面中的所有同类标签设置相同的样式。例如,`p { color: ...

    CSS基础1-基础选择器+字体文本相关样式

    本资源摘要信息涵盖了CSS基础知识点,包括基础认知、基础选择器、字体和文本样式、Chrome调试工具、综合案例等方面的知识点。 一、基础认知 * CSS的介绍:层叠样式表(Cascading style sheets) * CSS的作用:给...

    广告------css---css

    1. **CSS基础**:CSS是由一系列选择器和声明组成的,选择器定位HTML或XML元素,而声明定义了这些元素的样式属性。例如,`p {color: red;}`会选择所有的段落元素并将其文字颜色设置为红色。 2. **CSS选择器**:选择...

    头歌教学实践平台 Web前端开发基础 CSS-基础选择器

    本教程将聚焦于CSS的基础选择器,这是学习CSS的第一步,对于构建美观、响应式的网页至关重要。通过理解并熟练运用这些选择器,开发者能够精准地定位到网页中的各个元素,为其设置样式。 一、通用选择器 通用选择器 ...

    css基础3-盒子模型

    * 优先级公式:继承 通配符选择器 标签选择器 类选择器 选择器 行内样式 !important * 注意点:!important 写在属性值的后面,分号的前面!不能提升继承的优先级,只要是继承优先级最低! PxCook 的基本使用 ...

    个人作业之JSP---CSS---HTML

    CSS3新增了更多的选择器、过渡效果、动画、多列布局、Flexbox和Grid布局等,大大增强了网页设计的灵活性。 在"company"这个项目中,初学者可能需要结合JSP处理动态数据,如从数据库获取信息,并用HTML来构建页面的...

    HTML+CSS基础教程-介绍HTML和CSS的基础知识 学习HTML基础语法、标签、CSS基础语法和选择器

    html----HTML+CSS基础教程(课件PPT版)----介绍HTML和CSS的基础知识。学习HTML基础语法、标签、CSS基础语法和选择器,以及它们的基本用法。

    JSP-HTML-CSS---PPT

    同时,开发者会用CSS来控制这些动态生成的内容的外观,比如使用类选择器来改变特定元素的样式,或者使用媒体查询来实现响应式设计。 在实际项目中,JSP常常与Servlets一起使用,Servlets负责处理HTTP请求,而JSP则...

    前端开源库-css-sprite-loader

    【CSS Sprite Loader】是前端开发中的一个重要工具,它是一个基于Webpack的加载器,主要用于处理CSS中的背景图片。在Web性能优化中,CSS Sprite技术是一种常见的方法,它将多个小图合并成一张大图(通常称为sprite...

    css--实验报告.doc

    4. **CSS基础知识** - **概念和特点**:CSS是层叠样式表,用于控制网页样式,提供了诸如字体、颜色、背景等丰富的格式化功能。 - **使用方式**:CSS可以通过内联样式、内部样式表和外部样式表等方式引入到HTML中。...

    day04(CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性).rar

    基础的选择器如元素选择器、类选择器和ID选择器是CSS的基础,但CSS还提供了更复杂的结构选择器和伪类/伪元素选择器。结构选择器包括子代选择器(`&gt;`)、相邻兄弟选择器(`+`)和后续兄弟选择器(`~`),它们允许我们...

    CSS笔记-011

    选择器是CSS的核心之一,分为基础选择器和复杂选择器。基础选择器包括标签选择器、类选择器和ID选择器。标签选择器按HTML标签应用样式,类选择器以"."前缀,通过HTML的class属性调用,ID选择器以 "#" 前缀,对应HTML...

    css----中文教程

    CSS的基本结构由选择器和声明组成。选择器指向我们想要应用样式的元素,而声明则定义了这些元素的样式属性和值。例如: ``` p { color: red; font-size: 16px; } ``` 在这个例子中,`p`是选择器,表示所有段落元素...

Global site tag (gtag.js) - Google Analytics