笔记 - 10.2、HTML - CSS选择器笔记

简介: CSS选择器:     指这组样式所要针对的对象,可以是一个HTML标签,如body,h1,p,div,a等,也可以是定义了特定id或者class属性的标签,如:          --- 标签选择器:     <div></div> 可以用 div {color:red;}来选择 --- 类选择器:     <div class="red"&g
CSS选择器:
    指这组样式所要针对的对象,可以是一个HTML标签,如body,h1,p,div,a等,也可以是定义了特定id或者class属性的标签,如:
        
--- 标签选择器:
    <div></div> 可以用 div {color:red;}来选择

--- 类选择器:
    <div class="red"></div>可以用 .red { color:red;} 来选择div

--- id选择器:
    <div id="lay"></div>可以用 #lay{color:red;}来选择

--- 后代选择器:
    表示标签之间有嵌套关系的选择方式,如:
        <div>
            <p>p标签内容</p>
        </div>
    如以上代码要选择p标签,则可以写成
        div p {color:red;} 来表示,可以清晰的表明各标签之间的关系,可增强代码的阅读性。
    注意:每个标签之间用空格隔开。

--- 并集选择器:
    表示两个选择器之间的交集部分的样式,如:
        <div>
            外层div
            <div class="nei">
                内层div
            </div>
        </div>
    如要选择内层div,则可以写成:
    div.nei {color:red;} 来表示选择内层div,外层div不会收到影响。

    再如:
        <div>
            外层div
            <div id="nei">
                内层div
            </div>
        </div>
    以上选择内层div,可以写成:
        div#nei {color:red;} 来表示内层div,外层同样也不会收到影响。
    
    那么,并集选择器的写法就是:前面是一个标签选择器,其后紧贴一个类选择器或者是一个ID选择器,两者之间不能用空格隔开,必须紧贴着,再者是后面的选择器不能是标签选择器,只能是类选择器或者ID选择器。
目录
相关文章
|
11天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
8天前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS
|
19天前
|
前端开发 JavaScript
【CSS】选择器
【CSS】选择器
|
21天前
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
12 1
|
24天前
|
移动开发 前端开发 JavaScript
HTML与CSS二三事
HTML与CSS二三事
|
29天前
|
前端开发
CSS3选择器
【8月更文挑战第23天】CSS3选择器。
26 1
|
7天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
12 0
|
30天前
|
前端开发 JavaScript
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
|
20天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
|
20天前
|
Java 数据安全/隐私保护 安全
掌握Struts 2动态方法调用,让你的Web开发如虎添翼,轻松应对复杂业务需求!
【8月更文挑战第31天】在Web应用开发中,Struts 2框架因强大功能和灵活性而广受青睐。其动态方法调用(DMI)特性允许在不修改配置文件的情况下动态调用Action类中的方法,相比传统方法调用(需在`struts.xml`中为每个方法创建单独的`&lt;action&gt;`),DMI简化了配置并提升了灵活性、可维护性和扩展性。本文通过对比DMI与传统方法调用,展示如何利用DMI简化开发流程,并强调了在使用DMI时需注意的安全性和访问控制问题。
11 0