CSS选择器
回忆一下CSS2中得选择器样式:
行内样式>ID选择器>类选择器>标签名选择器
一、第一种分类方式:按照功能上
element1~element2 element1 之后出现的所有 element2。
两种元素必须拥有相同的父元素,但是 element2 不必 直接紧随 element1。
例子: p~ul{font-size: 50px;} (ul在p的下方)
其中有有一个特殊的:相邻的兄弟选择器(紧随到其元素才会有影响);p+ul{font-size:50px;}
8、子选择器
子选择器使用了大于号.表示父级元素的子元素将有所改变
h1>strong{color:red;} 子元素的样式有所变化
<h1>我是<strong>子选择器<strong>我是子元素样式</strong><h1>
9、属性选择器
(1) [attribute] 匹配带有指定属性的元素
例子:[title]{color:green}
<div><a href="#" title="我是特殊的title">属性选择器</a></div>
输出
(2)[attribute=value] 匹配带有指定属性与值得元素;
[title="title"]{color: #00CCFF;margin-left: 30px;}
<div>
<a href="#" title="titlehh">属性选择器</a>
<a href="#" title="title">带title的值得选择器</a>
</div>
显示的结果为:
<a href="#" title="title name">属性选择器</a>
<a href="#" title="title">带title的值得选择器</a>
</div>
![](https://images2015.cnblogs.com/blog/618789/201603/618789-20160328205128644-1496656391.png)
<div>
<a href="#" title="title">我们都带有title这个单词</a>
<a href="#" title="title">我们都带有title这个单词</a>
<a href="#" title="title">我们都带有title这个单词</a>
</div>
显示出来的结果是
(5)[attribute^=valiue] 匹配属性值以指定值开头的每个元素.
指定值可以是单独一个字母或者一个单词或者是数字。最好是单词(便于代码的编辑)
[title^="title"]{color: green;margin-left: 50px;}
<div>
<a href="#" title="titleFirst">我们都带有title这个单词</a>
<a href="#" title="titleSecond">我们都带有title这个单词</a>
<a href="#" title="title">我们都带有title这个单词</a>
</div>
(6)[attribute$=value] 匹配属性值以指定值结尾的每个元素
[title$="title"]{color: #003399;margin-left: 100px;}
<div>
<a href="#" title="Firsttitle">我们都带有title这个单词</a>
<a href="#" title="Secondtitle">我们都带有title这个单词</a>
<a href="#" title="1title">我们都带有title这个单词</a>
</div>
(7)[atrribute*=value]匹配属性值包含指定值的每个元素(这个是最常用的属性选择器)
[title*="ti"]{color: red;margin-left: 100px;}
<a href="#" title="Firstitle">我们都带有ti这个单词</a>
<a href="#" title="Secondtitle">我们都带有ti这个单词</a>
<a href="#" title="title">我们都带有ti这个单词</a>
<a href="#" title="ti">我们都带有ti这个单词</a>
</div>
就是目标元素(target element)。 :target 选择器可用于选取当前活动的目标元素。
点击就会有样式的改变
:target{
color: red;
font-size:30px ;
}
<div>
<a href="#news" title="Firstitle">并且href有值跳转到new1</a>
<a href="#" title="Secondtitle">带有href属性</a>
<p id="news">我有专有的href值,内容1</p>
</div>
点击第一个a标签,会跳转到对应id的p标签,并且p标签的样式会有改变
(3)::selection 匹配每个已被选中的 input 元素(只用于单选按钮和复选框)
(4):not(selector)(反伪类)
综上就是我对CSS选择器的总结,大家有什么问题可以提出来。后期我还会对对它优化更新。
多多指点意见