selector_html/css_WEB-ITnose-HTML Tutorial-php.cn

There are many types of CSS selectors. Every time I see what others have written, it feels like an endorsement. I can’t help it. There are only so many types. I can only list them one by one. What other tricks can I play? So the important thing is to understand why it is used in this way and what are the benefits.

If our web page is just as simple as a list of 3 things that the boss tells us to do, cross it off after completing one item, so we can see at a glance which one has been done and which one has not been done, and the html web page It is a text form organized by structured, nested tags. It is many and long, so it needs selectors to quickly locate it in order to apply the styles we add to it, so it makes sense to understand selectors.

1. Tag selector

In CSS, some tags themselves already have some styles, such as h1, which is usually used as a title. Its font is larger than normal and the default is bold. , and it is a block-level tag with margin values around it. Tag selectors, essentially, redefine the style of a tag. Still h1, because using it as a title is good for search engines, so it is often used, but its own style sometimes (I'm afraid many times) seems very unreasonable with the layout of the web page, so we can completely rewrite its style and change the font size , remove margin, etc. to achieve overall control effect. As long as its style is redefined, h1 will be used directly to display the text content after applying the new style, which is more harmonious.

    h1{font-size:1em;}

Copy after login

2. Class selector

Since it is a class, it affects one or several elements more, in order to reduce the workload and provide precise control , it is a good choice to give the same class name to some elements of the same type. The point is that you can add multiple class names to one class, which saves time. If the three selectors here add different styles, they will all be loaded on this text. Of course, CSS styles are based on the principle of proximity. The later ones overwrite the previous ones, and the ones with higher priority override the ones with lower priority. So if mr also sets font-size, it will override the font-size in the ft selector.

    .ft{font-size:24px;}        .mr{margin:10px;}    .fl{float:left;}    <p class="ft mr fl ">Hello World</p>

Copy after login

Professional front-ends usually use several classes at the same time, one fl means floating to the left side of the page, write a separate style, and add it when needed, so it is more like A tool, split into multiple class names, is more scalable. Note that - or _ can appear in the class name, which is allowed.

3. ID selector

ID gives people a feeling of unique identification, so it often marks a special part of the web page, and more often represents a certain part of the content, such as Banner, sidebar, main content, etc. When dividing a large block, it is often like this. Of course, if you say that I like to use the ID selector, I add ID to all tags. The only result is that no one will bite you -_-#

    #news{        margin-left:10%;        font-family:"Times New Roman"     }     <div id="news">         ........     </div>

Copy after login

The important thing about ID is that it has high priority, such as the following

    #link{ color:red; }    .link{ color:blue; }    <a id="link" class="link" href="#">To Somewhere</a>

Copy after login

Is it red or blue? You can tell from the demo that it is red because the ID selector has a higher priority. The browser will calculate a weight value based on the ID and class (or combination), and whose style is bigger will be used (theoretically, this is the case, but with Chrome It doesn’t seem certain after trying it), and the calculation of the weight value is a bit troublesome if you delve into it, especially when more than one ID, class, and label are entangled together. There are also articles analyzing how to calculate weights online. Of course, why do we need to embarrass ourselves? At least I (learned from the front-end) sometimes make simple pages and only use class selectors. Only when I use js sometimes do I need to get elements quickly. Add ID, basically do not use ID selector to add style, to avoid trouble.

　4. Group Selector

If you have seen professional front-end css code, there must be something like this at the beginning:

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li{ margin: 0; padding: 0; }

Copy after login

At first, I didn’t understand why I had such a large number of tags. I thought it was to grasp the style from the whole to the part during design, so I first gave all the tag elements one or two basic, overall styles. Like here, margin and padding are used to make All their labels are reset to 0. Later I discovered that this is not entirely wrong, but more importantly, when many browsers process some tags with their own styles (such as h1~hn), although there are spaces on the left and right, some use margin, and some use margin. Non-uniform use of padding may cause style confusion. In order to make the style display consistent on more browsers, we simply remove their margin and padding here. When a certain tag is to be used, add margin and padding separately. padding. There are a lot of tags here, and the selectors separated by commas are called group selectors, which means that they are all set to a style in parentheses. The group selector is not limited to tags, class and id can also be used: .link, .news, #banner{...}. Group selectors are convenient when setting up a bunch of tags, classes, and IDs with the same style. Regarding the above-mentioned design that sets margin and padding to 0 to improve display consistency, there is a name called CSS Reset, which is a style reset that novices like me don’t usually use.

5. Universal selector

　　群选择器一次设置多个很爽，堆在一起用逗号分隔即可，还有更爽的，就是通用选择器，它就是一个 * ，代表所有选择器（通用嘛），比如下面

    h1, h2, p{font-weight:bold;}    * {font-weight:bold;}

Copy after login

　　第二个通用选择器等同于设置了第一个群选择器的内容，当然能比它代表更多的东西。

　　6. 派生选择器

　　这应该是专业前端最最常用的类型了，也称后代选择器。我们知道html标签是嵌套的，外面的是父元素，里面的是子元素，当然父子关系是相对的，这叫做html的族谱，当然它也有根节点，兄弟节点等，这根二叉树完全一样，所以也有相应的父标签、祖先标签、兄弟标签等等。比如像这样的

    <div id="nav">        <ul class="nav">             <li></li>             <li></li>        </ul>    </div>

Copy after login

　　ul是div的子标签，li是ul的子标签，id选择器在类选择器nav的标签的父标签里边，所以定位到

标签的选择器可以这样写：

    #nav .nav li{...}

Copy after login

　　需要注意的地方就是中间有空格，空格表示子标签，或者是位于子标签中的选择器，即一种父子关系，子孙关系也可，爷孙关系当然也行，总之就是：派生关系。对于派生选择器，如果不隔一个空格就是完全另一种情况，比如这里如果写 div#nav ul{...}（div紧挨着#nav）表示的就是：

　　看看专业前端的代码，派生选择器会占到百分之八九十，而且风格比较统一，派生时尽可能用class，当然最后会有一些标签选择器，但风格真的很好，不是一会儿类选择器，又夹个ID选择器，再来个标签选择器，最后再搞个ID选择器，这样看起来十分紊乱，一点也不丝滑，专业人士写的就是有种和谐的美感。

　　除了一会ID选择器一会儿类选择器不好看之外，有个很大的原因是：很有可能你设计的这个样式根本没有运用到指定的地方，虽然很希望是它用到你指定的地方。比如

    <div id="id_wrap" class="cl_wrap">        <p id="id_seg" class="cl_seg">            Hello World        </p>    </div>    1  div p {...}    2  #id_wrap #id_seg{...}    3  .cl_wrap .cl_seg{...}    4  .cl_wrap #id_seg{...}    5  div #id_seg{...}    6  div .cl_seg{...}    6  .cl_wrap p{...}    7  #id_wrap p{...}    8  div.cl_wrap p{...}    9  #id_wrap p.cl_seg{...}    ...    ...

Copy after login

　　这9个样式都可以运用到Hello World上（单独写的话），继续组合下去，还有，如果把这些都写出来，最后哪一个会真正加载到文本内容上呢？这里就有一个权重值的问题，前面说过，就权值来说，ID选择器最大（在选择器中），看过一本书上说：标签选择器1分，类选择器10分，ID选择器100分，内建样式1000分。内建样式即是类似

这样的，直接在标签上给style。然后将用到的选择器权值按类型不同相加（如div p 是2分，.cl_wrap #id_seg 是110分，div.cl_wrap p是12分），结果最大的最终运用到指定内容上，但是貌似也不准确...不知道我测的对不对。计算完了，还要结合就近原则，看看哪些属性被覆盖了，哪些是继承了父元素的（如font-size，如果父元素是16px，子元素的font-size如果写的是100%就是16px，如果父元素是24px，子元素设置150%就是36px），还要看看哪些是永远保留的样式（下面，就近原则也覆盖不了）等等，这么搞下去怕迟早要疯掉...

    /* !important表示这个属性将永远不会被覆盖 */    .seg{ font-style:bold !import; }

Copy after login

　　有文章对这个权值进行计算分析，偶就还是懒惰的逃避了...所以专业前端的用类选择器是没有错的，只要定位得够精确，遵循统一规范，不临时变道加个ID选择器之类的，基本不会出错。

　　使用派生选择器的另一大优点就是节省工作量。一个划分好布局的网页上，一块块的div中风格总是尽量的保持统一，从父元素到子元素总有很多属性相同，而css的样式是可以继承的，比如父元素的字体时16px，如果子元素不设置font-size，子元素中的字体大小将也是16px，当然也不是所有的样式都可以继承（有专门列表），如line-height行间距，这是合理的，如果父元素16px的字体大小行间距是16px，如果现在子元素的字体为54px额行间距仍是16px，就可能使得子元素中的字体行之间很紧凑甚至发生重叠，因为字体大小增大了很多行间距没变，试试可以看到效果。正式由于样式的可继承性，导致派生选择器更好用了。

　　7. 子选择器

　　根据html中标签结构的父子之分而来，形式 A > B，尖括号表示父子关系，注意不一定表示B一定是A的直接子标签，可能是可能是孙子、曾孙、曾曾孙，编程中的父子结构相信你知道，说a是b的子节点，不是非要a就是b的直系后代，所以div > p{...}表示div标签中的所有（直接或间接的）子标签，div p也是这样。

　　8. 同胞选择器

　　对共一个父元素的标签而言，它们是兄弟（或者姊妹？）关系，在css中叫同胞，而在位置上紧挨着的是临近同胞，所以css针对这种结构有一种称为临近同胞选择器，如

    <div>         <h1>head</h1>         <p>Hello</p>    </div>   /******/   h1 + p {...}

Copy after login

　　h1和p是临近同胞（兄弟），h1 + p 则表示选则了紧挨在h1后面，与h1共父元素的标签p。

　　9. 通用同胞选择器

　它是对同胞选择器的延伸，h1 + p只能对具有兄弟关系，且紧挨在h1后面的p元素起作用，那么 h1 ~ p就表示选中了具有兄弟关系的，h1后面的所有p标签。

    <div>         <h1>Hello</h1>         <strong>Hello</strong>         <p>我被选中</p>         <em>Hello</em>         <p>我被选中</p>    </div>

Copy after login

　　10. 伪类

　　伪类选择器有很多，有时我们匹配的不是单个元素，而是某种状态，某种特殊的结构（简单的兄弟选择器表达不出来），或者某个动作的瞬间，比如鼠标滑过链接时，无序列表中的奇数列，这种情况的选择器，css给了个名字：伪类。

捕捉动作的，最常见的是链接，，a:link，a:visited，a:hover，a:active，分别表示未访问前，已访问过，滑过时，鼠标点击的一瞬间，a与:之间没有空格。这四个伪类的设置是有顺序的，就是这里所列出的，如果hover放到了link的前面（如下），鼠标滑过时会发现链接还是绿色的，因为他们的权重都相同，按照就近原则，后边的样式覆盖前边的（样式冲突），鼠标滑过应用的将是a:link的样式，所以要按顺序来，某书介绍了一种记法 LoVe, HAte。在有些选择器上，hover不仅是链接的专利，比如p:hover，滑过段落时改变样式，当然只是一些浏览器、一些高版本的可以，得看具体情况。伪类的书写不一定前面就是标签，可以是#lnk:hover，css很多地方均是同理，不要理解的很死板。

    a:hover{color:red;}    a:link{color:green;}

Copy after login

　　:focus捕捉当获得焦点时的响应，如文本框变背景色。

　　匹配目标，:target，如果一个url中带有#aaa，恰好html中有带有id为aaa的标签，则匹配的是它，它用在页面内的锚点，如下，点击跳到页面内跳到锚点处可以发现它的样式已经改了（不知道br够不够）

    div :target{background-color:red;}    <p><a href="#goto">跳到页面内goto</a></p>    <br/><br/><br/><br/><br/><br/><br/>    <br/><br/><br/><br/><br/><br/><br/>    <br/><br/><br/><br/><br/><br/><br/>    <br/><br/><br/><br/><br/><br/><br/>    <br/><br/><br/><br/><br/><br/><br/>    <br/><br/><br/><br/><br/><br/><br/>    <div>        <p name="goto" id="goto">锚点goto</p>    </div>

Copy after login

　捕捉根节点，:root，html页面就是html节点了。

　　捕捉特殊子节点的，:first-child、:last-child、:first-of-type、:last-of-type等。字面义可看出是第一个子节点，或第一个子类型。值得注意的是p:first-child与p :first-child完全不同（后者两个之间有空格），前一个很容易以为，它是指p标签的第一个子节点，但实际上第二个才是这样的正确写法，而p:first-child指的是，p作为其他标签的第一个子标签，它匹配的应该是这样的

    <div>        <p>匹配了这里</p>        <span><p>也匹配了这里</p></span>    </div>

Copy after login

　　同理，p:first-of-type，指的是，作为其他元素的子元素，匹配的第一个出现的标签为p的元素，即首先，p是其他元素的子元素，第二，匹配的是子元素中第一个出现的p标签，前面有其他的类型子标签不要紧，只要不是p就行，即使它后边还有相同的p兄弟标签，因为不是第一个出现的，也不符合。

　　这种有点麻烦的情况，就要问问，它是它的子元素吗？它是它下面第一个出现的x标签吗？符合就是对的，如

    <div>        <h1>标题</h1>    <span>           <p>我是span的子标签中第一个出现的p</p>    </span>    <p>我是div的子标签中第一个出现的p</p>    </div>

Copy after login

　　而 p :first-of-type（有空格），是指p标签下的第一个子元素，因为没指定类型，所以只要是p标签下边的第一个子类型，就会匹配到，等同于p :first-child，如果是p span:first-of-type，就是指p标签下，第一个类型为span的子标签。

　　匹配只有一个子元素的，:only-child，如p:only-child（没有空格），匹配以p作为子元素，且它的父元素只有它这一个子元素的情况。

　　按一定规律的匹配子元素，以:nth-child为例，从字面意义可知是第n个子元素，形式非常灵活。比如现在有一个无序列表栏目，以它为例

    <ul class="nav">         <li>A</li>         <li>B</li>         <li>C</li>         <li>D</li>         <li>E</li>    </ul>

Copy after login

第一种，直接给一个数值，.nav li:nth-child(2)表示：li是类名为nav的子标签，且匹配第2个这样的标签，这里li都是ul的子标签，匹配其中第二个就是B了。

第二种，匹配奇偶项，如.nav li:nth-child(odd)，表示匹配列表中奇数项列表，括号里的odd是个参数，表示寻找奇数列（单词也表此意），A是第1列（从1开始计数），C是第3列，包括第5列E都符合，同理有偶数匹配，.nav li:nth-child(even)。

　　第三种，使用表达式，比如.nav li:nth-child(2n+3)，css不仅自己知道第一条列表的n值是1，第二条是2，而且在计算2n+3是几的时候，从0开始取自然数，所以2n+3就是对应着第3条、第5条、第7条...这种带n的表达式更加灵活。

　　ok，类似于:nth-child，还有:nth-of-type(n)、:nth-last-child(n)（倒数第几个）、:nth-last-of-type(n)（倒数第几个类型）等等就很好理解了。

　　伪类中还有匹配某种状态的，如下，比如哪些文本框不可用（设置了disable属性），单选框是否被选中等

    .txt:checked    .txt:enabled    .txt:disabled

Copy after login

　　11.伪元素

　　匹配某个元素的特殊位置，起了个名字叫伪元素。如下，如字面义，:before匹配p标签文本内容的开始地方，:after匹配其结束的地方，content的内容规定在文本开始加上Start，结束时加上End~。first-letter匹配首字母，first-line匹配首行。

    p:before{content:'Start";}    p:after{content:"End~"}    p:first-letter{color:red;}    p:first-line{color:green;}

Copy after login

　　12.属性元素

　　属性元素非常常用，特别在js中，怎么能少的了。属性选择器当然跟标签带有的属性相关，就是根据这些标签带有的某些属性来做的匹配

　　第一种，如A[attr]，匹配带有attr属性的A标签，如下，匹配带有target属性的a标签，因此捕捉到第2个

     a[target]{color:green;}     <a href="http://www.css.org/">to css</a>     <a href="www.example.com" target="_blank">to example</a>

Copy after login

　　第二种，A[attr=value]，匹配带有attr属性且属性值为value的元素，那么上例的匹配可以这样写，a[target=_blank]{...}，将_blank加引号也可。

　　第三种，A[attr~=letter]，匹配带有attr标签，且标签的属性值中带有letter单词的A元素，如

    p[class~=news]{color:red;}    <p class="wrap news"></p>

Copy after login

　　第四种，A[attr|=value]，匹配带有attr属性，且属性值以value开头或者value-开头，最适合的就是规定元素语言属性的时候，在html页面中可告知浏览器，这里用什么语言，有个lang属性，如下，匹配的是第一个。

    p[lang|=en]{color:red;}    <p lang="en-us">I am CSS</p>    <p lang="zh-cn">层叠样式表</p>

Copy after login

　　第五种，使用通配符*，A[attr*=value]，只要A标签带有attr属性，且属性值中包含字符串value即匹配

　　最后两种，检测属性值的开头和结尾，分别是A[attr^=value]：匹配带attr属性，且属性值以value开头的A元素，如检查链接a[href^=http]，而A[attr$=value]则匹配以value结尾的attr属性值的A，如某些下载链接检测a[href$='.zip']。

　　最后属性选择器完全可以混用，比如在某个表单中，用jQuery选中元素对象时

    <div>    <input type="radio" name="type" value="big" />big<br/>    <input type="radio" name="type" value="medium" checked />medium<br/>    <input type="radio" name="type" value="small"  />small<br/>    </div>    <!--需要引入jQuery文件-->    <script type="text/javascript">         alert($("[type=radio][name=type][checked]").val());    </script>

Copy after login

　　其中[type=radio][name=type][checked]，就是对多个属性的同时使用，本例想打印type属性为radio、name属性为type、有checked属性（被选中）的元素的value值，需要引入jQuery文件。这个好像不用写得这么麻烦，突然忘了

　　这些有的属于css2，有的是css3，而且不一定各个浏览器通用，偶只是知道有这么回事，没去分个类，原谅我白痴=_=

Related labels：

Selector

source：php.cn

Previous article：div box that follows the mouse movement_html/css_WEB-ITnose Next article：css writing specifications_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn