CSS 学习笔记（一）选择器
<h1 id="css学习笔记">css学习笔记</h1><h3 id="一个标签可以有多个class重复的以后面的为准">一个标签可以有多个class。重复的以后面的为准</h3>
<h3 id="并集选择器用逗号分隔的">并集选择器：用逗号分隔的。</h3>
<h3 id="复合选择器交集选择器">复合选择器（交集选择器）：</h3>
<p> 满足多个条件的选择器。</p>
<p> 语法：选择器1选择器2选择器3{}</p>
<p> (中间没有空格)</p>
<p> 对拥有class为p3的span元素进行设计：</p>
<pre><code class="language-css"> span.p3{
background-color:yellow;
}
</code></pre>
<h3 id="父元素-与-子元素">父元素 与 子元素</h3>
<p>就是直接包含的两个标签。</p>
<p>祖先元素：直接或间接包含，所以父元素也是祖先元素</p>
<p>后代元素。</p>
<p>兄弟元素：拥有相同父元素的元素。</p>
<h3 id="后代元素选择器">后代元素选择器</h3>
<p> 作用：选中指定元素的指定后代元素</p>
<p> 语法：祖先元素 后代元素{}</p>
<h3 id="子元素选择器">子元素选择器</h3>
<p>父元素>子元素{}</p>
<h3 id="伪类选择器">伪类选择器</h3>
<p>专门用来表示元素的一种特殊的状态</p>
<p>比如访问过的超链接，获取焦点的文本框</p>
<p>a:link 没访问过的链接</p>
<p>a:visited 访问过的链接</p>
<p>浏览器是通过历史记录判定的一个链接是否被访问过。</p>
<p>因此，有的浏览器为了保护隐私，所以使用visited伪类只能设置字体颜色。</p>
<p>a:hover鼠标移入</p>
<p>a:active 链接被点击的状态</p>
<p>p标签也可以使用hover等。</p>
<p>focus 获取焦点。</p>
<p>input获取焦点后，背景颜色变成黄色。</p>
<pre><code class="language-css">Input:focus {
background-color:yellow;
}
</code></pre>
<p>p：：selection</p>
<p>p标签中选中的内容使用样式</p>
<p>可以使用：：selection</p>
<h3 id="伪元素">伪元素</h3>
<p>使用伪元素来表示元素中的一些特殊位置。</p>
<p>为p中第一个字符来设置一个特殊样式。</p>
<pre><code class="language-css">P:first-letter{
color:
}
</code></pre>
<p>为p中第一行设置一个样式。</p>
<pre><code class="language-css">P:first-line{
}
</code></pre>
<p>p:before</p>
<p>表示元素最前面的部分。</p>
<p>一般before都需要结合content这个样式一起使用，</p>
<p>通过content可以向before或after的位置添加一些内容。这个内容是选不中的。</p>
<p>p:before{</p>
<p> content:"...";</p>
<p> color:</p>
<p>}</p>
<h3 id="属性选择器">属性选择器</h3>
<p>可以根据元素中的属性或属性值来选取指定元素。</p>
<pre><code class="language-html"><p titl="hello":>这是一个段落</p>
</code></pre>
<p>为所有具有title属性的p元素，设置一个背景颜色为黄色</p>
<pre><code class="language-css">p{
background-color:yellow;
}
</code></pre>
<p>为所有具有title属性=hello的p元素，设置一个背景颜色为黄色</p>
<pre><code class="language-css">p{
background-color:yellow;
}
</code></pre>
<p>为title属性值<strong>以ab开头的</strong>元素设置一个背景颜色为黄色</p>
<pre><code class="language-css">p{
background-color:yellow;
}
</code></pre>
<p>为title属性值<strong>以c结尾的</strong>元素设置一个背景颜色</p>
<pre><code class="language-css">p{
background-color:yellow;
}
</code></pre>
<p>为title属性值<strong>包含c的</strong>元素设置一个背景颜色</p>
<pre><code class="language-css">p{
background-color:yellow;
}
</code></pre>
<h3 id="其他子元素选择器">其他子元素选择器</h3>
<p>选中第一个子元素。</p>
<p>要求p是父元素的<strong>第一个子元素</strong>,不是父元素的第一个p元素。</p>
<pre><code class="language-css">p:first-child{
//冒号前面不写，前面就是*，是一个通配符
}
body>p:first-child{
//表示body标签下的第一个元素，且是p的元素
}
</code></pre>
<pre><code class="language-css">p:last-child{
//选中最后一个
}
</code></pre>
<pre><code class="language-css">p:nth-child(5){
//选中第5个
}
p:nth-child(even){
//选中第偶数个
//如果填odd就是基数
//可以用于做表格隔行变色
}
</code></pre>
<pre><code class="language-css">p:first-of-type{
//操作第一个p元素
}
p:last-of-type{
//操作最后一个p元素
}
p:nth-of-type(){
//操作第n个p元素
}
</code></pre>
<h3 id="兄弟元素选择器">兄弟元素选择器</h3>
<p>使用+号,为span(紧挨着的)后一个p元素设置样式</p>
<pre><code class="language-css">span + p{
background-color:yellow;
}
</code></pre>
<p>使用～号，选中span后边的所有兄弟p元素</p>
<pre><code class="language-css">span ~ p{
background-color:yellow;
}
</code></pre>
<p>否定伪类：</p>
<p>为所有p元素设置一个背景颜色为黄色，除了class的值为hello的。</p>
<p>作用：可以从已选出的元素中剔除出某些元素。</p>
<p>：not(选择器)</p>
<pre><code class="language-css">p:not(.hello){
background-color: yellow;
}
</code></pre>
</div>
<div id="MySignature" role="contentinfo">
skr<br><br>
来源：https://www.cnblogs.com/ckxkexing/p/12483079.html
頁:
[1]