html5-css选择器
/*/**{color: red}
p{color: green}
#div1{background: blue;padding-top: 15px;}
.kk{background: blue;border: 5px red solid}
h3.kk{background: green}*/
/*input[value]{background: green}
input[value][style]{background:blue}
input[value='vip1']{background: red}
input[style~='10px']{background: gray}
input[value^='vip']{background:green}
a[href^="http"]{color: red}
a[href$=".cn"]{color: green}
input[value*="vip"]{background: red}
ul li{border: 1px red solid}
ol li{border: 2px green solid}
div p{color: red}
ul >li{border: 1px red solid}
h2+p{color: green}
h2~p{color: red}
div,ul{color: red}
p::first-letter{font-size: 50px;}
p::first-line{color: green}
a::before{
content: "点击"
}
a::after{
content: "行吗"
}
a::after{
content: url(../pic/1.png);
}
p::selection{color: red}
p::selection{background: red}
:root{color: red}
li:first-child{color: red}
ul>li:first-child{color: red}
ul>li:last-child{color: red}
li:last-child{color: red}
li:only-child{color: blue}
p:only-of-type{color: red}
h3:nth-child(2){color: red}
#div1>h3:nth-child(2){color: red}
tr:nth-child(even){background: red}
tr:nth-child(odd){background: green}
tr:nth-child(3n+1){background: green}
tr:nth-last-child(3){background: red}
p:first-of-type{color: red}
p:last-of-type{color: red}
p:nth-of-type(2){color: red}
p:nth-last-of-type(2){color: red}
div:empty{width: 300px;height: 200px;background: green;}
a:link{color: red}
a:active{background: red}
a:hover{background: blue}
a:visited{color: gray}
input:focus{background: red}
input:checked{width: 60px;height: 60px;}
input:enabled{background: red}
input:disabled{background: green}
a:target{color: red}*/
:not(input){color: green}
html5-css选择器的更多相关文章
- html5 css选择器。 井号,句号的区别
.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...
- html5 css选择器 井号, 句点的区别
一.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的 ...
- html5——css选择器
复习 div>p: 子代 div+p:div后面相邻的第一个p div~p: div后面所有的兄弟p 属性选择器 标志:[]:区别于id选择器:#,区别于类名选择器:. 特殊符号:^:开头 ...
- 第八十六节,html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1
要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...
- HTML5新标签使用及CSS选择器(伪类)
这些标签能够让搜索引擎更直接的解析页面内容. <header></header>语义:文档或者页面的头部 <nav></nav>语义:导航这两者不是组合 ...
- 你真的精通 CSS 了?来挑战一下 CSS 选择器测验吧
CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...
- 第 13 章 CSS 选择器[上]
学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的 ...
- 30类css选择器
大概大家都知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相 ...
随机推荐
- 转:string.Format格式化用法
String.format()方法使用说明(比较详细) 地址:https://blog.csdn.net/thc1987/article/details/17528093 典型案例 原文地址:http ...
- LeetCode 589 N-ary Tree Preorder Traversal 解题报告
题目要求 Given an n-ary tree, return the preorder traversal of its nodes' values. 题目分析及思路 题目给出一棵N叉树,要求返回 ...
- 使用@import导入实现了ImportBeanDefinitionRegistrar接口的类,不能被注册为bean
今天在调试公司spring项目的时候发现了这样一个问题,由于我们的项目使用的是springboot就以springboot为例,代码如下: @Import({DataSourceRegister.cl ...
- npm的源改成淘宝镜像
修改源地址为淘宝 NPM 镜像npm config set registry http://registry.npm.taobao.org/ 修改源地址为官方源npm config set regis ...
- gitee 使用
gitee 使用 首先在码云仓库创建对应的仓库 当你输入错误用户名和密码 需要清掉配置 git config --system --unset credential.helper 设置账号 git c ...
- Vue 通过 Lodash 限制操作频率
<template> <div id="watch-example"> <p> Ask a yes/no question: <input ...
- Windows系统重装工具 WinToHDD Enterprise v2.8 企业破解版
WinToHDD 是一款实用的 Windows 系统硬盘安装工具,有点类似于NT6 HDD Installer,它能不依靠光驱和U盘,让你直接通过本机硬盘来新装.重装和克隆 Windows 系统,支持 ...
- rem、em 、font-size随着屏幕大小的改变而改变
rem 的根标签是html 以html标签上设置的font-size的值为参考点 如: <div id="app"> <div id="son> ...
- sap gui 配置
1: sap gui 安全配置 ,在左下角搜索sap gui configuration.
- echarts 实现tooltip双栏效果
实现效果如下: 代码: //option tooltip: { trigger: 'axis', axisPointer: { label: { show: true, fontSize: 15 } ...