结构选择器总结笔记

最新推荐文章于 2023-01-12 12:21:11 发布

Goddess_liangyanli

最新推荐文章于 2023-01-12 12:21:11 发布

阅读量2.7k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sinat_39430615/article/details/75309287

一、后代选择器

含义：可以选择一个元素的后代，这个后代元素包括儿子、孙子等！

写法：E F

举例：

.content a{
font-size:36px;}

<h1> 通知</h1><div class="content">
<p>Css就是<span><a href="第三周第一天.html">层叠</a> </span>样式表；（Cascading <a href="../Css/胖迪.jpg.jpg">style</a> sheets）为什么需要用css</p>
<a href="第三周第一天.html">前往现场</a></div>
<a href="第三周第一天.html">查看原文</a>

二、子元素选择器

含义：只能找到当前元素的直接后代；

写法：E>F（符号用英文状态下输入）

举例： .content > a{font-size:28px;

三、并选择器：

含义：将同样的属性提取出来放在一起类名直接用英文逗号隔开；

进行并选择器的使用。

写法：E，.F

举例：

.div1,.div2{position:relative;width:100px;height:100px;background-color:#9BD1FA;
border:1px solid blue;}.div1{ border: 1px solid blue;}.div1{border:1px solid blue;}

四、通配符选择器：

含义：将文本所有的标签进行选中；也可以进行清除默认属性的样式相当于初始化；注意：通配符选择器对页面上所有的元素进行对应的样式，而实际上有很多元素是默认不带任何样式的。

写法;*{}

举例：

*{font-size: 64px;}

*{ padding: 0px;
margin:0px;} 默认属性进行清空！！！

五、兄弟选择器：

含义：选中最近的一个弟弟，不选中自己；

写法：E+F

案例：.go-to + a{font-size:50px;}

六、伪类、伪元素选择器：

伪类选择器：

根据选择不同的状态，自动选择不同的样式；

直接添加一个class，给这个class设置特殊的样式

伪元素选择器：

需要设置特殊的效果的内容收到一个元素标签里面span；

在添加一个class对class上设置特殊样式；

p:first-letter/p:first-line/p:before/p:after/伪元素

p:after{
content:"。";} 加上句号

li:after{
content:"。";
color:red;} 给句号加上颜色

鼠标划过时候添加样式：

a:hover{
    text-decoration:underline;
    font-size:36px;
    color:red;}

被激活的时候如下：点击那一刻！！

a:active{
color:red;}

链接地址未被访问时候添加的状态！如下必须设置href属性。

a:link{
color:red; }

链接地址点击之后添加颜色！如下必须设置href属性。

a:visited

拥有按键输入获取焦点的时候添加样式！

input:focus{
background-color:red; }

<style type="text/css">
        p:first-letter{font-size:36px;}
        span{font-size: 36px;}
    </style>
</head>
<body>
<h2>伪元素的概念</h2>
<h3>第一种方法：使用伪元素</h3>
<p>Thisis a test</p>
<h3>第二种方法：不使用伪元素，而是通过增加一个元素（标签）</h3>
<p><span>T</span>his is a test</p>
<p>结论：方法二是通过增加一个<strong>元素(标签)</strong>来实现方法一的效果，所以方法一的选择器叫做伪元素！</p>