`
- 浏览:
2182258 次
- 性别:
- 来自:
北京
-
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;
}
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
在CSS选择器的体系中,存在多种不同类型的选择器,每种都有其特定的用途和使用场景。 首先,元素选择符是最基本的类型,包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示,可以选中...
在React开发中,CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面,因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用,以及如何优化组件的...
下面是前端开发中经常使用的 30 个 CSS3 选择器,包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
### CSS选择器的应用 #### CSS概述与引入方式 CSS(层叠样式表)是一种用于定义HTML文档中元素样式的语言。它允许开发者控制网页布局、颜色、字体等外观特性,从而增强网页的表现力。CSS可以通过多种方式引入: -...
**CSS选择器特殊性分析** 在CSS样式表中,选择器是用于指定元素样式的关键工具。它们决定了哪些规则将应用于页面上的特定元素。选择器的特殊性(Specificity)是CSS优先级的一种度量,用于解决当多个选择器同时影响...
常用选择器是 CSS 选择器中最基本的选择器,包括三种类型:ID 选择器、类选择器和标签选择器。 * ID 选择器:根据元素的 ID 来选择元素,例如 `#demoDiv{color:#FF0000;}`。在 HTML 中,元素可以定义一个 ID 属性,...
"CSS选择器详解" CSS选择器是CSS样式语言中最基本的组成部分,它们定义了样式应用于哪些HTML元素。选择器分为五种基本类型:标签选择器、class选择器、ID选择器、后代选择器和伪类选择器。 1. 星状选择符(*) 星...
CSS选择器的灵活性和多样性是CSS强大之处的关键因素之一。下面是一些关于CSS选择器的资源描述。 ### CSS选择器资源描述 #### 1. **官方文档与教程** - **MDN Web Docs**:Mozilla提供的MDN Web Docs是学习CSS选择...
### CSS选择器与jQuery选择器详解 #### 一、引言 在现代Web开发中,选择器扮演着至关重要的角色。无论是对HTML元素应用样式还是对其进行动态操作,选择器都是必不可少的工具。本文将深入探讨两种常用的选择器——...
【标题】:“利用css+javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上,用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素,允许用户方便地...
Go-Go的CSS选择器支持大部分标准的CSS选择器特性,包括类选择器、ID选择器、属性选择器、伪类选择器等。然而,由于Go语言本身的限制,可能不支持某些高级的CSS3选择器,比如`::before`、`::after`伪元素或复杂的组合...
另外,CSS3的Flexbox或Grid布局可以方便地实现选择器的响应式设计,使其在不同屏幕尺寸上都能正常显示。 JQuery库在这当中起到了辅助作用,它简化了JavaScript的DOM操作,使得事件处理、元素操作和动画效果的实现...
理解css属性选择器
ie7.js是一个由Dean Edwards开发的JavaScript库,它主要目的是让IE6和IE7支持一些CSS2.1及部分CSS3选择器,如类选择器(.class)、伪类(:hover、:focus等)和属性选择器([attr=value])。ie7.js通过动态创建DOM...
在本案例中,通过仿制当当网首页,我们可以学习到CSS选择器的使用、样式的继承、样式的优先级、关键属性、块级和内联元素的区别以及一些常见属性。 CSS是“层叠样式表”(Cascading Style Sheets)的缩写,它描述了...
以下是对CSS选择器的详细介绍: 一、基本选择器 通用选择器(*): 匹配HTML或XML文档中的所有元素。 例如:* { margin: 0; padding: 0; } 将所有元素的外边距和内边距设置为0。 元素(标签)选择器(E): 通过...
CSS 基本选择器实用学习教案 本学习教案主要介绍了 CSS 基本选择器的概念、语法和应用,旨在帮助学生掌握基本的 CSS 选择器,并实践于个人主页项目中。 一、CSS 概念和语法 CSS(Cascading Style Sheets)是用来...