`
qindongliang1922
  • 浏览: 2184173 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
7265517b-f87e-3137-b62c-5c6e30e26109
证道Lucene4
浏览量:117538
097be4a0-491e-39c0-89ff-3456fadf8262
证道Hadoop
浏览量:125927
41c37529-f6d8-32e4-8563-3b42b2712a50
证道shell编程
浏览量:59916
43832365-bc15-3f5d-b3cd-c9161722a70c
ELK修真
浏览量:71301
社区版块
存档分类
最新评论

CSS选择器小记

阅读更多

1,页面所有元素清理,内外边距
  *{
            margin:  0px;
            padding: 0px;
        }

2,指定容器下的元素,清理边距
#container * {

  border: 1px solid black;
}

2
#container {
   width: 960px;
   margin: auto;
}

3 类选择器
.r {
  color: red;
}

4,某个标签下的所有标签
li a {
  text-decoration: none;
}

5,标签修饰
a { color: red; }
ul { margin-left: 0; }

6,伪类定位
a:link {color:red;}
a:visited {color: purple;}


7,相邻选择器,ul平级节点的第一个
ul + p {
   color: red;
}


8,容器下面的一级ul标签,子标签里面的不会生效
div#container > ul {
  border: 1px solid black;
}


9,ul平级后面所有的p元素生效
ul ~ p {
  color: red;
}

10,属性选择器,会选择所有带有title标签的元素a,不带的忽略
a[title] {
  color: green;
}

11,href等于如下网址的时候,将颜色变为指定颜色
a[href="http://strongme.cn"] {
  color: #1f6053; /* nettuts green */
}

12, href后面支持*^$模式匹配

a[href*="ce"]{
  text-decoration: none;
    font-size: 12px;
    color: red;
}


13,以什么开头
a[href^="ce"]{
  text-decoration: none;
    font-size: 12px;
    color: red;
}

14,以什么结尾
a[href$=".jpg"] {
  color: red;
}

15,自定义属性操作
a[tt="img"]{

         color: gold;
     }

16,`~`符号可以定位那些某属性值是空格分隔多值的标签。
a[bb~="c"]{

         color: tomato;
     }

17,选中的标签的设置
input[type=radio]:checked {
   border: 1px solid black;
}

18,`before`和`after`这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }

.clearfix {
   *display: inline-block;
   _height: 1%;
}




19,通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。
div:hover {
  background: #e3e3e3;
}


20,首字母放大或首行放大


p::first-letter {
  font-weight: bold;
  font-size:1.2em;
}

p::first-line {
  font-weight: bold;
  font-size:1.2em;
}


21,平级第三个li标签
li:nth-child(3) {
   color: red;
}

22,平级反序取元素
li:nth-last-child(2) {
   color: red;
}

23,伪类选择第三个ul标签
ul:nth-of-type(3) {
   border: 1px solid black;
}

24,到序标签

ul:nth-last-of-type(3) {
   border: 1px solid black;
}


25,第一个节点
ul li:first-child {
   border-top: none;
}

26,取父标签的最后一个元素

ul > li:last-child {
   color: green;
}


27,只会获取有一个子节点的父元素
div p:only-child {
   color: red;
}

28,选择只有一个子标签的元素
li:only-of-type {
   font-weight: bold;
}

29,

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

分享到:
评论

相关推荐

    CSS选择器.pdf

    在CSS选择器的体系中,存在多种不同类型的选择器,每种都有其特定的用途和使用场景。 首先,元素选择符是最基本的类型,包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示,可以选中...

    react-React组件的css选择器

    在React开发中,CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面,因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用,以及如何优化组件的...

    scrapy爬虫之CSS选择器(比前面两个更全)

    相比XPath或其他方法,CSS选择器往往更简洁、直观,对于前端开发者来说尤其友好。 在Scrapy中,`Selector`类提供了对文档进行解析和提取数据的功能,而CSS选择器就是其主要的数据定位手段。使用CSS选择器,你可以像...

    树使用css选择器优化代码(IE7+,firefox3,opera9,chrom下可用)

    CSS选择器分为多个级别,从基础的ID选择器(#id)、类选择器(.class)、元素选择器(element)到更复杂的后代选择器(element element)、子代选择器(element > element)、属性选择器[element[attr]]、伪类选择器(:hover, :...

    CSS基本选择器实用PPT课件.pptx

    CSS 基本选择器 本资源摘要信息将着重介绍 CSS 基本选择器的概念、语法和应用,旨在帮助学习者快速掌握 CSS 基本选择器的使用和应用。 一、CSS 概念和语法 CSS 全称为 Cascading Style Sheet,即层叠样式表。它的...

    一种可视化的方式来分析选择器在CSS中的特殊性

    **CSS选择器特殊性分析** 在CSS样式表中,选择器是用于指定元素样式的关键工具。它们决定了哪些规则将应用于页面上的特定元素。选择器的特殊性(Specificity)是CSS优先级的一种度量,用于解决当多个选择器同时影响...

    CSS选择器详细介绍

    常用选择器是 CSS 选择器中最基本的选择器,包括三种类型:ID 选择器、类选择器和标签选择器。 * ID 选择器:根据元素的 ID 来选择元素,例如 `#demoDiv{color:#FF0000;}`。在 HTML 中,元素可以定义一个 ID 属性,...

    CSS选择器的介绍和使用.pdf

    CSS选择器的介绍和使用,什么是CSS选择器?CSS选择器可以用于我们需要添加的样式的标签。想要在HTMLl页面中的元素实现一对一,一对多或者多对一的控制,就得要使用css选择器,css选择器进控制着HTML页面中的元素。

    前端css选择器练习diner.zip

    6. **CSS3新选择器**:除了基础选择器外,CSS3引入了更多高级选择器,如`nth-child()`、`nth-of-type()`、`not()`、`matches()`等,它们增强了对元素选择的精确度和灵活性。 在"css-diner"练习中,你将有机会亲手...

    css选择器 的概要介绍与分析

    CSS选择器的灵活性和多样性是CSS强大之处的关键因素之一。下面是一些关于CSS选择器的资源描述。 ### CSS选择器资源描述 #### 1. **官方文档与教程** - **MDN Web Docs**:Mozilla提供的MDN Web Docs是学习CSS选择...

    CSS选择器和jQuery选择器

    ### CSS选择器与jQuery选择器详解 #### 一、引言 在现代Web开发中,选择器扮演着至关重要的角色。无论是对HTML元素应用样式还是对其进行动态操作,选择器都是必不可少的工具。本文将深入探讨两种常用的选择器——...

    scrapy爬虫下的CSS选择器使用

    CSS选择器支持多种语法,包括标签选择器(如`div`),类选择器(如`.class_name`),ID选择器(如`#id_name`),以及属性选择器(如`[attr=value]`)。例如,获取所有类名为`article`的`<p>`元素: ```python ...

    利用css+javascript实现的一个日期选择器代码

    【标题】:“利用css+javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上,用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素,允许用户方便地...

    css选择器介绍

    本文将深入探讨CSS选择器的种类、用法及其在实际开发中的应用。** 首先,我们要了解CSS选择器的基本分类: 1. **类型选择器**:基于元素的标签名进行选择,如`h1`,`p`等。 2. **类选择器**:使用`.`前缀,匹配...

    Go-Go的CSS选择器

    Go-Go的CSS选择器支持大部分标准的CSS选择器特性,包括类选择器、ID选择器、属性选择器、伪类选择器等。然而,由于Go语言本身的限制,可能不支持某些高级的CSS3选择器,比如`::before`、`::after`伪元素或复杂的组合...

    HTML5&CSS3网页制作:CSS基础选择器.pptx

    理解并熟练使用这些基础选择器是CSS学习的关键步骤。通过它们,你可以更有效地控制网页的布局和视觉呈现。在实际项目中,通常会结合使用这些选择器,以及更复杂的后代选择器、伪类选择器等,来创建更精细的样式规则...

    css属性选择器理解案列

    理解css属性选择器

    让ie兼容css选择器

    ie7.js是一个由Dean Edwards开发的JavaScript库,它主要目的是让IE6和IE7支持一些CSS2.1及部分CSS3选择器,如类选择器(.class)、伪类(:hover、:focus等)和属性选择器([attr=value])。ie7.js通过动态创建DOM...

Global site tag (gtag.js) - Google Analytics