CSS常用属性之选择器
css选择器
序号 | 选择器 | 例子 | 例子描述 |
1 | .class | .intro | 选择class="intro"的所有元素 |
2 | #id | #firstname | 选择id="firstname"的元素 |
3 | element | p | 选择所有<p>元素 |
4 | element,element | div,p | 选择所有<div>元素和所有<p>元素 |
5 | element element | div p | 选择<div>元素内部的所有<p>元素 |
6 | element>element | div>p | 选择父元素为<div>元素的所有<p>元素 |
7 | [attribute] | [target] | 选择带有target属性所有元素 |
8 | [attribute=value] | [target=_blank] | 选择target="_blank"的所有元素 |
9 | [attribute~=value] | [title~=flower] | 选择title属性包含单词"flower"的所有元素 |
10 | [attribute|=value] | [lang|=en] | 选择lang属性值以"en"开头的所有元素 |
11 | :link | a:link | 选择所有未被访问的链接 |
12 | :visited | a:visited | 选择所有已被访问的链接 |
13 | :active | a:active | 选择活动链接 |
14 | :hover | a:hover | 选择鼠标指针位于其上的链接 |
15 | :focus | input:focus | 选择获取焦点的input元素 |
16 | :first-letter | p:first-letter | 选择每个元素的首字母 |
17 | :first-line | p:first-line | 选择每个<p>元素的首行 |
18 | :before | p:before | 在每个<p>元素的内容之前插入内容 |
19 | :after | p:after | 在每个<p>元素的内容之后插入内容 |
20 | :lang(language) | p:lang(it) | 选择带有以"it"开头的lang属性值的每个<p>元素 |
21 | element1~element2 | p~ul | 选择前面有<p>元素的每个<ul>元素 |
22 | [attribute^=value] | a[src^="https"] | 选择其src属性值以"https"开头的每个<a>元素 |
23 | [attribute$=value] | a[src$=".pdf"] | 选择其src属性以".pdf"结尾的所有<a>元素 |
24 | :first-of-type | p:first-of-type | 选择属于父元素里面的首个<p>元素 |
25 | :last-of-type | p:last-of-type | 选择属于父元素里面的最后一个<p>元素 |
26 | :only-of-type | p:only-of-type | 选择父元素里面只有一个<p>元素 |
27 | :only-child | p:only-child | 选择父元素只有一个子元素的<p> 元素 |
28 | :nth-child(n) | p:nth-child(2) | 选择属于其父元素里面的第二个子元素<p>(索引从1开始) |
29 | :nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个元素开始计数 |
30 | :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素的二个<p>元素的每个<p>元素 |
31 | :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个元素计数 |
32 | :last-child | p:last-child | 选择属于其父元素最后一个子元素每个<p>元素 |
33 | :root | :root | 选择文档的根元素 |
34 | :empty | p:empty | 选择没有子元素的每个<p>元素(包括文本节点) |
35 | :target | #news:target | 选择当前活动的元素 |
36 | :enabled | input:enabled | 选择每个启用的<input>元素 |
37 | :disabled | input:disabled | 选择每个被禁用的<input>元素 |
38 | :checked | input:checked | 选择每个被选中的<input>的元素 |
39 | :not(selector) | :not(p) | 选择非<p>元素的每个元素 |
40 | ::selection | ::selection | 选择被用户选取的元素部分 |
CSS常用属性之选择器的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
- 02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
- [No000016A]CSS常用三种选择器
1.HTML Tag p{color:red;} 2.id #myid{color:red;} 3.class .myclass{color:red;} CSS常用文本样式属性 color font- ...
- CSS常用属性-xy
一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- css常用属性总结第二弹:id选择器
承接上一篇class选择器,这一篇我们来说说css的id选择器. id选择器类似于类选择器,不过也有一些重要的差别,首先,id选择器前面有一个#号----称它为棋牌号吧,class为点号,用法就和cl ...
- css常用属性初总结第一弹:id和class选择器
前言:这是我第二次写博客,记录自己所学的点点滴滴,希望大家一起共勉! 说到选择器大家都不陌生,估计用的最多的还是id选择器和类选择器,至于其他的选择器,今天在这里我避而不谈. 类选择器:将html元素 ...
- css常用属性汇总
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...
随机推荐
- 这几个IDEA高级调试技巧,用完就是香
一个项目启动两次 测试分布式项目时,经常要一个项目启动2次,不用将一个项目打开多次启动,配置一下即可 1.点击Edit Configurations 2.勾选Allow parallel run 3. ...
- python爬虫之selenium+打码平台识别验证码
1.常用的打码平台:超级鹰.打码兔等 2.打码平台在识别图形验证码和点触验证码上比较好用 (1)12306点触验证码 from selenium import webdriver from selen ...
- 前端分享之cookie的使用及单点登录
cookie是什么 cookie的英文意思是饼干.在计算机术语中指服务端存放在客户端的一段数据.这段数据在客户端每次进行http请求时会自动加在http请求报文中的header上:服务端在响应时,可以 ...
- 适配iphoneX
tips iphone6设备宽高为375×667,屏幕分辨率为750×1334,故其设备像素比(dpr)为2.iphoneX的设备宽高375*812,屏幕分辨率为1125x2436,故dpr=3 适配 ...
- 【Java】机考常用知识
基本操作 数组 声明数组 方法一: int a[] = null; //声明一维数组 //int[] a = null; 也行,个人习惯 a = new int[10];//分配内存给一维数组 方法二 ...
- Postgresql存放数组形式的数据
Postgres 数据库允许把字段定义为可变长度的数组.数据类型既可以是内置类型,也可以是用户自定义的类型或枚举类型. 例如: 创建表 create table demo(name text,subj ...
- Cake URAL - 1755
1755. Cake Time limit: 0.5 secondMemory limit: 64 MB Karlsson and Little Boy have found a cake in th ...
- 选择结构二switch选择结构
在上一章节我们讲解了if选择结构 本章我们学习 switch选择结构 还要知道if选择结构和switch结构的区别 为什么学习了if选择结构还要学习switch选择结构 以及 两种选择结构的运用 ...
- ZTMap室内地图定位平台设计方案
1 系统总体设计 1.1 系统概述 基于臻图信息室内GIS地图平台和室内定位平台,通过室内定位设备的部署和信号采集,实现对室内人员和资产的实时定位.路线导航.区域管控告警.客流统计等相关功能. ...
- Oracle学习笔记--Oracle启动过程归纳整理
Oracle 启动过程分为nomount状态mount状态open状态 每个状态下Oracle都会进行不同的操作:1.nomount状态 在$ORACLE_HOME/dbs目录下寻找参数文件 参数文件 ...