Help us understand the problem. What is going on with this article?

CSSセレクタの優先順位の計算方法

More than 1 year has passed since last update.

はじめに

  • セレクタには優先順位があり、点数計算して高得点のものが適用される
  • 点数計算のやり方を以下に記述する

計算式

  • 以下の点数を加算していく
指定方法 点数
タグのstyle属性 style="color: red;" 1000点
ID #hoge 100点
クラス .hoge 10点
属性セレクタ a[href*="google"] 10点
要素名 ul 1点
擬似要素 :first-child 1点
ユニバーサルセレクタ * 0点

計算例

計算 合計点
style="" 1000(style属性) 1000点
#hoge 100(ID属性) 100点
li.color.label 1(要素名) + 10(クラス属性) + 10(クラス属性) 21点
table tr td.color 1(要素名) + 1(要素名) + 1(要素名) + 10(クラス属性) 13点
div + *[href$="com"] 1(要素名) + 0(ユニバーサルセレクタ) + 10(属性セレクタ) 11点
h1 div + span 1(要素名) + 1(要素名) + 1(要素名) 3点
li:last-child 1(要素名) + 1(擬似要素) 2点

~ただの宣伝~

  • 全国のSeleniumer必読
  • Seleniumerといっていますが、Selenium, SauceLabs, Travis, Jenkinsに関するノウハウ書いているのでよかったら参考にしてみてください
oh_rusty_nail
技術メモちょこちょこ書いてます。 参考にしていただけたら幸いです! 興味のある単語: [Selenium] [Jenkins] [自動化] [フロントエンド]
jrits
信頼と魅力のある先進のITをもとに、お客様のワークスタイル・イノベーションの実現を目指します。
http://www.jrits.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away