CSS选择器

原创 2018年04月15日 21:12:36

更多内容,欢迎关注微信公众号“让知识成为资产”

1.通配选择器

作用
可以修饰页面上的任何元素
语法
*{ 样式声明 }
示例
*{ color: red; }
div * p {color: blue; }

2.元素选择器

作用
设置页面上某类元素的样式
语法
element1 { 样式声明 }
示例
body { background: #FFF; }
p { font-size: 14px; }

3.ID选择器

作用
设置指定ID元素的样式
语法
id值 { 样式声明 }
示例
h1 #title { font-size: 250%; }
body #home { background: silver; }

4.类选择器

作用
设置页面上某个或某些元素的样式
语法
.classname { 样式声明 }
分类选择器——element1.classname { 样式声明 }
多类选择器——element1.classname1.classname2 { 样式声明 }
详细用法
示例
.example { background: olive; }
p.urgent { color: red; }
.important.urgent { background: silver; }

5.群组选择器

作用
将多个选择器放在一起进行样式的声明
语法
element1, element2, element3, … { 样式声明 }
示例
div, #main, .p.text { color:red; }

6.后代选择器

作用
通过元素的后代关系匹配元素(多级嵌套)
语法
element1 element2 { 样式声明 }
示例
body h1 { font-size: 200%; }

7.子代选择器

作用
通过元素的子代(一层层级关系)关系匹配元素
语法
element1 > element2 { 样式声明 }
示例
div > p { color: cyan; }
ul > li { font-weight: bold; }

8.兄弟选择器

兄弟元素——具备相同父元素的平级元素称为兄弟元素

8.1 相邻兄弟选择器

作用
获取紧挨在某元素之后的兄弟元素
语法
element1 + element2 { 样式声明 }
示例
table + p { margin-top: 2.5em; }

8.2 通用兄弟选择器

作用
获取某元素后所有满足条件的兄弟元素
语法
element1 ~ element2 { 样式声明 }
示例
p ~ ul { font-size: 20px; }

9.属性选择器

9.1 简单属性选择器

作用
根据属性的存在来选择元素
语法
element1 [attr]
示例
p [class] { border: 1px dotted silver; }

9.2 具体属性值选择器

作用
根据属性的具体值选择元素
语法
element1 [attr=”value”]
示例
a [ rel=”home” ] { font-weight: bold; }

9.3 部分属性值选择器

作用
根据属性值中的一部分选择元素
语法
element1 [attr~=”value”]
示例
a [rel~=”friend”] { text-transform: uppercase; }

9.4 开始子串属性值选择器

作用
根据属性值最开始的子串选择元素
语法
element1 [attr^=”substring”]
示例
a [src^=”https”] { font-size: 10px; }
选择其 src 属性值以 “https” 开头的每个 a元素

9.5 结束子串属性值选择器

作用
根据属性值最后面的子串选择元素
语法
element1 [attr$=”substring”]
示例
a [src$=”.pdf”] { font-size: 10px; }
选择其 src 属性以 “.pdf” 结尾的所有a元素

9.6 任意子串属性值选择器

作用
根据属性值中任意位置上的子串选择元素
语法
element1 [attr*=”substring”]
示例
a [src*=”abc”] { font-size: 10px; }
选择其 src 属性中包含 “abc” 子串的每个a元素

9.7 语言属性选择器

作用
选择一个有lang属性的元素,lang属性值是一个用连字号分隔的值列表,且最前面是该选择器中提供的值
语法
element1 [ attribute|=value]
示例
html [lang|=en] { color: gray; }
选择 lang 属性值以 “en” 开头的所有元素

10.伪类选择器

连接伪类——

作用
应用于URI尚未访问过的链接
示例
a:link { color: blue; }

:visited

作用
应用于URI已访问的链接
示例
a:visited { color: purple; }

动态伪类——

:hover

作用
应用于鼠标悬停在元素上时的状态
示例
a [href] :hover { text-decoration: underline; }

:active

作用
应用于元素被激活时的状态(超链接,文本框,密码框点击时)
示例
a :active { color:red; }

:focus

作用
应用于元素获取焦点时的状态(文本框和密码框…)
示例
input :focus { background: yellow; }

目标伪类——

:target

作用
突出显示活动的HTML锚点元素,匹配被激活的锚点
示例
div :target { color: blue; }

结构伪类——

:first-child

作用
匹配其父元素的第一个子元素
示例
p :first-child { font-size: 125%; }
选择属于父元素的第一个子元素的每个p元素

:last-child

作用
匹配其父元素的最后一个子元素
示例
p :last-child { font-size: 125%; }
选择属于其父元素最后一个子元素每个 p元素

:nth-child(n)

作用
匹配其父元素中第n个子元素
示例
table tr:nth-child(2) { color: red; }
表格的第二行数据

否定伪类——

:not(selector)

作用
将满足指定选择器的元素排除出去
示例
table tr :not(:first-child){
font-size:24px;
}
除第一行以外的所有行

11.伪元素选择器

:first-letter/::first-letter

作用
匹配某个元素的首字符
示例
p:first-letter { font-size: 20px }
选择每个p元素的首字母

:first-line/::first-line

作用
匹配某个元素的首行
如果首行与首字符冲突,以首字符为准
示例
p:first-line { color: red; }
选择每个p元素的首行

:selection

作用
匹配被用户选取的内容
示例
p::selection { color: blue; }

:before/::before

作用
在元素内容的最前面插入生成内容
示例
p:before { content: attr(class); }
在每个p元素的内容之前插入内容

:after/::after

作用
在元素内容的最后插入生成内容
示例
p:after { content: “|” }
在每个p元素的内容之后插入内容

CSS 常用的几种选择器

1、基本选择器## 元素选择器 ## 元素选择器 span{color:red;font-size: 20px} hello...
  • StriverLi
  • StriverLi
  • 2017-03-09 22:57:58
  • 2788

CSS:CSS选择器之【组合选择器】

前言组合使用不同的选择器可以匹配更特定的元素。有的复合选择器能将目标样式应用到更多元素,有的复合选择器则会锁定更少元素,总之会让你的选择非常具体。复合选择器主要包括:群组选择器、后代选择器、子选择器和...
  • Hierarch_Lee
  • Hierarch_Lee
  • 2016-09-21 11:54:35
  • 7204

CSS3选择器——2、层次选择器

CSS3选择器——2、层次选择器 *{ margin: 0px; padding: 0px; } body{ width: 300px; mar...
  • yezis
  • yezis
  • 2015-02-14 17:49:46
  • 5276

css中 :not() 选择器的用法

:not() 选择器用于一些特殊的功能的呈现上
  • Candy_home
  • Candy_home
  • 2014-11-18 05:19:26
  • 6527

CSS选择器总结(代码实例+执行效果图)

CSS样式选择器代码实例: 1、标签选择器 2、类选择器 3、ID选择器 4、子选择器 5、包含选择器 6、通用选择器 7、伪类选择器...
  • zhangliangzi
  • zhangliangzi
  • 2015-11-22 16:05:42
  • 1670

CSS入门系列(三)关联选择器&组合选择器

CSS入门系列(三)关联选择器&组合选择器目录CSS入门系列三关联选择器组合选择器 目录 关联选择器 组合选择器 伪元素选择器1. 关联选择器定义是:选择器中的选择器。假设如下:这个一个div 这个一...
  • leichaoaizhaojie
  • leichaoaizhaojie
  • 2016-11-09 14:02:40
  • 1659

jQuery所支持的各类CSS选择器

jQuery In Action  是不错的技术图书,主要学习其选择器,具体使用时可以根据需要查看示例中的代码。对于AJAX方面的应用,个人感觉还是直接选用对应的框架或控件完成更合适。   jQu...
  • sinat_34719507
  • sinat_34719507
  • 2017-03-09 00:27:24
  • 423

CSS-选择器及其兼容性

标签选择器就是用标签名来当做选择器。 1 、所有标签都能够当做选择器,比如body、h1、dl、ul、span等等 2 、不管这个标签藏的多深,都能够被选择上。 3 、选择的是所有的,而不是某一...
  • yume_sola
  • yume_sola
  • 2017-04-17 20:29:23
  • 865

2016 08 10 css选择器练习——常用属性

作业一: /*设置字间距*/ letter-spacing:10px; /* 设置中划线 text-decoration是用来设置划线的,常用的还有uderline和none */ text...
  • qq_24678203
  • qq_24678203
  • 2016-08-10 17:45:05
  • 513
收藏助手
不良信息举报
您举报文章:CSS选择器
举报原因:
原因补充:

(最多只允许输入30个字)