CSS选择器

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>

显示的结果为：

（3）[attribute~=value]匹配属性值包含指定的词汇的元素，value必须是独立的字符串

[title~="title"]{color:red;margin-left: 30px;}

<div>
        <a href="#" title="title name">属性选择器</a>
        <a href="#" title="title">带title的值得选择器</a>
    </div>

显示的结果是两个a标签内的颜色都有所变化

（4）[attribute|=value]  匹配所有带有指定值开头的属性值得元素，该值必须是整个单词

   [title|="title"]{color:red;margin-left: 100px;display: inline-block;}

<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;}

 就是目标元素(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选择器的总结，大家有什么问题可以提出来。后期我还会对对它优化更新。

多多指点意见