`
- 浏览:
2147634 次
- 性别:
- 来自:
北京
-
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
相关推荐
React组件的css选择器
CSS选择器-.pdf
CSS核心基础--CSS基础选择器 CSS选择器 什么是CSS选择器? CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。 CSS...
css选择器里面有css的几十种选择、获取、什么都有.
CSS选择器的介绍和使用,什么是CSS选择器?CSS选择器可以用于我们需要添加的样式的标签。想要在HTMLl页面中的元素实现一对一,一对多或者多对一的控制,就得要使用css选择器,css选择器进控制着HTML页面中的元素。
各类css选择器的应用及代码效果展示,字体属性和文本属性的应用。
讲解了css选择器的要点和应用,分别写出了在什么场景用什么选择器,每个选择都有他自己书写规范和应用。
前端必须掌握的css选择器方法
包含CSS1~CSS3的所有选择器,同时说明各选择器的浏览器支持情况
jQuery 遍历css选择器 学习
30个最常用css选择器解析 CSS
一个使用css选择器的完整爬虫工程,比本人前面两个相应资料更完整,与博文同步分享。
详解CSS选择器标签HTML 选择器 类别CLASS 选择器
理解css属性选择器
CSS选择器 xmind - 选择器分类(ID选择器,类选择器,标签选择器,通配选择器,属性选择器,伪类选择器)。 - 选择器关系(分组,后代,子元素,相邻兄弟,后续兄弟)。 - CSS特性(优先级,继承,层叠)。
脑图形式的css选择器和层叠规则整理,包括css选择器的类型以及css层叠规则的影响因素(重要性、来源、特殊性、顺序等等),属于前端基础技术的资源
里面不仅包含了css3的所有选择器,还有css2的各种版本以及对比。
CSS属性选择器详解.pdf