CSS—常用选择器

选择器是指通过一定的语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式

 

1.标签选择器

写法:标签名{属性:值;属性:值}

标签选择器影响范围大,一般用来做一些通用设置,或用在层级选择器中。

举例:
div{color:red}
......
<div>这是第一个div</div>  <!--对应以上样式 -->
<div>这是第二个div</div>  <!--对应以上样式 -->

2.类选择器

写法:类名{属性:值;属性:值}

通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。

举例:
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
......
<div class="blue">....</div>
<h3 class="blue big box">....</h3>
<p class="blue box">....</p>

3.层级选择器(后代选择器)

写法:父选择器空格子选择器{属性:值}

主要应用在标签嵌套的结构中,层级选择器,是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用,减少命名,同时也可以通过层级,限制样式的作用范围。

举例:
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
......
<div class="con">
    <span>....</span>
    <a href="#"class="pink">....</a>
    <a href="#"class="gold">...</a>
</div>
<span>....</span>
<a href="#" class="pink">....</a>

选择器

书写格式

标签选择器

标签名{属性:值}

P{color:red}

类选择器

.类名{属性,值}

.title{color:red}

层级选择器

.类名.子类名{属性:值}

.title.subtitle{属性:值}

其他选择器(了解:

通用选择器:

  1. *{属性:值}

    *{
        color:red;
    }

 

子选择器

  • E>F{属性:值};子元素选择器,匹配所有属于E元素的子元素F,
    1.子元素选择器: 只是子元素
      /*.box>p{

    color:  red;
      }*/

相邻元素选择器

  • E+F{属性:值}; 相邻元素选择器,匹配所有紧随E元素之后的元素(下面)
    /*相邻元素选择器
      1.相邻下面的元素,不是上面
      2.中间不能隔元素设置
      */
      .box div+p{

    color: red;
      }

属性选择器

  • 属性选择器:标签[属性class] 针对所有是class属性的元素
  • 标签[title=“123”],匹配所有title属性值是123的元素
  • 标签[title^=“1”],匹配所有title属性值是以1开头元素
  • 标签[title$=“1”],匹配所有title属性值是以1结尾元素
  • 标签[title*=“1”],匹配所有title属性值是有1的元素

    /*1.只要有class属性*/
            /*div[class]{

color:red;
            }*/

/*2.class="12"*/
           /*div[class="12abs"]{

color:red;
            }*/

/*3.以class^="12",以12开头的值*/
            /*div[class^="12"]{

color:red;
            }*/

/*4.以class$="12",以12结尾的值*/
            /*div[class$="12"]{

color:red;
            }*/

/*5.以class*="a",凡是有a的值*/
            div[class*="a"]{

color:red;
            }

 

其他选择器1

  • 1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素
  • 2、E:first-child:匹配元素类型为E且是父元素的第一个子元素
  • 3、E:last-child:匹配元素类型为E且是父元素的最后一个子元素

   /*1.第几个子元素;  标签类型和序号必须全部一致*/
            /*.box div:nth-child(1){

color:red;
            }*/
       
    /*倒着数
            .box div:nth-last-child(2){

color:red;
            }*/

/*最后一个*/
            /*.box div:last-child{

color:red;
            }*/

/*第一个  标签类型和序号必须全部一致*/
            .box div:first-child{

color:red;
            }

其他选择器2

  • 1.E:nth-of-type(n) 第几个E类型元素
  • 2.E:first-of-type 第一个
  1. E:last-of-type 最后一个

           /*子元素中  第一个div标签*/
         .box div:nth-of-type(3){

    color: gold;
         }

    .box div:first-of-type{

    color: red;
         }

    .box div:last-of-type{

    color: green;
         }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/474051.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Educational Codeforces Round 104 (Rated for Div. 2)A~E解题报告

Educational Codeforces Round 104 (Rated for Div. 2) A. Arena \quad原题链接 http://codeforces.com/contest/1487/problem/A \quad解题思路 首先&#xff0c;我们看战斗次数是无限的&#xff0c;任意非最小值的英雄都有赢得次数&#xff0c;既然有场次可以赢&#xff0…

LeetCode 1130. 叶值的最小代价生成树(区间DP/单调栈贪心)

文章目录1. 题目2. 解题2.1 DP2.2 单调栈贪心1. 题目 给你一个正整数数组 arr&#xff0c;考虑所有满足以下条件的二叉树&#xff1a; 每个节点都有 0 个或是 2 个子节点。数组 arr 中的值与树的中序遍历中每个叶节点的值一一对应。&#xff08;知识回顾&#xff1a;如果一个…

CSS属性提升

CSS样式 属性提高 text-align设置文字水平对齐方式&#xff0c;如text-align:center 设置文字水平居中 text-indent设置文字首行缩进&#xff0c;如&#xff1a;text-indent:24px; 设置文字首行缩进24px font-style设置字体是否倾斜&#xff0c;如&#xff1a;font-style:no…

03.结构化机器学习项目 W2.机器学习策略(2)

文章目录1. 进行误差分析2. 清除标注错误的数据3. 快速搭建你的第一个系统&#xff0c;并进行迭代4. 使用来自不同分布的数据&#xff0c;进行训练和测试5. 数据分布不匹配时&#xff0c;偏差与方差的分析6. 定位数据不匹配问题7. 迁移学习 Transfer learning8. 多任务学习 Mul…

属性和索引器的使用

索引器允许您按照处理数组的方式索引类、结构或接口。参数相当于中介。 http://msdn.microsoft.com/zh-cn/library/2549tw02(vvs.80).aspx 转载于:https://www.cnblogs.com/iammackong/p/3268187.html

列表与表单

有序标签orderlist - 基本用法 - -<ol> - <li>列表内容</li> - <li>列表内容</li> - ..... - </ol> - 快速构建表格的快捷键 ol>(li>a)*4 无序标签 unorderlist -->经常使用 -<ul> …

Codeforces Round #702 (Div. 3)解题报告

Codeforces Round #702 (Div. 3) 全部题解 读错题意&#xff0c;写了半天真是心态爆炸&#xff0c;总的来看这次题目不难的。 A. Dense Array http://codeforces.com/contest/1490/problem/A 解题思路 相邻的数字必然是倘若不满足的话是需要插入数据的&#xff0c;那么我们…

LeetCode 930. 和相同的二元子数组(哈希+前缀和)

文章目录1. 题目2. 解题1. 题目 在由若干 0 和 1 组成的数组 A 中&#xff0c;有多少个和为 S 的非空子数组。 示例&#xff1a; 输入&#xff1a;A [1,0,1,0,1], S 2 输出&#xff1a;4 解释&#xff1a; 如下面黑体所示&#xff0c;有 4 个满足题目要求的子数组&#xff…

poj 3469(网络流模版)

题目链接&#xff1a;http://poj.org/problem?id3469 思路&#xff1a;终于把网络流的模版测试好了&#xff0c;在Dinic和Sap之间还是选择了Sap,事实证明Sap确实比Dinic效率高&#xff0c;在此贴出自己的网络流模版&#xff1a; 1 #include<iostream>2 #include<cstd…

盒子的真实宽高

盒子的宽 两边border 两边padding 盒子的高度 上下border 上下padding

leetcode第 46 场双周赛

题目A https://leetcode-cn.com/problems/longest-nice-substring/ 因为 length≤100length \leq 100length≤100&#xff0c;我们直接就可以遍历子串然后更新答案。 class Solution { public:bool Check(string s){unordered_set<int> m;for (auto u : s)m.insert(u);…

margin相关技巧

1、设置元素水平居中; margin:0 auto; margin负值让元素位移及合并边框 外边距合并&#xff1a; 外边距合并指的是:当两个垂直外边距相遇时,他们将行程一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者:一个格子距下30px,下面的格子距上100px,边距…

04.卷积神经网络 W1.卷积神经网络

文章目录1. 计算机视觉2. 边缘检测示例3. 更多边缘检测4. Padding5. 卷积步长6. 三维卷积7. 单层卷积网络8. 简单卷积网络示例9. 池化层10. 卷积神经网络示例11. 为什么使用卷积&#xff1f;作业参考&#xff1a; 吴恩达视频课 深度学习笔记 1. 计算机视觉 举例&#xff1a;图…

httpClient学习笔记1

客服端以post请求输入xml的输入流&#xff0c;来到服务器端&#xff0c;服务器端接到输入流&#xff0c;进行处理&#xff0c;处理完毕后&#xff0c;返回xml信息的返回输出流&#xff0c;来告诉对方成功与否。 htppClient的使用至少需要commons-httpclient-3.1.jar&#xff0c…

JAVA基础学习预科部分 (Markdown + dox)2021/2/22持续更新中

javaSE从 2021/02/22开始&#xff0c;预计到2021/02/28&#xff0c;原本预计的算法题解先鸽一下。 -博客Blog的重要性 & Markdown语法 基础markdown语法 标题&#xff0c; 直接使用 ‘#’&#xff0c;一级二级…五级字体&#xff0c;斜体(左右个一个∗*∗)&#xff0c;加…

元素(块、行内、行内块

块元素的特点 1.支持所有样式 2.块级元素 独占一行 3.块级元素默认宽度和父元素一样 常用块元素块级元素 一般 div p ol ul h1-h6 li dl dt dd 等都是 初始化(样式重置) 1.实际开发中&#xff0c;我们会把这些默认的样式在样式定义开头清除掉&#xff0c;清除掉这些默认样式&…

LeetCode 1031. 两个非重叠子数组的最大和(一次遍历,要复习)*

文章目录1. 题目2. 解题2.1 暴力枚举2.2 一次遍历1. 题目 给出非负整数数组 A &#xff0c;返回两个非重叠&#xff08;连续&#xff09;子数组中元素的最大和&#xff0c;子数组的长度分别为 L 和 M。&#xff08;这里需要澄清的是&#xff0c;长为 L 的子数组可以出现在长为…

资料合集

cocos2d-x http://www.microoh.com/index.php 杂谈 http://www.yixieshi.com/ as3读excel https://github.com/childoftv/as3-xlsx-reader 提问 http://stackoverflow.com/转载于:https://www.cnblogs.com/chenhongyu/p/3282918.html

Java入门篇 2021/02/22

Java入门篇 2021/02/22 Java的三大版本 java三大版本主要包括 JavaSE, JavaME, JavaEE&#xff0c;其中现如今的JavaME已经是很少见了&#xff0c;JavaSE是JavaEE的基础。 JDK、JER、JVM三个关系 JDK, JRE, JVM具体的关系可以参照下图&#xff0c;是名副其实的包含关系。 J…

iOS 开发者必不可少的 75 个工具

如果你去到一位熟练的木匠的工作室&#xff0c;你总是能发现他/她有一堆工具来完成不同的任务。软件开发同样如此。你可以从软件开发者如何使用工具中看出他水准如何。有经验的开发者精于使用工具。对你目前所使用的工具不断研究&#xff0c;同时了解一些替代品的使用&#xff…