选择器及相关特性

基础选择器

标签选择器

相当于全选,在我看来局限性较大,也没啥意义的感觉,用处不太大

id选择器

有利于对于某个小盒子的部分属性进行改变,但是若是需要改的小盒子很多的话,就会很麻烦

在同一个html文件中尽量不要出现相同id

使用方法： #id

类选择器

有利于处理多个但并不是全部盒子,是对于id选择器的优化选择器。

在html文件中允许类名相同,并且类选择器主要就是为了处理类名相同情况的

使用方法：.类名

高级选择器

后代选择器

通过标签之间的嵌套关系,层级关系,限定范围再查找

使用方法：“.”+class+" "+后代

好处是啥：既然是高级选择器,那么肯定能够完成一些低级选择器完成不了的事情,就比如说“.class li”这里面,就是选中一个类中的全部的li,当然如果我们用基本选择器的id选择器肯定能做到,但是也太麻烦了把。

交集选择器

弥补了后代选择器的缺点。即更加细分了我们要找的标签

使用方法：多个标签同时使用

举例：li.one   所有的li标签中一个类名为one的部分。

并集选择器

有很多元素可能具有相同的css样式,我们可以将他们全部写出来,进行统一修改其某些属性。

使用方法：标签,标签,标签。。。。。

通配符

*（现已经不常用了,因为其效率不高,可以选中包括body在内的所有标签）

继承性与层叠性

继承性

某些元素具有默认属性,我们如果没有人为的进行更改的话,这些元素将一直体现默认属性。

float:无法继承     文本,字体属性可以继承。

层叠性

当我们同时对某些元素的属性进行设置时,最终属性体现为层叠在最上方的。

一些代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>css初学</title>

    <style>

        div,dd,dl,dt,p{

            margin: 0;

            padding: 0;

        }

         .ha dt{

             color: deepskyblue;

             font-family: "楷体";

             font-size: 40px;

             width: 120px;

             border: solid ;

         }

         .ha dd{

             color: deepskyblue;

             font-family: "楷体";

             font-size: 20px;

             width: 120px;

             border: solid ;

         }

         #hehe dt,#hehe dd{

             color: deepskyblue;

             font-family: "楷体";

             font-size: 20px;

             width: 120px;

             border: solid ;

         }

    </style>

</head>

<body>

    <!--本篇是对于高级选择器的使用-->

    <div class="ha">

        <div>

            <dl>

                <dt>汪星人</dt>

                <dd>吃饭</dd>

                <dd>睡觉</dd>

                <dd>看大门</dd>

                <dd>玩</dd>

                <dd>看电视</dd>

            </dl>

        </div>

    </div>

        <div class="haa">

        <div>

            <dl id="hehe">

                <dt>汪星人</dt>

                <dd>吃饭</dd>

                <dd>睡觉</dd>

                <dd>看大门</dd>

                <dd>玩</dd>

                <dd>看电视</dd>

            </dl>

            <dl id="xixi">

                <dt>喵星人</dt>

                <dd>吃饭</dd>

                <dd>睡觉</dd>

                <dd>抓老鼠</dd>

                <dd>玩</dd>

                <dd>看电视</dd>

            </dl>

        </div>

    </div>

</body>

</html>

<!--对于这里的交集选择器最好是最后一步是涉及到嵌套关系。-->

初窥css---选择器及相关特性的更多相关文章

  1. 了解HTML CSS选择器操作和特性

    子选择器 在CSS样式表中, 有时候我们需要为一个选择器进行再次的选择, 比如要为某段落标签下的<span>标签进行样式设定(<span>标签必须为段落标签下的第一代子元素, ...

  2. 初窥css---包含一些概念和一些文字样式

    初窥css CSS相关概念 全称是层叠式样式表.规定了html在网页上的显示样式.我们都知道css主要是负责装饰页面的,但是其实在HTML4之前,网页的样式与架构全部都是写在一起的,也是在HTML4之 ...

  3. CSS 选择器继承和层叠

    CSS选择器及其继承特性.层叠特性1.基本选择器  标记  id  class  这个就不再作介绍了 2.复合选择器  交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...

  4. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  5. jQuery源码学习（2）：选择器初窥

    选择器初窥 代码架构: jQuery选择器可以依照传入数据的类型分为五大类: 传入字符串:$("div"), $("#id"), $(".div1&q ...

  6. CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、

    与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...

  7. HTML+css基础 css的几种形式 css选择器的两大特性

    3.外联样式 css选择器的两大特性 1.继承性:所有跟文本字体有关的属性都会被子元素继承.且权重是0000. 2.层叠性:就是解决选择器权重大小的一种能力,就是看那个选择器的权重大.谁的权重大听谁的 ...

  8. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  9. Scrapy 1.4 文档 01 初窥 Scrapy

    初窥 Scrapy Scrapy 是用于抓取网站并提取结构化数据的应用程序框架,其应用非常广泛,如数据挖掘,信息处理或历史存档. 尽管 Scrapy 最初设计用于网络数据采集(web scraping ...

随机推荐

  1. Windows 10 ADK 版本及下载链接汇总

    Windows 评估和部署工具包 (Windows ADK) 具有自定义大规模部署的 Windows 映像以及测试系统.添加的组件和在该系统上运行的应用程序的质量和性能所需的工具. Windows A ...

  2. python3 购物车

    今天干了啥?喂了喂龟,看了看鱼... 然后就是学习了两个模块:sys模块和os模块,突然觉得python真的好,只要英语学的好,看代码超级舒服的说,嗯,我要好好学英语,今天背了几个啥,唉.写完博客再背 ...

  3. 使用async await 封装 axios

    异步变同步: 厉害-- https://www.jianshu.com/p/4168efdc172b

  4. CORS的简单理解

    去年我在做一个项目,是关于标签打印的,它就是一个Windows程序,提供标签打印功能,由其它程序(包括网站)告诉它需要打印怎样的标签,它就出标签,这个“告诉它需要怎样的标签”的过程,是通过HTTP的P ...

  5. [Swift]LeetCode1034.边框着色 | Coloring A Border

    Given a 2-dimensional grid of integers, each value in the grid represents the color of the grid squa ...

  6. ASP.NET Core 实战：Linux 小白的 .NET Core 部署之路

    一.前言  最近一段时间自己主要的学习计划还是按照毕业后设定的计划,自己一步步的搭建一个前后端分离的 ASP.NET Core 项目,目前也还在继续学习 Vue 中,虽然中间断了很长时间,好歹还是坚持 ...

  7. 深入Go的底层，带你走近一群有追求的人

    目录 缘起 自我介绍的技巧 硬核知识点 什么是plan9汇编 汇编角度看函数调用及返回过程 汇编角度看slice 正确参与Go夜读活动的方式 阅读原文 上周六晚上,我参加了"Go夜读&quo ...

  8. RDIFramework.NET V3.3 WinForm版新增订单管理主从表事例

    功能描述 无论什么系统,除了常规的单表处理外,主从表的应用都是非常普遍的,RDIFramework.NET V3.3 WinForm版本中新增了一个主从表的事例供大家参考.主从表的界面设计大同小异,主 ...

  9. 【转载】java 中 String s = new String("abc") 创建了几个对象？！

    原文链接点这里,感谢博主分享 答案是两个,现在我们具体的说一下: String s = new String("abc"); 首先我们要明白两个概念,引用变量和对象,对象一般通过n ...

  10. [转]Blue Prism Interview Questions and Answers

    本文转自:https://www.rpatraining.co.in/blue-prism-interview-questions/ What is a Visual Business Object? ...