选择器及相关特性

基础选择器

标签选择器

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

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. 安卓 App 性能专项测试指标之 CPU 深度解析

    指标背景 很多场景下我们去使用App,可能会碰到手机会出现发热发烫的现象.这是因为CPU使用率过高.CPU过于繁忙,会使得整个系统无法响应用户,整体性能降低,用户体验变得相当差,也容易引起ANR等等一 ...

  2. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之五 || Swagger的使用 3.3 JWT权限验证【必看】

    前言 关于JWT一共三篇 姊妹篇,内容分别从简单到复杂,一定要多看多想: 一.Swagger的使用 3.3 JWT权限验证[修改] 二.解决JWT权限验证过期问题 三.JWT完美实现权限与接口的动态分 ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史

    ---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...

  4. 从零开始学习PYTHON3讲义（十二）画一颗心送给你

    (内容需要,本讲使用了大量在线公式,如果因为转帖网站不支持公式无法显示的情况,欢迎访问原始博客.) <从零开始PYTHON3>第十二讲 上一节课我们主要讲解了数值计算和符号计算.数值计算的 ...

  5. springboot~Profile开发环境与单元测试用不同的数据库

    期望 希望开发环境dev用mysql 单元测试使用本机的h2数据库 引入依赖 compile('org.springframework.boot:spring-boot-starter-data-jp ...

  6. springboot~maven制作底层公用库

    把一些公用方法,类型抽象到一个项目里,让其它项目依赖它,这种设计是一种解耦的体现,其实像springboot就是我们的一种依赖,他里面有很多子模块,用到哪个就添加哪个依赖即可,像redis,mongo ...

  7. SQL优化 MySQL版 - 单表优化及细节详讲

    单表优化及细节详讲 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 注:本文章需要MySQL数据库优化基础或观看前几篇文章,传送门: B树索引详讲(初识SQL优化,认识索引):htt ...

  8. 数据结构系列（4）之 B 树

    本文将主要讲述另一种树形结构,B 树:B 树是一种多路平衡查找树,但是可以将其理解为是由二叉查找树合并而来:它主要用于在不同存储介质之间查找数据的时候,减少 I/O 次数(因为一次读一个节点,可以读取 ...

  9. Java使用Aspose组件进行多文档间的转换操作

    首先,祝大家新年快乐,2019诸事顺利,很久没有更新博客,今天要给大家说的是 ”Aspose“ 组件,作为2019年第一篇博客,希望大家能够多多支持,2019年要继续加油. 什么是Aspose? As ...

  10. 能够玩转BKY皮肤的 geek，有一半最后都成为了前端大师

    By Conmajia March 9, 2018 剩下的那一半全部扑街了. 世纪之初,BKY那些花里胡哨的预设皮肤曾经让初识网络的懵懂学子雀跃不已. 然而以现在的审美眼光看来,这些带着一股子扑面而来 ...