CSS选择器
知识点1.全局选择器*
全局选择器：设置所有标签使用同一样式，用*表示。如：*{margin：0；padding：0} 通配符选择器
一般在开发中将其设置在public.css文件中
*{margin:0 0;}
一般用来重置样式
知识点2.标签选择器h1
标签选择器(元素选择器)：用于声明标记采用的样式。
如：p{color:red;}
所有的标签，都可以是选择器
h1{width:30px; height:40px;}
知识点3.类别选择器，class
类(别)选择器：用来为一系列标签定义相同的样式。
一个类别选择器用在多个标签上：
类别选择器在页面上可以出现多次。
步骤：
a)先使用class定义类名称：如
<p class = "p1">段落一</p>
<p class="p1">段落二</p>
<p class="p1">段落三</p>
b)设置并应用样式：
<style type="text/css">
.p1{属性：属性值；}
</style>
.data{background:red;}
一个标签上可以有多个类别选择器：
同一个标签，可能同时属于多个类
<h3 class="teshu zhongyao">我是一个h3啊</h3>
h3就同时属于teshu类，也同时属于zhongyao类
总结：
1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
2） 同一个标签可以同时携带多个类。
知识点4.Id选择器
id选择器：和类选择器相似，但要注意同一id名在同一个页面中只能出现一次。
步骤：
a)先使用id定义id选择器名称：如
<p>段落一</p>
<p id="p1">段落二</p>
<p>段落三</p>
b)设置并应用样式：
<style type="text/css">
#p1{属性：属性值；}
</style>
任何的HTML标签都可以有id属性。表示这个标签的名字。
id命名规则：
1） 只能有字母、数字、下划线
2） 必须以字母开头
3） 不能和标签同名。比如id不能叫做body、img、a
#a1{background:green;}
知识点5.伪类选择器
伪类选择器：用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上。
四种状态：（顺序不可变LVHA）
a)超链接默认效果——a:link{属性：属性值；}
b)超链接访问后效果——a:visited{属性：属性值；}
c)鼠标移过超链接效果——a:hover{属性：属性值；}
d)超链接被激活的效果——a:active{属性：属性值；}
一般 只设置 超链接 默认效果和 鼠标划过的效果：
a{}
a:hover{}
:link 默认效果
:visited 访问后效果
:hover 鼠标移过效果
:active 被激活的效果
a:link{color:pink;}/* 初始化状态*/
a:visited{color:green;}/*被人点过的状态*/
/*以上两个伪类只有a标签可以用*/
/*以下两个伪类所有元素都可以使用*/
a:hover{color:yellow;}/* 鼠标滑过的状态*/
a:active{color:white;}/* 鼠标按住不放的状态*/
知识点6.目标伪类选择器target对于超链接起作用(如同锚点一样)
:target 超链接后目标样式
当使用超链接后，链接的目标可以用目标选择器设置，目标只有被跳转后才会显示对应的样式
:target {
font-size:20pt;
border:1px solid gray;
}
div:target {
background-color:#ccc;
}
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<br /><br /><br />
<a name="news1">内容 1...</a>
<div id="news2">内容 2...</div>
知识点7.元素伪类选择器；大多对于表单
input:enabled { font-weight:bold;}
input:disabled { background-color:#ccc;color:Gray;}
input:checked {outline:2px solid blue;}
ID：<input type="text" disabled="disabled" value="333" />
<br /><br />
名称：<input type="text" /><br /><br />
状态：<input type="radio" name="state" value="1" />启用
<input type="radio" name="state" checked="checked" value="0" />停用
大多都是在input的输入标签上使用
:enabled，匹配每个已启用的元素（大多用在表单元素上）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>状态伪类选择符-可以禁用</title>
<style>
[type="submit"]:disabled{color:#0f0;}/*禁用*/
[type="submit"]:enabled{color:#f00;}/* 普通可用 */
</style>
</head>
<body>
<!-- disabled 禁用状态 -->
<input type="submit" value="同意(5)" disabled />
<input type="submit" value="同意" />
</body>
</html>
:disabled，匹配每个被禁用的元素（大多用在表单元素上）不可以复制
:checked，匹配每个已被选中的 input 元素（只用于单选按钮和复选框）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>checked</title>
<style>
input[type="radio"]:checked{outline:5px solid #f00;}
input[type="checkbox"]:checked{outline:5px solid #f00;}
</style>
</head>
<body>
<form action="">
<p><input type="radio" name="sex" />男</p>
<p><input type="radio" name="sex" checked="checked" />女</p>
<p><input type="checkbox" name="box" checked="checked" />dota</p>
</form>
</body>
</html>
:focus，元素获取焦点时的状态
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>状态伪类选择符-获取焦点</title>
<style>
[type="text"]:focus{background:#0f0;}/*获取焦点状态触发效果*/
</style>
</head>
<body>
<input type="text" />
<input type="password" />
</body>
</html>
:read-only，元素只读时候的状态（可以复制）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>只读/非只读</title>
<style>
input[type="text"]:read-only {background: #ff0;}
input[type="text"]:read-write {background:#0ff;}
input[type="text"]:-moz-read-only {background:#ff0;}
input[type="text"]:-moz-read-write {background:#0ff;}
</style>
</head>
<body>
<form action="">
<p>姓名：<input type="text" name="name" /></p>
<p>地址：<input type="text" name="address" value="江苏省苏州市" readonly="readonly" /></p>
</form>
</body>
</html>
:read-write，元素非只读时候的状态
:default，元素默认有checked属性值的时候的状态
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>default</title>
<style>
input:default{outline:5px solid #00f;}/*外边框*/
</style>
</head>
<body>
<form action="">
<p><input type="radio" name="sex" />男</p>
<p><input type="radio" name="sex" checked="checked" />女</p>
<p><input type="checkbox" name="box" checked="checked" />dota</p>
<p><input type="checkbox" name="box" />dota</p>
</form>
</body>
</html>
:indeterminate ，元素都没选中过的状态只支持google，当没有选中的时候有作用，一旦选中了就没有效果了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>indeterminate</title>
<style>
input[type="radio"]:indeterminate{outline: solid 3px blue;}/*选择过线就消失了*/
</style>
</head>
<body>
<form>
年龄：
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
</form>
</body>
</html>
input::selection，元素被选取的状态（但是在其中只可以修改文字颜色，背景颜色；）需要加前缀
伪类选择器的权重是10；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内容被选取的状态</title>
<style>
div::selection{color:#f00;}
div::-moz-selection{color:#f00;}/*当字体被选中了，就会呈现红色*/
</style>
</head>
<body>
<div>
sadasdsasadsad
</div>
</body>
</html>
知识点8.结构伪类选择器
:root 选择根目录 可以理解成html
:root{background:#f00;}
body{background:#00f;}
body :not(h1) 除子元素h1的所有子元素
p:empty 选择内容为空的元素(回车换行都不算空)
:target 选择被锚点选中的元素
案例:target.html
ul li:first-child 选择第一个(子)元素
怎么理解：就是选择ul的第一个子元素并且标签是li的，才可以添加样式；
ul li:last-child 选择最后一个(子)元素
ul li:nth-child(2) 选择第二个(子)元素
ul li:nth-last-child(2) 选择倒数第二个(子)元素
ul li:nth-child(odd) 所有正数下第奇数个(子)元素
ul li:nth-child(even) 所有正数下第偶个(子)元素
div p:nth-of-type(2) 有关这个元素的第二个(子)元素
div p:nth-last-of-type(2) 有关这个元素的倒数第二个(子)元素
div p:only-child 只有p元素是唯一一个(子)元素才有效
n元算(n是从0开始计算无限大的数字)
ul li:nth-child(n+2) 匹配从第二个元素开始
ul li:nth-child(2n) 匹配偶数
ul li:nth-child(2n+1) 匹配奇数
:first-child ，匹配属于其父元素的首个子元素
p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素
:last-child，匹配属于其父元素的最后一个子元素
p:last-child 选择属于父元素的最后一个子元素的每个 <p> 元素
:empty ，匹配没有子元素（包括文本节点）的每个元素
p:empty 选择没有子元素的每个 <p> 元素
:only-child ，匹配属于其父元素的唯一子元素
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素
:nth-child(n)，匹配属于父元素的第n个子元素
div p:nth-child(2) 选择div标签下第二个子标签是p的标签
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
[class="a"]{
color:#ff0;}/*最好的方法就是将属性与属性值复制过来*/
[class|=a]{ color:#0FF;}
ul li:nth-child(3){ background:#0f0;}
dl dt:nth-child(2){ background:#00F;}
</style>
</head>
<body>
<div class="a">
你好
</div>
<div class="a">黄深锋</div>
<div class="a-b">李飞飞</div>
<div class="a b">吴梦宇</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<dl>
<dt>你好</dt>
<dd>他好</dd>
<dd>我好</dd>
</dl>
</body>
</html>
知识点9.否定伪类选择器
:not(selector) 匹配非指定元素/选择器之外的每个元素
body :not(h1) 除子元素h1的所有子元素
not(selector) ，匹配非指定元素/选择器的每个元素
input:not([type="text"])
{
font-size:15px;
font-weight:bold;
color:Red;
}
<input type="text" /><br />
<input type="button" value="普通按钮" /><br />
<input type="submit" value="提交" />
知识点10.伪元素
伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容。伪元素的由两个冒号::开头，然后是伪元素的名称。
简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。
::first-letter 选择器的首字母
::first-letter 选择器用于选取指定选择器的首字母
常用于排版细节，如首字母突出显示、下沉等
p::first-letter
{
font-size:20pt;
color:#8A2BE2;
font-weight:bold;
}
<h1>h1 文本</h1>
<p>段落文本111</p>
<p>段落文本222</p>
::selection 被用户选取的部分
::selection 选择器匹配被用户选取的部分
::selection
{
color:#f00;
}
页面文本，可以使用鼠标拖拽的方式直接选中，查看效果。
<p>段落文本</p>
<div>div中的文本</div>
::first-line 选择器的首行
::first-line 选择器用于选取指定选择器的首行
p::first-line
{
font-size:20pt;
color:#8A2BE2;
font-weight:bold;
}
<p>这是一个文本比较多的段落，有多行文本。需要设置第一行文本的特定样式。</p>
知识点11.内容生成器也属于伪类选择器：after
:before 在选择器前增加内容
p:before{
content:"台词：";
}
a:before {
content:url(m1.gif);
padding-right:5px;
}
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<a href="#">链接1</a><br />
<a href="#">链接2</a>
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容
常用的取值
url：图像
字符串：纯文本
p:after
{
content:url(image/flower.jpg);
}
:after 在选择器后增加内容
p:after
{
content:"台词：";
}
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素</title>
<style>
div{border:2px solid #000;position:relative;height:200px;}
div:before{content:"简单点1";}
div:after{content:"简单点2";}
</style>
</head>
<body>
<div>说话<span>的方式</span></div>
</body>
</html>
知识点12-13.属性选择器
[title] 选择所有title属性的元素
[title=a] 选择所有title=a的元素
[title=“1”] 值为数字或特殊字符必须加双引号
[class=“a b”] 值为多个必须加双引号
[class~=“a”] 选择用所有单词为a的元素
<div class=“b a”></div> 正确
<div class="a"></div> 正确
<div class=“ab b”></div> 错误
<div class=“aa a”></div> 正确
[class|=a] 选择要么是单个a要么a-开头的完整单词的元素
<div class="a"></div> 正确
<div class=“a b”></div> 错误
<div class="are"></div> 错误
<div class="a-b"></div> 正确
[class^=a] 选择所有a开头的元素
<div class="a-b"></div> 正确
<div class="aa"></div> 正确
<div class="ba"></div> 错误
<div class=“b a”></div> 错误
[class$=a] 选择所有a结尾的元素
<div class="a-b"></div> 错误
<div class="aa"></div> 正确
<div class="ba"></div> 正确
<div class=“b a”></div> 正确
[class*=a] 选择所有带有a的元素
知识点12-13.属性筛选选择器
[id] 附带 id 属性的元素
p[id] 附带 id 属性的 <p> 元素
p[id][class] 附带 id 属性和class属性的 <p> 元素
p[title="summary"] 附带 id 属性的 <p> 元素，其中title 属性的值为summary
p[class~="myClass"] 附带class 属性的 <p> 元素，其中 class 属性的值是以空格隔开的单词列表，myClass也是单词列表中的一个单词
p[class^="b"] class 属性值以 "b" 开头的所有 <p> 元素
p[class*="b"] class 属性值中包含子串 "b" 的所有 <p>元素
p[class$="b"] class 属性值以 "b" 结尾的所有 <p> 元素
知识点14.群组选择器
群组选择器就是用逗号区分如果个标签，所有标签都设置为这个样式
h1,h2,h3,h4,h5,h6{ color:red; font-size:30px}
知识点15.后代选择器
后代选择器就是用空格空开标签，标识是该选择器的后代
E F：选择所有被E元素包含的F元素。
与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
html div{ bgcolor } .header li{} div span{}
例如
div div {background: orange;}
知识点16.子选择器
E>F：选择所有作为E元素的子元素F。
p>a{} p内标签名为a的元素样式
扩展：
ul>li 子选择器 只能选择亲儿子
知识点17.相邻选择器
相邻选择器
E+F ：选择紧贴在E元素之后F元素。
与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。
li+li 选择下一个元素是li的元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器+选择下一个元素</title>
<style>
ul li+li {color:#f66}
ol .first+li{color:#f66}
</style>
</head>
<body>
<ul>
<li>11111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<ol>
<li class="first">11111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ol>
</body>
</html>
知识点18.兄弟选择器
兄弟选择器
E~F ：选择E元素后面的所有兄弟元素F。 。
与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。
span~p 选择span之后所有的同级p元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器+选择之后的所有p元素</title>
<style>
span~p{color:#f00;}
</style>
</head>
<body>
<div>
<p>p</p>
<span>span</span>
<p>p</p>
<b>b</b>
<p>p</p>
<b>b</b>
<p>p</p>
<b>b</b>
</div>
</body>
</html>
案例
div class=“brother”>1</div>
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>9
<div>10</div>
</div>
</div>
</div>
<style type="text/css">
*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
</style>
1072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
